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:
co-authored by
Claude Opus 4.6
parent
6c817c1948
commit
6a02ce8fe7
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user