Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Make theme switcher accessible #37780

Merged
merged 7 commits into from
Jan 2, 2023

Conversation

patrickhlauke
Copy link
Member

@patrickhlauke patrickhlauke commented Jan 2, 2023

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

bootstrap-theme-switcher.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

Live previews

https://deploy-preview-37780--twbs-bootstrap.netlify.app/

* 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)
* make the theme buttons actual `aria-pressed` toggles
@patrickhlauke patrickhlauke force-pushed the patrickhlauke-docs-theme-switcher-accessibility branch from 08db223 to 04bde56 Compare January 2, 2023 01:31
@patrickhlauke patrickhlauke force-pushed the patrickhlauke-docs-theme-switcher-accessibility branch from 04bde56 to 304202e Compare January 2, 2023 01:34
@patrickhlauke patrickhlauke marked this pull request as ready for review January 2, 2023 02:11
@patrickhlauke patrickhlauke requested a review from a team as a code owner January 2, 2023 02:11
@patrickhlauke patrickhlauke changed the title Make theme switcher accessible Docs: Make theme switcher accessible Jan 2, 2023
@mdo mdo merged commit 212c0df into main Jan 2, 2023
@mdo mdo deleted the patrickhlauke-docs-theme-switcher-accessibility branch January 2, 2023 05:54
krzysdz added a commit to krzysdz/inz that referenced this pull request Jan 16, 2023
This commit mirrors twbs/bootstrap#37780 with ~~a small fix~~ a fix from twbs/bootstrap#37836 and adds the missing checkmark icon to the theme dropdown.
@mahilanmjd mahilanmjd mentioned this pull request Apr 16, 2023
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants