improve focus indicators: orange in dark mode, broader coverage, fix width

- Change dark-mode --focus-outline from #6ea8fe to #ff4e00 (kbccorange)
- Replace enumerated focus selectors with broad rule covering all a, button,
  input, select, and [tabindex] elements with !important
- Add display:block to a.ga-by-jumbotron to prevent width shrinking on focus

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mark Eaton
2026-02-22 22:22:23 -05:00
co-authored by Claude Opus 4.6
parent 6c817c1948
commit 6a02ce8fe7
+20 -24
View File
@@ -15,7 +15,7 @@
--bg: #1a1a2e; --bg: #1a1a2e;
--bg-surface: #25253e; --bg-surface: #25253e;
--hover-dark: #555; --hover-dark: #555;
--focus-outline: #6ea8fe; --focus-outline: #ff4e00;
--link-color: #ccc; --link-color: #ccc;
} }
@@ -138,31 +138,27 @@
color: white; color: white;
} }
/* Accessible focus indicators for primary navigation elements */ /* Ensure jumbotron links fill full width (prevents shrinking on focus) */
#hamburger:focus, a.ga-by-jumbotron {
#hamburger:focus-visible, display: block;
#login-div:focus,
#login-div:focus-visible,
.searchmenu:focus,
.searchmenu:focus-visible,
.nav-jumbotron-link:focus,
.nav-jumbotron-link:focus-visible,
.ga-by-jumbotron:focus,
.ga-by-jumbotron:focus-visible,
.ga-library-links:focus,
.ga-library-links:focus-visible,
/* OneSearch widget (central search form) */
.onesearch-jumbotron input:focus,
.onesearch-jumbotron input:focus-visible,
.onesearch-jumbotron button:focus,
.onesearch-jumbotron button:focus-visible,
/* Navigation dropdown toggles */
.dropdown-toggle:focus,
.dropdown-toggle:focus-visible {
outline: 3px solid var(--focus-outline); /* high-contrast blue */
outline-offset: 2px;
} }
/* Accessible focus indicators for all interactive elements */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
outline: 3px solid var(--focus-outline) !important;
outline-offset: 2px !important;
}
/* style alert */ /* style alert */
#hours-content-container { /* this id comes from the components libguide */ #hours-content-container { /* this id comes from the components libguide */
background-color: var(--kbccblue); background-color: var(--kbccblue);