Description
- set an explicit
aria-label
to the switcher (as the<span>
is not sufficient, as it can be display:none'd and then the button has no accName); also include the currently selected theme name - make the theme buttons actual
aria-pressed
toggles, so the currently active one is explicitly announced - set focus explicitly back to the dropdown toggle button after a selection is made
Motivation & Context
Make sure our docs controls are accessible. Surprised this was pushed to live in the current state.
Video (using Chrome/NVDA) showing the current state, and the fixed version with this PR applied
https://user-images.githubusercontent.com/895831/210190841-06c2ff9d-32b8-4b79-a7f0-71aa2daeaad8.mp4
Note how in the current state, the button (when the text is not visible) lacks an accessible name (just announced as "button"), the currently selected theme button is not identified by screen readers, and once choosing a theme, focus is just lost/rugpulled.
Type of changes
-
Bug fix (non-breaking change which fixes an issue) -
New feature (non-breaking change which adds functionality) -
Refactoring (non-breaking change) -
Breaking change (fix or feature that would change existing functionality)
Checklist
-
I have read the contributing guidelines -
My code follows the code style of the project (using npm run lint
) -
My change introduces changes to the documentation -
I have updated the documentation accordingly -
I have added tests to cover my changes -
All new and existing tests passed