[bugfix] Fix a couple accessibility issues with `:focus` elements (#3979)

* [bugfix/frontend] Fix accessibility/focus issues in settings + web ui

* fix little error

* tweaks

5 files changed, 115 insertions, 0 deletions

diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css
index f8fb979a1..77f562df4 100644
--- a/web/source/css/_colors.css
+++ b/web/source/css/_colors.css
@@ -80,6 +80,7 @@ $profile-bg: $gray4;
 $button-bg: $blue2;
 $button-fg: $gray1;
 $button-hover-bg: $blue3;
+$button-focus-border: $blue3;
 
 $button-danger-bg: $error3;
 $button-danger-fg: $white1;
diff --git a/web/source/css/_media-wrapper.css b/web/source/css/_media-wrapper.css
index a567cb0fd..55ad6eba0 100644
--- a/web/source/css/_media-wrapper.css
+++ b/web/source/css/_media-wrapper.css
@@ -74,6 +74,14 @@
 			div.blurhash-container > canvas {
 				display: none;
 			}
+
+			/*
+				Hide focus outline on click
+				to avoid ugly artifacts.
+			*/
+			&:focus {
+				outline: none;
+			}
 		}
 
 		summary {
@@ -109,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 {
@@ -126,6 +144,21 @@
 			}
 		}
 
+		a.photoswipe-slide {
+			display: inline-block;
+			height: 100%;
+			width: 100%;
+
+			/*
+				Inset outline to avoid outline
+				being hidden by overflow: hidden.
+			*/
+			&:focus-visible {
+				outline: $button-focus-outline;
+				outline-offset: -0.25rem;
+			}
+		}
+
 		video.plyr-video, .plyr {
 			position: absolute;
 			height: 100%;
diff --git a/web/source/css/_profile-header.css b/web/source/css/_profile-header.css
index b4ebadf8d..cba67ffa1 100644
--- a/web/source/css/_profile-header.css
+++ b/web/source/css/_profile-header.css
@@ -81,6 +81,25 @@
 			height: $avatar-size;
 			width: $avatar-size;
 
+			/*
+				Link to open media in slide
+				should fill entire media wrapper.
+			*/
+			a.photoswipe-slide {
+				display: inline-block;
+				height: 100%;
+				width: 100%;
+	
+				/*
+					Offset to avoid clashing with
+					thick border around avatars.
+				*/
+				&:focus-visible {
+					outline: $button-focus-outline;
+					outline-offset: 0.25rem;
+				}
+			}
+
 			.avatar {
 				/*
 					Fit 100% of the wrapper.
diff --git a/web/source/css/base.css b/web/source/css/base.css
index 765453ac2..6a5a6dd36 100644
--- a/web/source/css/base.css
+++ b/web/source/css/base.css
@@ -68,6 +68,40 @@ $br-inner: 0.2rem;
 */
 $fa-fw: 1.28571429em;
 
+/*
+	Outline to give links when they're
+	focused (ie., by clicking or tabbing to them).
+*/
+$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.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.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.25rem dotted $link-fg;
+
+/*
+	Outline to give <pre> elements when they're
+	focused (ie., by clicking or tabbing to them).
+
+	This is used when we've got a preformatted
+	code block with a scroll bar inside of it.
+*/
+$pre-focus-outline: 0.25rem dashed $link-fg;
+
 /******************************************
 ***** SECTION 2: BASIC GLOBAL STYLING *****
 *******************************************/
@@ -88,6 +122,9 @@ body {
 
 a {
 	color: $link-fg;
+	&:focus-visible {
+		outline: $link-focus-outline;
+	}
 }
 
 /*
@@ -144,6 +181,14 @@ main {
 	&:hover {
 		background: $button-hover-bg;
 	}
+
+	&:focus-visible {
+		outline: $button-focus-outline;
+	}
+}
+
+summary:focus-visible {
+	outline: $summary-focus-outline;
 }
 
 /*
@@ -164,6 +209,11 @@ input, select, textarea, .input {
 		border-color: $input-focus-border;
 	}
 
+	&[type=checkbox]:focus-visible,
+	&[type=radio]:focus-visible {
+		outline: $input-clickable-focus-outline;
+	}
+
 	&:invalid, .invalid & {
 		border-color: $input-error-border;
 	}
@@ -342,6 +392,10 @@ pre, pre[class*="language-"] {
 	white-space: pre;
 	overflow-x: auto;
 
+	&:focus {
+		outline: $pre-focus-outline;
+	}
+
 	/* 
 		Code inside a pre block, ie.,
 		
diff --git a/web/source/css/status.css b/web/source/css/status.css
index ec6cac3e5..6f2c458f4 100644
--- a/web/source/css/status.css
+++ b/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 {