Accessibility audit: LanguageSwitcher and LocalePicker #94

Accessibility audit: LanguageSwitcher and LocalePicker

The language switchers and the locale picker are often the first thing someone using a keyboard or a screen reader touches to make a site usable in their language. They should work flawlessly without a mouse.

Scope

• src/registry/components/language-switcher.tsx
• src/registry/components/language-switcher-pill.tsx
• src/registry/components/locale-picker.tsx
• The shared use-listbox-navigation hook

What to check

• Keyboard: open/close with Enter, Space and Escape; arrow keys, Home/End and type-ahead in the list; focus returns to the trigger on close; nothing traps focus
• Screen readers (VoiceOver and NVDA if you can): the trigger announces the current language and that it opens a list; options announce their name, and the selected one is marked; search results changes are announced
• ARIA: correct roles and states for the pattern used (combobox / listbox / option, aria-expanded, aria-activedescendant or roving focus, aria-selected)
• Language names: each option has a lang attribute matching its locale, so screen readers pronounce "Deutsch" in German
• Visuals: visible focus ring in light and dark themes; text contrast meets WCAG 2.2 AA

Deliverables

• A short report as a comment on this issue: what works, what doesn't, with steps to reproduce
• Fixes in one or more PRs (small focused PRs are easier to review)
• Automated checks in test/: keyboard interaction tests, and an axe check (for example with vitest-axe) for each component
• Note any limitations in each component's docs page

Good for contributors who know accessibility well, even without building a component from scratch.

See CONTRIBUTING.md.