Skip to content

feat: add keyboard navigation and ARIA accessibility to customizer controls #8244

Description

@nishtha-agarwal-211

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:

  1. Add tabIndex={0}, role="radiogroup", and role="radio" attributes to theme tiles.
  2. Add aria-checked and live region announcements (aria-live="polite") when a theme preset is applied.
  3. Support arrow key navigation (ArrowLeft / ArrowRight) to cycle through available themes.
  4. 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).

Metadata

Metadata

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions