From 364ff9375a90f4f5f719cb5a931a4c15efc090e3 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 28 Feb 2026 15:55:27 +0000 Subject: [PATCH] feat(ui): add accessibility foundations to base.html and styles.css - Add skip-to-content link for keyboard navigation (WCAG 2.4.1) - Add ARIA landmarks: nav aria-label, footer role=contentinfo - Add aria-current="page" on active nav links - Add aria-label to admin dropdown button and mobile menu toggle - Add role="menu" and role="menuitem" to admin dropdown - Add aria-hidden="true" to all decorative Font Awesome icons - Add footer nav element with aria-label for footer links - Add focus-visible outline styles for keyboard navigation (WCAG 2.4.7) - Add sr-only utility class - Add dark mode support for skip-link and focus indicators Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com> --- frontend/static/styles.css | 71 ++++++++++++++++++++++++++++++++++++ frontend/templates/base.html | 57 +++++++++++++++++------------ 2 files changed, 104 insertions(+), 24 deletions(-) diff --git a/frontend/static/styles.css b/frontend/static/styles.css index c3971d6f..f5e991ea 100644 --- a/frontend/static/styles.css +++ b/frontend/static/styles.css @@ -1,5 +1,62 @@ /* frontend/static/styles.css */ /* Example overrides or additional styling */ + +/* ============================================================= + ACCESSIBILITY + Skip-to-content link, focus indicators, and screen-reader-only + utility class following WCAG 2.1 Level AA requirements. + ============================================================= */ + +/* Skip-to-content link: visible only on keyboard focus */ +.skip-link { + position: absolute; + left: -9999px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + z-index: 9999; + padding: 0.75rem 1.5rem; + background-color: #1d4ed8; + color: #ffffff; + font-weight: 600; + text-decoration: none; + border-radius: 0 0 0.375rem 0; +} +.skip-link:focus { + position: fixed; + top: 0; + left: 0; + width: auto; + height: auto; + outline: 2px solid #2563eb; + outline-offset: 2px; +} + +/* Enhanced focus-visible indicators for keyboard navigation (WCAG 2.4.7) */ +a:focus-visible, +button:focus-visible, +input:focus-visible, +select:focus-visible, +textarea:focus-visible, +[tabindex]:focus-visible { + outline: 2px solid #2563eb; + outline-offset: 2px; +} + +/* Screen-reader-only utility (visually hidden, accessible to AT) */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + body { /* Your global overrides can go here if needed */ } @@ -159,6 +216,20 @@ html.dark code { background-color: #111827; color: #d1d5db; } html.dark #darkModeToggle { color: #fbbf24; } html.dark #darkModeToggle:hover { background-color: #374151; } +/* ---- Dark-mode skip-link ---- */ +html.dark .skip-link { background-color: #2563eb; } +html.dark .skip-link:focus { outline-color: #60a5fa; } + +/* ---- Dark-mode focus-visible indicators ---- */ +html.dark a:focus-visible, +html.dark button:focus-visible, +html.dark input:focus-visible, +html.dark select:focus-visible, +html.dark textarea:focus-visible, +html.dark [tabindex]:focus-visible { + outline-color: #60a5fa; +} + /* ---- Scrollbar (WebKit browsers) ---- */ html.dark ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark ::-webkit-scrollbar-track { background: #1f2937; } diff --git a/frontend/templates/base.html b/frontend/templates/base.html index 75dcb274..c0555bc5 100644 --- a/frontend/templates/base.html +++ b/frontend/templates/base.html @@ -34,8 +34,11 @@ + + + -