tweaks

web/source/css/_media-wrapper.css

@@ -117,6 +117,16 @@
 				.hide {
 					display: none;
 				}
+
+				&:focus-visible {
+					/*
+						Can't rely on media having background with
+						decent contrast so inset and use button-fg
+						instead so focus is definitely visible.
+					*/
+					outline: 0.25rem dashed $button-fg;
+					outline-offset: -0.25rem;
+				}
 			}
 
 			.show.sensitive {
@@ -139,8 +149,13 @@
 			height: 100%;
 			width: 100%;
 
-			&:focus {
-				outline-offset: -0.15rem;
+			/*
+				Inset outline to avoid outline
+				being hidden by overflow: hidden.
+			*/
+			&:focus-visible {
+				outline: $button-focus-outline;
+				outline-offset: -0.25rem;
 			}
 		}
 

web/source/css/_profile-header.css

@@ -94,8 +94,9 @@
 					Offset to avoid clashing with
 					thick border around avatars.
 				*/
-				&:focus {
-					outline-offset: 0.2rem;
+				&:focus-visible {
+					outline: $button-focus-outline;
+					outline-offset: 0.25rem;
 				}
 			}
 

web/source/css/base.css

@@ -72,26 +72,26 @@ $fa-fw: 1.28571429em;
 	Outline to give links when they're
 	focused (ie., by clicking or tabbing to them).
 */
-$link-focus-outline: 0.15rem dotted $link-fg;
+$link-focus-outline: 0.25rem dotted $link-fg;
 
 /*
 	Outline to give buttons when they're
 	focused (ie., by clicking or tabbing to them).
 */
-$button-focus-outline: 0.15rem dashed $button-focus-border;
+$button-focus-outline: 0.25rem dashed $button-focus-border;
 
 /*
 	Outline to give input elements like radio buttons
 	and checkboxes when they're focused (ie., by clicking
 	or tabbing to them).
 */
-$input-clickable-focus-outline: 0.15rem dashed $input-focus-border;
+$input-clickable-focus-outline: 0.25rem dashed $input-focus-border;
 
 /*
 	Outline to give summary elements when they're
 	focused (ie., by clicking or tabbing to them).
 */
-$summary-focus-outline: 0.1rem dashed $link-fg;
+$summary-focus-outline: 0.25rem dotted $link-fg;
 
 /*
 	Outline to give <pre> elements when they're
@@ -100,7 +100,7 @@ $summary-focus-outline: 0.1rem dashed $link-fg;
 	This is used when we've got a preformatted
 	code block with a scroll bar inside of it.
 */
-$pre-focus-outline: 0.1rem dashed $link-fg;
+$pre-focus-outline: 0.25rem dashed $link-fg;
 
 /******************************************
 ***** SECTION 2: BASIC GLOBAL STYLING *****
@@ -122,7 +122,7 @@ body {
 
 a {
 	color: $link-fg;
-	&:focus {
+	&:focus-visible {
 		outline: $link-focus-outline;
 	}
 }
@@ -182,12 +182,12 @@ main {
 		background: $button-hover-bg;
 	}
 
-	&:focus {
+	&:focus-visible {
 		outline: $button-focus-outline;
 	}
 }
 
-summary:focus {
+summary:focus-visible {
 	outline: $summary-focus-outline;
 }
 
@@ -209,8 +209,8 @@ input, select, textarea, .input {
 		border-color: $input-focus-border;
 	}
 
-	&[type=checkbox]:focus,
-	&[type=radio]:focus {
+	&[type=checkbox]:focus-visible,
+	&[type=radio]:focus-visible {
 		outline: $input-clickable-focus-outline;
 	}
 

web/source/css/status.css

@@ -299,6 +299,14 @@
 
 		position: absolute;
 		z-index: 0;
+
+		&:focus-visible {
+			/*
+				Inset focus to compensate for themes where
+				statuses have a really thick border.
+			*/
+			outline-offset: -0.25rem;
+		}
 	}
 
 	&:first-child {

web/source/frontend/index.js

@@ -144,11 +144,12 @@ lightbox.on('uiRegister', function() {
 			el.setAttribute('rel', 'noopener');
 			pswp.on('change', () => {
 				switch (true) {
-					case pswp.currSlide.data.parentStatus:
+					case pswp.currSlide.data.parentStatus !== undefined:
 						// Link to parent status.
 						el.href = pswp.currSlide.data.parentStatus;
 						break;
-					case pswp.currSlide.data.element && pswp.currSlide.data.element.dataset.pswpParentStatus:
+					case pswp.currSlide.data.element !== undefined &&
+						pswp.currSlide.data.element.dataset.pswpParentStatus !== undefined:
 						// Link to parent status.
 						el.href = pswp.currSlide.data.element.dataset.pswpParentStatus;
 						break;

web/source/settings/style.css

@@ -575,7 +575,7 @@ form {
 		width: fit-content;
 		display: flex;
 		flex-direction: column;
-		&:focus {
+		&:focus-visible {
 			outline: 0.15rem dashed $button-focus-border;
 			outline-offset: -0.15rem;
 		}
@@ -1331,7 +1331,7 @@ button.tab-button {
 .pseudolink {
 	cursor: pointer;
 	text-decoration: none;
-	&:focus {
+	&:focus-visible {
 		outline: 0.15rem dotted $button-focus-border;
 	}
 }