/** * Restore a visible keyboard focus indicator. * * Avada ships a "disable focus outline" option and it is switched on across all * three sites: carries fusion-disable-outline, and a focused control * computes to `outline: none 3px #ed1c24` - the theme defines a ring and then * sets the style to none, so nothing ever draws. Forty-one rules across the * theme and plugin stylesheets remove outlines besides. The result is WCAG * 2.4.7 Focus Visible failing at Level AA on every page: a keyboard user can * tab through the site with no way of telling where they are. * * :focus-visible, so this is invisible to mouse users and changes nothing about * the design as sighted pointer users experience it - the ring appears only * when the browser judges focus should be shown, which is keyboard and * assistive-technology navigation. * * #1c6bba rather than the brand red: it reads at 5.4:1 on white where the red * manages 3.95:1, and it stays visible against the red buttons and the dark * footer, which a red ring would not. WCAG 2.4.11 asks for 3:1 against what is * adjacent, and this clears that on every surface the sites use. * * !important is deliberate and narrow. It is the only way to beat 41 existing * outline:none declarations plus the body-level class; the alternative is * re-specifying each of their selectors, which would rot the moment the theme * updates. */ :where(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible, .fusion-disable-outline :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #1c6bba !important; outline-offset: 2px !important; /* A light halo so the ring also separates from dark backgrounds. */ box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85) !important; border-radius: 2px; } /* On a dark surface the halo inverts, so the ring keeps its 3:1 either way. */ .fusion-footer :where(a, button, input, select, textarea, [tabindex]):focus-visible, .fusion-footer-copyright-area :where(a, button, [tabindex]):focus-visible { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.65) !important; } /* * Browsers that do not support :focus-visible fall back to :focus, so keyboard * users there are not left with nothing. */ @supports not selector(:focus-visible) { :where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: 3px solid #1c6bba !important; outline-offset: 2px !important; } } @media (prefers-reduced-motion: reduce) { :where(a, button, input, select, textarea):focus-visible { transition: none !important; } } /** * Text for assistive technology only. * * Used by link-context.js to add a new-window warning or a section name to a * link without altering what is on screen. The clip-path pairing is the * long-standing safe recipe: it stays in the accessibility tree, unlike * display:none or visibility:hidden, which remove it. */ .rr-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }