From 1ec4f3307bef40c32f2d725d52d5a0b3dd5f65dc Mon Sep 17 00:00:00 2001
From: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Date: Wed, 29 Apr 2026 00:42:11 -0700
Subject: [PATCH] fix(login): add visible focus indicator for keyboard
 navigation

Resolves #2144.

The login form had no explicit :focus / :focus-visible styles, so
keyboard users could not tell which input or button was focused.
This is a WCAG 2.1 SC 2.4.7 (Focus Visible) violation.

Add focus rings to AdminLogin.scss covering:

- The MUI TextField root via :focus-within (so the wrapper rings up
  when the underlying input receives focus).
- The MUI input itself via :focus-visible (defense in depth for
  browsers that do not propagate :focus-within reliably to the
  visual root).
- The login button via :focus-visible.

The 2px solid #1976d2 ring matches the MUI primary palette already
used by the form's TextField label, with a 2px offset so the ring
sits outside the existing border. Mouse-driven focus stays unstyled
because the rules are gated on :focus-visible / :focus-within.

Resources cited in the issue:
- https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
- https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
---
 client/src/sass/AdminLogin.scss | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/client/src/sass/AdminLogin.scss b/client/src/sass/AdminLogin.scss
index 1982b506f..39b1bbe24 100644
--- a/client/src/sass/AdminLogin.scss
+++ b/client/src/sass/AdminLogin.scss
@@ -5,6 +5,24 @@
   align-items: center;
   z-index: 1;
   padding-top: 6vh;
+
+  // Visible focus indicator for keyboard navigation (WCAG 2.1 SC 2.4.7).
+  // The MUI TextField root receives focus-within when the underlying input
+  // is focused; the login button is targeted directly. Both render an
+  // outline ring so keyboard users can tell which control is focused.
+  .MuiTextField-root:focus-within,
+  .login-button:focus-visible {
+    outline: 2px solid #1976d2;
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  // Keyboard-only focus on the underlying input also lights up the ring,
+  // for browsers that do not propagate :focus-within reliably.
+  .MuiInputBase-input:focus-visible {
+    outline: 2px solid #1976d2;
+    outline-offset: 2px;
+  }
 }
 
 .adminlogin-headers {