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-surface: #25253e;
--hover-dark: #555;
--focus-outline: #6ea8fe;
--focus-outline: #ff4e00;
--link-color: #ccc;
}
@@ -138,31 +138,27 @@
color: white;
}
/* Accessible focus indicators for primary navigation elements */
#hamburger:focus,
#hamburger:focus-visible,
#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;
/* Ensure jumbotron links fill full width (prevents shrinking on focus) */
a.ga-by-jumbotron {
display: block;
}
/* 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 */
#hours-content-container { /* this id comes from the components libguide */
background-color: var(--kbccblue);