/* =========================================================================== Authoritative focus indicator — WCAG 2.4.7 (AA) / failure technique F78 Four stylesheets (bootstrap.min.css, bootstrap-main.css, DNBD.css, photoswipe.css) suppress or obscure the browser's focus ring. bootstrap-main.css alone carries ~150 `outline: none` / `outline: 0` declarations, so overriding them one by one is not maintainable — and every future vendor upgrade would reintroduce them. Instead this file defines one indicator and is linked LAST in , after every other stylesheet, so it wins the cascade. IMPORTANT: keep this the final in _Layout.cshtml. Adding a stylesheet after it silently reopens the whole finding. =========================================================================== */ /* --------------------------------------------------------------------------- 1. Base ring — plain `:focus`. This is the fallback for browsers with no :focus-visible support (notably IE11, called out in the audit). There it is the only rule that applies, so those users get a ring on every focus, including mouse clicks. Browsers that DO support :focus-visible narrow this back to keyboard-only in section 3 below. `outline-offset` is deliberately not load-bearing: IE ignores it, so the ring would sit flush against the control. A 3px solid ring is thick enough to read as a focus indicator even with no offset at all, and the border-radius keeps it from looking broken on rounded controls. --------------------------------------------------------------------------- */ a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, area:focus, object:focus, embed:focus, iframe:focus, [tabindex]:focus, [contenteditable]:focus { outline: 3px solid #370031; outline-offset: 2px; border-radius: 2px; } /* --------------------------------------------------------------------------- 2. The real indicator — keyboard focus only. `!important` is load-bearing here, not defensive: the vendor rules this overrides set `outline: none` outright, and several are more specific than any selector we could reasonably write. A bare `:focus-visible` (specificity 0,1,0) would lose to almost all of them. --------------------------------------------------------------------------- */ :focus-visible { outline: 3px solid #370031 !important; outline-offset: 2px; border-radius: 2px; } /* --------------------------------------------------------------------------- 3. Drop the section-1 fallback ring for pointer/mouse focus. Browsers WITHOUT :focus-visible support treat this entire selector list as invalid and discard the rule, which is exactly what we want — they keep the section-1 ring. Do not merge this into another rule: one unrecognised selector would take the rest of the list down with it. --------------------------------------------------------------------------- */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), summary:focus:not(:focus-visible), area:focus:not(:focus-visible), object:focus:not(:focus-visible), embed:focus:not(:focus-visible), iframe:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible), [contenteditable]:focus:not(:focus-visible) { outline: none; } /* --------------------------------------------------------------------------- 4. Light-on-dark variant. #370031 (plum) has almost no contrast against the plum/primary-coloured surfaces, so the ring goes white there. Covers: the dark top bar, the primary-coloured footer, the mobile drawer header, the footer theme strip (each button is painted with its own theme primary colour), and the top-level desktop menu items — those paint their background with the theme hover colour while focused, so the ring must flip at the same moment the background does. --------------------------------------------------------------------------- */ .TopBar :focus-visible, .PrimaryBG :focus-visible, .PrimaryBGColor :focus-visible, .ThemeBG :focus-visible, .CombinedMobileMenu .MenuHeader :focus-visible, .DesktopMenu ul > li:focus-within > a.nav-link:focus-visible, .DesktopMenu ul > li:focus-within > .MenuDisclosure:focus-visible { outline-color: #fff !important; } /* Same surfaces, fallback path (section 1) for browsers without :focus-visible. */ .TopBar a:focus, .TopBar button:focus, .PrimaryBG a:focus, .PrimaryBG button:focus, .ThemeBG button:focus, .CombinedMobileMenu .MenuHeader button:focus { outline-color: #fff; } /* --------------------------------------------------------------------------- 5. Never let a focused control be clipped out of sight by an ancestor's overflow — a ring that is scrolled/cropped away fails 2.4.7 just as surely as one that was never drawn. --------------------------------------------------------------------------- */ :focus-visible { scroll-margin: 8px; }