Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !37780

Docs: Make theme switcher accessible

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Patrick H. Lauke requested to merge patrickhlauke-docs-theme-switcher-accessibility into main Jan 02, 2023
  • Overview 2
  • Commits 7
  • Pipelines 0
  • Changes 2

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

Live previews

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

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: patrickhlauke-docs-theme-switcher-accessibility