Is your feature request related to a problem? Please describe.
The /customize page theme selector tiles and custom color controls currently rely heavily on mouse click interactions. Keyboard users and screen reader users (Tab, Enter, Space, Arrow keys) cannot smoothly select themes or receive live announcements when selecting theme presets.
Describe the solution you'd like
Enhance customizer components (app/customize/ and components/customizer/) with WCAG 2.1 AA compliant accessibility:
- Add
tabIndex={0}, role="radiogroup", and role="radio" attributes to theme tiles.
- Add
aria-checked and live region announcements (aria-live="polite") when a theme preset is applied.
- Support arrow key navigation (
ArrowLeft / ArrowRight) to cycle through available themes.
- Ensure visible focus indicators (
focus-visible:ring-2) on all interactive buttons and pickers.
Describe alternatives you've considered
- Relying on native browser defaults (does not style custom theme tiles or provide screen reader feedback on color changes).
Is your feature request related to a problem? Please describe.
The
/customizepage theme selector tiles and custom color controls currently rely heavily on mouse click interactions. Keyboard users and screen reader users (Tab,Enter,Space,Arrowkeys) cannot smoothly select themes or receive live announcements when selecting theme presets.Describe the solution you'd like
Enhance customizer components (
app/customize/andcomponents/customizer/) with WCAG 2.1 AA compliant accessibility:tabIndex={0},role="radiogroup", androle="radio"attributes to theme tiles.aria-checkedand live region announcements (aria-live="polite") when a theme preset is applied.ArrowLeft/ArrowRight) to cycle through available themes.focus-visible:ring-2) on all interactive buttons and pickers.Describe alternatives you've considered