/* ========================================================================== HAYAITI / a11y.css [agent-9] The accessibility enforcement layer. Loaded LAST, after pages.css, so it can correct things the component and page layers get wrong without any of those files needing to know it exists. WHY THIS FILE EXISTS AND WHAT IT IS NOT This is not a dumping ground. Everything in here is a WCAG 2.2 AA defect measured by `node _tools/a11y.js`, with the exact rule cited, and every entry names the file and selector where the real fix belongs. When an owner lands the real fix, delete the block here. A rule with no citation does not go in. ORDER OF PREFERENCE, ALWAYS 1. base.css the fix belongs at the element or token layer 2. the owning file components.css / pages.css / search.css / a view 3. this file only when 1 and 2 are somebody else's to land Most of the palette work is NOT here. It is a token retune in base.css section 0, which every consumer inherits for free. See A11Y.md. LOADING views/layout.js must append '/css/a11y.css' to cssLinks AFTER pages.css. Until that lands this file is inert. Tracked in _handoff/agent-9.md as the one blocking request. ========================================================================== */ /* ========================================================================== 1. FOCUS VISIBILITY WCAG 2.4.7, 2.4.11 base.css already ships the ring at the element layer and a (0,2,1) specificity guard that beats any single-class :focus rule. Two rules still win on source order because they are single-class AND later in the cascade, and both sit on the purchase path: components.css:1194 .searchbox__input:focus { outline: none; } pages.css .qty__input (never gains a ring at all) Measured before this file: focusing the header search field with Tab produced outline-style:none, box-shadow:none and an unchanged border in every one of 11 desktop page-runs. There was no visible focus indicator on the primary product-finding control of the entire site. REAL FIX: delete `outline: none` from .searchbox__input:focus and let :focus-visible do its job. Filed in _handoff/agent-9.md. ========================================================================== */ .searchbox__input:focus-visible, .qty__input:focus-visible, .field__input:focus-visible { outline: var(--ring-w) solid var(--focus) !important; outline-offset: var(--ring-off); } /* Nothing may blank a focus ring without replacing it. This catches any future `outline: none` on a keyboard-reachable control. It is deliberately last-resort and deliberately loud. */ :is(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="link"], [role="menuitem"], [role="tab"], [role="option"]):focus-visible { outline-style: solid; outline-width: max(var(--ring-w), 2px); outline-color: var(--focus); } /* Windows High Contrast / forced-colors: the system picks the ring colour and our tokens are ignored, so say so explicitly rather than losing the ring. */ @media (forced-colors: active) { :focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; } .btn, .field__input, .searchbox__input, .pill, .card__link { forced-color-adjust: auto; } } /* ========================================================================== 2. NON-TEXT CONTRAST WCAG 1.4.11 A field's border is the only thing that says "this is a field", so it is "visual information required to identify a user interface component" and needs 3:1, not the 1.31:1 that --line (#e4e1db) gives on white. base.css section 0 solves this for every input, select and textarea by redefining --line ON the control itself, which is inherited by whatever border rule a later file writes. These two are the leftovers: elements that look like fields but are not form controls, so the token scoping in base.css does not reach them. ========================================================================== */ .qty, .pdp-qty, .pill, .plp-quick__link, .hm-tag, .pdp-gal__thumb, .pdp-swatch__media, .facet__more, .plp-rail__panel .btn--ghost { border-color: var(--line-field); } /* A stepper reads as one control, so its internal divider has to survive too. */ .qty__btn, .pdp-qty__btn { border-color: var(--line-field); } /* ========================================================================== 3. TEXT CONTRAST LEFTOVERS WCAG 1.4.3 --fg-muted and --fg-subtle are retuned in base.css and that clears the overwhelming majority. What is left is text that hardcodes a colour or inherits one from a background this file cannot predict. .toast--success is the one regression the base.css retune creates and it is fixed here rather than left for someone to find: components.css:1610 .toast--success { background: var(--success); color: var(--fg); } With --success at its old #26c653 that was black on light green, 9.3:1. With --success moved to #177a32 so it passes as TEXT (5.4:1 on white, it was 2.26:1 and failing badly on .newsletter__status.is-ok and .pdp-note.is-ok) the same black-on-green drops to 3.9:1 and fails. White on #177a32 is 5.43:1, so the toast flips to the inverse foreground. REAL FIX: components.css should use --fg-inverse there. Filed. ========================================================================== */ .toast--success { color: var(--fg-inverse); } /* ========================================================================== 4. DISABLED AND INACTIVE WCAG 1.4.3 exception 1.4.3 exempts "text or images of text that are part of an inactive user interface component". base.css keeps the old light grey as --fg-disabled and re-points --fg-subtle at it for anything genuinely disabled, so a disabled control still LOOKS disabled after the contrast retune. base.css covers :disabled and [aria-disabled]. These are the class-only disabled states that no element-level selector can reach. ========================================================================== */ .is-disabled, .pager__step.is-disabled, .pager__gap, .facet__row:has(input:disabled), .qty__btn:disabled, .pdp-qty__btn:disabled { --fg-subtle: var(--fg-disabled); --fg-muted: var(--fg-disabled); } /* ========================================================================== 5. TARGET SIZE WCAG 2.5.8, 2.5.5 2.5.8 asks for 24x24 CSS px, with a spacing exception when a 24px circle centred on the target touches nothing else. _tools/a11y.js implements that exception, so what is flagged here genuinely fails it. These are all single-line text links whose box is 15 to 23px tall because nothing sets a height on them. `inline-flex` + `min-height: 24px` is a REAL geometry change, not a pseudo-element overlay: an overlay would satisfy a finger but leave every measuring tool, including _tools/a11y.js and axe, correctly reporting the box as too small. If the number does not move, the fix is not a fix. The vertical growth is 1 to 9px on elements that are already on their own line, so nothing reflows. Anything where 24px WOULD reflow is filed for its owner instead of being forced here. ========================================================================== */ .sechead__link, .cartpage__continue-link, .cart-line__remove, .crumbs__link, .plp-pills__clear, .facet__more, .fcol__link, .logo { display: inline-flex; align-items: center; min-height: 24px; } /* ========================================================================== 6. LIVE REGIONS WCAG 4.1.3 A live region has to be IN the document before the message is written into it. A region that is created and populated in the same tick is silent in NVDA and JAWS, which is exactly what public/js/app.js does with .toast-root. CSS cannot create the element, so this only guarantees that when layout.js renders an always-present toast root it stays measurable rather than being collapsed to display:none, which would make it silent for a different reason. REAL FIX filed against views/layout.js and public/js/app.js. ========================================================================== */ .toast-root:empty { position: fixed; width: 1px; height: 1px; overflow: hidden; pointer-events: none; } /* A live region must never be display:none or aria-hidden while it is the thing doing the announcing. Status paragraphs that hide themselves when empty are fine; ones that stay hidden while holding text are not. */ [aria-live]:not([hidden]), [role="status"]:not([hidden]), [role="alert"]:not([hidden]) { display: revert; } /* ========================================================================== 7. MOTION WCAG 2.3.3 base.css collapses every duration token and clamps transitions site-wide. This is the belt and braces for anything a later file animates with a hardcoded duration or an infinite keyframe, plus the two known ones. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .hm-marquee__track, .hm-marquee, [class*="marquee"] [class*="track"] { animation: none !important; transform: none !important; } .rail, .scroll-x, .plp-quick__list, .pager__list { scroll-behavior: auto !important; scroll-snap-type: none !important; } } /* ========================================================================== 8. SKIP LINK WCAG 2.4.1 components.css owns the styling. This only guarantees it cannot be permanently invisible, which is the failure mode that matters: a skip link that never becomes visible on focus is worse than none, because keyboard users land on an invisible control. ========================================================================== */ .skip-link:focus, .skip-link:focus-visible { position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 2147483647; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; opacity: 1; pointer-events: auto; } /* ========================================================================== 9. TEXT SPACING AND ZOOM WCAG 1.4.4, 1.4.12 Content must survive 200% zoom and user-applied text spacing without clipping. The failure mode is a fixed-height box around text. These are the ones that measured as clipping when line-height is pushed to 1.5. ========================================================================== */ .btn, .pill, .plp-quick__link, .facet__summary { height: auto; min-height: var(--btn-h); overflow-wrap: break-word; }