/* ========================================================================== A11Y-3 — third accessibility pass (WCAG 2.1 AA), 18 Sep 2026. Report: SITE-AUDIT/A11Y-3.md Every value below was computed from the COMPUTED styles of the live pages (contrast ratios measured in the browser, not estimated), and every rule is the smallest change that clears the threshold, so the lululemon-style look is kept. Nothing here changes size, spacing, layout or copy. This file loads early in the alphabetical area order (fix-a11y3.css), so the few rules that must win over a later area file carry !important and are scoped as tightly as the failure allows. 1. Text contrast fixes (1.4.3, >= 4.5:1 body text) 2. UI border contrast fixes (1.4.11, >= 3:1) 3. Focus visibility insurance (2.4.7) 4. Hardening for the states the JS toggles (2.4.3) ========================================================================== */ /* -------------------------------------------------------------------------- 1. TEXT CONTRAST -------------------------------------------------------------------------- */ /* 1a. Mobile drawer tab titles ("Categories" / "Menu"). Measured: #909090 on #F5F5F5 = 2.92:1 at 13px/900 — fails 4.5:1. #5A5A5A on #F5F5F5 = 5.80:1. The active tab keeps its own darker colour. */ .yb .mobile-nav .wd-nav-mob-tab > li > a, .yb .mobile-nav .wd-nav-mob-tab > li > a .nav-link-text, .mobile-nav .wd-nav-mob-tab > li > a, .mobile-nav .wd-nav-mob-tab > li > a .nav-link-text { color: #5a5a5a !important; } .yb .mobile-nav .wd-nav-mob-tab > li.wd-active > a, .yb .mobile-nav .wd-nav-mob-tab > li.wd-active > a .nav-link-text, .mobile-nav .wd-nav-mob-tab > li.wd-active > a, .mobile-nav .wd-nav-mob-tab > li.wd-active > a .nav-link-text { color: #111 !important; } /* 1b. Search-results tabs, the inactive ones. Measured: #767676 on #F9F9F9 = 4.31:1 at 16px/600 — fails 4.5:1. #5f5f5f on #F9F9F9 = 5.56:1. `.is-active` stays #111. */ .yb a.yb-search-tabs__tab:not(.is-active), a.yb-search-tabs__tab:not(.is-active) { color: #5f5f5f !important; } /* 1c. Checkout order-summary line prices. Measured: #777 on #F5F5F5 = 4.11:1 at 15px — fails 4.5:1. #595959 on #F5F5F5 = 5.80:1. Only the review table; the page's other prices already pass. */ .woocommerce-checkout-review-order-table td.product-total, .woocommerce-checkout-review-order-table td.product-total .woocommerce-Price-amount, .woocommerce-checkout-review-order-table td.product-total .woocommerce-Price-currencySymbol, .woocommerce-checkout-review-order-table td.product-total bdi { color: #595959 !important; } /* -------------------------------------------------------------------------- 2. UI BORDER CONTRAST (1.4.11 — the border IS the only boundary of these controls, so it has to reach 3:1 against the surface behind it) -------------------------------------------------------------------------- */ /* 2a. Product-page size/colour swatches. Measured: #949494 on the #F9F9F9 panel = 2.88:1 (it clears 3:1 on pure white only). #8A8A8A = 3.25:1 on #F9F9F9 and 3.54:1 on #FFF. */ .yb .wd-swatch.wd-text, .yb .wd-swatch.wd-bg, .wd-swatches-product .wd-swatch.wd-text, .wd-swatches-product .wd-swatch.wd-bg { border-color: #8a8a8a !important; } /* 2b. Layered-nav (sidebar filter) swatches on shop, category and search. Measured: #C8C8C8 on #FFF = 1.67:1. */ .wd-swatches-filter .wd-swatch, .wd-widget .wd-swatch.wd-text, .wd-widget .wd-swatch.wd-bg, .widget-area .wd-swatch.wd-text, .widget-area .wd-swatch.wd-bg { border-color: #8a8a8a !important; } /* The selected / active state must stay clearly stronger than the resting one. */ .yb .wd-swatch.wd-active, .wd-swatches-filter .wd-swatch-wrap.wd-active .wd-swatch, .wd-swatches-filter li.chosen .wd-swatch { border-color: #111 !important; } /* -------------------------------------------------------------------------- 3. FOCUS VISIBILITY (2.4.7) -------------------------------------------------------------------------- */ /* 3a. Skip link: insurance that the on-focus position always wins, whatever a later area file declares for `.yb-a9-skip`. The link itself is created by inc/areas/fix-a9-a11y.php, or by fix-a11y3.js when that output is missing. */ .yb-a9-skip:focus, .yb-a9-skip:focus-visible { top: 8px !important; outline: 2px solid #fff !important; outline-offset: -4px !important; } /* 3b. Anything this pass makes focusable (drawer panels, dialogs, error panels) is a scroll target, not a control: no ring, but never a silent focus loss either — the browser still scrolls it into view and announces it. */ [data-yb-a11y3-target]:focus { outline: none; } /* 3c. Last-resort ring for controls that a plugin may add later with their own `outline: none`. Only applies when the element has no other focus styling of its own, because `:focus-visible` is matched on the element itself. */ .yb a:focus-visible, .yb button:focus-visible, .yb [role="button"]:focus-visible, .yb input:focus-visible, .yb select:focus-visible, .yb textarea:focus-visible, .yb summary:focus-visible { outline: 2px solid #111; outline-offset: 2px; } /* Dark surfaces (footer, mega panel) need the light ring instead. */ .yb .footer-container a:focus-visible, .yb .footer-container button:focus-visible, .yb .color-scheme-dark a:focus-visible, .yb .color-scheme-dark button:focus-visible { outline-color: #fff; } /* -------------------------------------------------------------------------- 4. CLOSED OFF-CANVAS PANELS (2.4.3) fix-a11y3.js marks a panel that is closed but still on the page with data-yb-a11y3-closed="1" and takes its contents out of the Tab order with tabindex="-1". Nothing visual is attached to that attribute on purpose: hiding or disabling the panel from CSS would fight the theme's own open/close animation. The attribute is a debugging hook only. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 5. prefers-reduced-motion — the global reset lives in fix-a9-a11y.css and is scoped to `.yb`. Checkout renders a stripped body, so repeat it unscoped for the few pieces this pass touches. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .yb-a9-skip, .cart-widget-side, .mobile-nav, .yb-mnav__panel, .yb-mnav__level, .yb-mnav__overlay { transition: none !important; animation: none !important; } }