/* PopShop™ — ps-accessibility.css Shared accessibility utilities: focus indicators, reduced-motion, sr-only. PASS 12 Stage 12L (PS-4013L) | 2026-07-31 Load: , after motion.css */ /* ── Screen-reader only ───────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only-focusable:focus, .sr-only-focusable:active { position: static; width: auto; height: auto; padding: inherit; margin: inherit; overflow: visible; clip: auto; white-space: normal; } /* ── Focus Indicators ─────────────────────────────────────────────────────── */ /* Visible, high-contrast focus ring for keyboard users */ :focus-visible { outline: 2px solid var(--ps-primary, #00E6C3); outline-offset: 2px; border-radius: 4px; } /* Remove focus ring for mouse users (handled by :focus-visible) */ :focus:not(:focus-visible) { outline: none; } /* High-contrast focus for buttons */ button:focus-visible, [role="button"]:focus-visible, a:focus-visible { outline: 2.5px solid var(--ps-primary, #00E6C3); outline-offset: 3px; } /* Modal close button — always tabbable */ .modal-close:focus-visible { outline: 2px solid var(--ps-primary, #00E6C3); border-radius: 6px; } /* ── Touch Targets ────────────────────────────────────────────────────────── */ /* Minimum 44×44px touch target for interactive controls */ button, [role="button"], [type="checkbox"], [type="radio"], a, select { min-height: 44px; min-width: 44px; } /* Exceptions: icon buttons that use padding to reach 44px */ .ps-icon-btn, .modal-close, .lz-ai-mic-btn { min-height: 44px; min-width: 44px; } /* ── Disabled Controls ───────────────────────────────────────────────────── */ /* Disabled must be legible (WCAG 1.4.3 applies to all text including disabled) */ [disabled], [aria-disabled="true"] { opacity: .45; cursor: not-allowed; } /* Ensure disabled text is still readable */ button[disabled], input[disabled], select[disabled], textarea[disabled] { color: var(--ps-text-muted, #888); } /* ── Reduced Motion ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* Disable all animations and transitions */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Allow opacity transitions (these don't cause motion sickness) */ .modal-overlay, .modal-overlay.closing { animation-duration: 0.01ms !important; } /* Disable scroll animations */ html { scroll-behavior: auto !important; } } /* ── Modal Dialog Roles ──────────────────────────────────────────────────── */ /* Ensure modals expose correct ARIA role */ .modal-overlay .modal-card { /* role="dialog" and aria-modal="true" must be set in JS */ /* This CSS class serves as a reminder */ } /* ── Form Error Announcements ────────────────────────────────────────────── */ .ps-field-error { color: #ef4444; font-size: 12px; margin-top: 4px; display: block; } .ps-field-error:not(:empty)::before { content: '⚠ '; } /* ── Skip Link ────────────────────────────────────────────────────────────── */ .ps-skip-link { position: fixed; top: -100%; left: 16px; z-index: 9999; padding: 10px 16px; border-radius: 8px; background: var(--ps-primary, #00E6C3); color: #000; font-weight: 700; font-size: 13px; text-decoration: none; transition: top .15s; } .ps-skip-link:focus { top: 16px; } /* ── High Contrast Borders ───────────────────────────────────────────────── */ @media (forced-colors: active) { button, input, select, textarea { border: 2px solid ButtonText; } } /* ── Pointer size for coarse input (touch) ───────────────────────────────── */ @media (pointer: coarse) { /* Expand tap areas for touch devices */ .ps-header-overflow-btn, .modal-close, .lz-ai-mic-btn { padding: 10px; } }