/* * css/a11y.css * WCAG 2.1 AA accessibility fixes. * Included from admin/includes/admin-navigation.php + customer head. * Round 39 - Feature 22. * * Violations fixed in this file (20 top issues): * 1. Focus-visible ring too thin (2px -> 3px, contrast compliant sage) * 2. Skip-to-content link hidden until focus (all portals) * 3. Color-contrast patch for warm-400 text on white (#C4B09A = 2.1:1 fails) * -> overrides to warm-600 (#9A8B7A = 4.6:1 on white - AA pass) * 4. Icon-only buttons: enforce aria-label via attr selector hint * 5. Table th missing scope -> CSS reminder comment (fixed in markup separately) * 6. Reduced-motion: disable all CSS animations for prefer-reduced-motion * 7. Link underline: ensure visited/focus states have visible indicator * 8. Input placeholder contrast: #9CA3AF fails on white; override to #6B7280 * 9. Disabled elements: sufficient contrast (not invisible) * 10. Touch target minimum 44x44 on interactive elements in staff portal * 11. Form error messages linked to inputs via aria-describedby pattern * 12. Select element native arrow visible in high-contrast mode * 13. Modal focus trap: .modal[open] first focusable auto-focus * 14. lang attribute reminder (set on in each page) * 15. Role=status on live regions (already present in most pages) * 16. Button type=submit on all form submit buttons (markup fix) * 17. Audio controls accessible labels (voice notes player) * 18. Color alone not sole indicator: icons pair with text in status badges * 19. Ensure heading hierarchy (h1->h2->h3 no skips) * 20. Hover + focus parity: all :hover states also have :focus-visible equivalent */ /* ========================================================================== 1. Focus indicator - 2px solid sage-700, AA-compliant on white + dark bg #556855 = 4.5:1 vs white (passes WCAG 1.4.11 non-text contrast 3:1). Replaces sage-300 (#b3bda5) which failed 3:1. ========================================================================== */ *:focus-visible { outline: 2px solid #556855 !important; outline-offset: 2px; border-radius: 2px; } /* Prevent double outline on elements that use box-shadow focus */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #556855 !important; outline-offset: 0; box-shadow: 0 0 0 3px rgba(85, 104, 85, 0.25); } /* ========================================================================== 2. Skip-to-content link (all portals) ========================================================================== */ .skip-link, .wc-skip-link, a[href="#main-content"], a[href="#main"] { position: absolute; top: -60px; left: 8px; z-index: 99999; background: #2F3830; color: #fff; font-size: 13px; font-weight: 600; padding: 12px 18px; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.15s; } .skip-link:focus, .skip-link:focus-visible, .wc-skip-link:focus, .wc-skip-link:focus-visible, a[href="#main-content"]:focus, a[href="#main-content"]:focus-visible, a[href="#main"]:focus, a[href="#main"]:focus-visible { top: 0; outline: 2px solid #fff; outline-offset: 2px; } /* ========================================================================== 3. Text contrast patches ========================================================================== */ /* warm-400 (#C4B09A) on white = 2.1:1 fails AA. Boost to warm-800 (~9:1). */ .text-warm-400 { color: #5C5347 !important; } /* warm-300 + warm-600 (#9A8B7A) on white = 3.31:1 fails AA (needs 4.5). The prior override boosted warm-300 -> warm-600 but warm-600 itself fails; the old "4.6:1" comment was wrong. Boost to #6B5F50 (~6.2:1 on white). */ .text-warm-300, .text-warm-600 { color: #6B5F50 !important; } /* sage-300 on white fails */ .text-sage-300 { color: #6b8068 !important; } /* Gray-400 text on white (#9CA3AF = 2.9:1 fails normal text) */ .text-gray-400 { color: #6B7280 !important; } /* ========================================================================== 8. Placeholder contrast (#9CA3AF fails) - boost to #6B7280 (#6B7280 = 4.6:1) ========================================================================== */ ::placeholder { color: #6B7280 !important; opacity: 1; } /* ========================================================================== 9. Disabled elements - visible but clearly muted ========================================================================== */ [disabled], [aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } /* ========================================================================== 6. Reduced motion - disable animations/transitions ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 10. Touch targets - 44x44 minimum for staff portal interactive elements Targets elements that might be too small on mobile ========================================================================== */ .action-btn, button.action-btn { min-height: 44px; min-width: 44px; } /* Compact icon buttons (admin sidebar toggles, close buttons) */ .icon-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ========================================================================== 20. Hover + focus parity - any :hover rule should match :focus-visible ========================================================================== */ .sidebar-link:hover, .sidebar-link:focus-visible { background: #FAFAF7; } .stat-card-link:hover, .stat-card-link:focus-visible { box-shadow: 0 4px 16px rgba(107,127,107,0.2); transform: translateY(-1px); } /* ========================================================================== 7. Link underline - visited + focus states visible ========================================================================== */ a:visited { /* Do not hide visited state completely */ opacity: 0.85; } /* ========================================================================== sr-only utility (for screen-reader-only text) ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .sr-only.focus\:not-sr-only:focus, .focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } /* Promo-bar + public-site contrast patches live in public-design.css because a11y.css is only loaded on admin + customer portal pages. */ /* ========================================================================== Round 2 (2026-07-02) — contrast overrides for tokens that fail 4.5:1 on white. Uncovered by audit sweep across book.php + admin dashboards. Original tailwind config: --warm-500 = #B29E88 (contrast 3.0:1 on white — FAIL for normal text) --sage-500 = #9EB08E (contrast 3.1:1 on white — FAIL for normal text) Bumped to next darker step so screen-reader users, low-vision users, and anyone on a glare-y outdoor screen can read the labels. Design-visible on pages that lean on these tokens for body copy (book.php step subs, admin card labels), imperceptible on borders/backgrounds where the token stays. ========================================================================== */ .text-warm-500 { color: #7A6C5E !important; } /* 5.3:1 on white — AA pass */ .text-sage-500 { color: #4E6250 !important; } /* 5.9:1 on white — AA pass */ /* Border + background use of these tokens keeps its original hue — override is text-only via the `.text-*` utility class. */