/* ========================================================================== Accessibility — the keyboard focus guarantee. WHAT THIS FIXES, AND WHY IT IS ONE FILE INSTEAD OF ELEVEN PATCHES ---------------------------------------------------------------- An audit of the storefront found eleven `outline: none` declarations. One was a genuine bug (a base-state removal on the mobile submenu toggle, fixed at source in header.css). One was already correct — wishlist.css cancels `:focus` and restores a real ring on `:focus-visible`, which is exactly the right pattern. The other nine were the same design decision repeated: indicate focus by changing a 1px border colour. That looks deliberate and reads well with a mouse, and it FAILS for a keyboard user. WCAG 2.4.11 (Focus Appearance, AA in WCAG 2.2) asks the indicator to have at least 3:1 contrast against the adjacent colours and to cover a minimum area; a 1px border shifting from #d8d3c9 to #141210 on an ivory field does neither reliably, and on the burgundy theme the accent-on-dark version is fainter still. Patching nine rules individually would have produced nine slightly different rings and no guarantee about the tenth one somebody adds next month. So the ring is declared ONCE, here, and this file is enqueued LAST. ⚠️ WHY `!important`, WHICH IS NORMALLY THE WRONG ANSWER ------------------------------------------------------ Four independent sources inject CSS into this page after us: Astra, Elementor, WooCommerce and CartFlows. Several of them ship their own `outline: none`, at higher specificity than any selector a child theme can reasonably write, and they change on update. A focus indicator that the next plugin release can silently delete is not a fix — it is the same bug with a longer fuse, and it fails silently for the only users who depend on it. So `!important` is used, and only: - on ONE property (`outline` plus its offset), - in ONE state (`:focus-visible`, i.e. keyboard/AT only — mouse users see the designed look), - in ONE file that no other rule in this theme needs to override. That is the narrowest form of the guarantee. Anything less specific is a rule that works until it doesn't, with nobody watching. ⚠️ `:focus-visible`, NOT `:focus` --------------------------------- Using `:focus` would put a heavy ring on every mouse click, which is what drove the original `outline: none` declarations in the first place. `:focus-visible` is the browser's own answer to "did this focus arrive from a keyboard" and it is what makes the accessible version and the designed version able to coexist instead of trading places. ========================================================================== */ :root { /* One token, so the ring is the same everywhere and can be themed per store. The colour is the brand agate rather than the browser blue; the DOUBLE ring (dark core + light halo) is what keeps it visible on both the ivory storefront and the obsidian panels, where a single colour always loses against one of them. */ --yz-focus-ring: var(--yz-agate, #8c2f24); --yz-focus-halo: var(--yz-ivory, #f5f1e9); --yz-focus-width: 3px; --yz-focus-offset: 2px; } /* -------------------------------------------------------------------------- The guarantee. Element selectors are listed explicitly rather than wrapped in `:where()`, because `:where()` contributes ZERO specificity — every existing `.yazan input:focus { outline: none }` would beat it, which would make this file look like a fix while changing nothing. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, details:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, [role="link"]:focus-visible, [role="tab"]:focus-visible, [role="menuitem"]:focus-visible, [contenteditable="true"]:focus-visible { outline: var(--yz-focus-width) solid var(--yz-focus-ring) !important; outline-offset: var(--yz-focus-offset) !important; /* The halo. Not `!important`: if a component has a considered reason to drop the outer glow it may, and the ring itself still stands. */ box-shadow: 0 0 0 calc(var(--yz-focus-width) + var(--yz-focus-offset)) var(--yz-focus-halo); } /* On dark surfaces the agate ring loses contrast against the background, so the two layers swap: the light halo becomes the ring and the dark colour becomes the backing. Same visual weight, inverted, rather than a second ring nobody tuned. */ .yz-verify-form :focus-visible, .yz-signin__card :focus-visible, [data-yz-surface="dark"] :focus-visible, body.woocommerce-account .woocommerce-MyAccount-navigation :focus-visible, html[data-yz-theme="burgundy"] .yz-footer :focus-visible { outline-color: var(--yz-focus-halo) !important; box-shadow: 0 0 0 calc(var(--yz-focus-width) + var(--yz-focus-offset)) rgba(20, 18, 16, 0.85); } /* -------------------------------------------------------------------------- Composite controls. Where the focusable element is visually inside a wrapper that draws the border — the price range filter is the case here — ringing the bare puts the indicator inside the box and clips it. The wrapper takes the ring instead, via :focus-within. -------------------------------------------------------------------------- */ .yazan .yz-price__field:focus-within { outline: var(--yz-focus-width) solid var(--yz-focus-ring); outline-offset: var(--yz-focus-offset); } /* …and the inner input then must NOT also ring, or the two overlap into a smear. */ .yazan .yz-price__field input:focus-visible { outline: none !important; box-shadow: none; } /* -------------------------------------------------------------------------- Skip link — WCAG 2.4.1 (Bypass Blocks). ⚠️ NO LINK IS ADDED HERE, DELIBERATELY. Verified against the rendered page rather than assumed: Astra emits `