Accessibility: Missing focus rings on all link elements (WCAG 2.1 AA) #189

New Issue

Closed

opened 2026-05-29 16:45:54 -05:00 by null · 1 comment

null commented

2026-05-29 16:45:54 -05:00

Owner

Severity: Major

Description: External and internal links (<a>, <Link>) throughout the site lack visible focus indicators, making keyboard navigation impossible to track visually. This fails WCAG 2.1 AA.

Files affected:

src/components/layout/Header.jsx — desktop nav links
src/components/layout/Footer.jsx — footer links
src/components/layout/MobileNav.jsx — mobile nav links
src/pages/Home.jsx — hero CTA links, card links
All page CTA links

Fix direction: Add consistent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-cyan rounded to all interactive <a> and <Link> elements.

**Severity:** Major **Description:** External and internal links (`<a>`, `<Link>`) throughout the site lack visible focus indicators, making keyboard navigation impossible to track visually. This fails WCAG 2.1 AA. **Files affected:** - `src/components/layout/Header.jsx` — desktop nav links - `src/components/layout/Footer.jsx` — footer links - `src/components/layout/MobileNav.jsx` — mobile nav links - `src/pages/Home.jsx` — hero CTA links, card links - All page CTA links **Fix direction:** Add consistent `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-cyan rounded` to all interactive `<a>` and `<Link>` elements.

null added the

bug

accessibility

labels 2026-05-29 16:45:54 -05:00

null added this to the Batch 10 — Accessibility WCAG 2.1 AA milestone 2026-08-18 01:24:52 -05:00

null referenced this issue from a commit

2026-08-18 01:31:19 -05:00

docs: log the template adoption, with next action and blockers

null referenced this issue from a commit

2026-08-18 02:31:20 -05:00

fix(a11y): visible focus indicator, aria-expanded, and six Label-in-Name failures

null commented

2026-08-18 02:31:33 -05:00

Author

Owner

Fixed in 9fdc6b6. One global :focus-visible rule in src/index.css covering a, button, [role=button], summary, input, select, textarea — Footer and Home had zero focus styling across 17 links.

NOT the ring this issue specified. It asked for focus-visible:ring-primary-cyan; #22D3EE measures 6.26:1 on primary-navy and only 2.38:1 on white, so on a light-first design that ring fails WCAG 1.4.11 (3:1 for the indicator) across most of the site. Used a dual-tone ring instead — box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #0B2A3C — so the white layer carries the dark bands and the navy layer carries the light sections. Measured against every background in tailwind.config.js: worst case 13.62:1 on section-alt, best 17.64:1 on navy-dark.

Verified: the rule is in the built CSS (dist/assets/*.css contains 'focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 5px #0b2a3c'). NOT verified by walking the site keyboard-only in a browser — that gap is recorded in docs/qa/ClaudeQACoverage.md.

Fixed in 9fdc6b6. One global :focus-visible rule in src/index.css covering a, button, [role=button], summary, input, select, textarea — Footer and Home had zero focus styling across 17 links. NOT the ring this issue specified. It asked for focus-visible:ring-primary-cyan; #22D3EE measures 6.26:1 on primary-navy and only 2.38:1 on white, so on a light-first design that ring fails WCAG 1.4.11 (3:1 for the indicator) across most of the site. Used a dual-tone ring instead — box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #0B2A3C — so the white layer carries the dark bands and the navy layer carries the light sections. Measured against every background in tailwind.config.js: worst case 13.62:1 on section-alt, best 17.64:1 on navy-dark. Verified: the rule is in the built CSS (dist/assets/*.css contains 'focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 5px #0b2a3c'). NOT verified by walking the site keyboard-only in a browser — that gap is recorded in docs/qa/ClaudeQACoverage.md.

null closed this issue

2026-08-18 02:31:33 -05:00