From 19cfa8d126a2ff54298150529e58e5e4f5495f09 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Wed, 9 Apr 2025 14:14:20 +0200
Subject: [bugfix] Fix a couple accessibility issues with `:focus` elements
 (#3979)

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

* fix little error

* tweaks
---
 web/source/css/base.css | 54 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

(limited to 'web/source/css/base.css')

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.,
 		
-- 
cgit v1.2.3