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

Improve accessible name of version dropdown in docs navbar #36495

Merged

Conversation

patrickhlauke
Copy link
Member

  • add aria-hidden="true" to the "Bootstrap" text that is hidden on large screens
  • add separate visually-hidden "Bootstrap", which will be part of the accessible name regardless of whether the other string is visible or not (on large screen)
  • extra visually-hidden text to give some context - that the dropdown is about switching versions
  • remove the redundant id/aria-labelledby for the dropdown

@patrickhlauke patrickhlauke force-pushed the patrickhlauke-improve-docs-navbar-version-dropdown branch from 09ff113 to bd8e35a Compare June 3, 2022 18:44
@patrickhlauke
Copy link
Member Author

before/after video, using Chrome/NVDA

note how currently on large screen the button is announced, unsurprisingly, as "v5.2, button, collapsed". when opening the dropdown and moving focus to the first item, it announces the list as "v5.2 list with 11 items...", which is of course rubbish as the list itself doesn't refer to v5.2 overall. after this PR is applied, note how the button is not announced as "Bootstrap v5.2 (switch to other versions), button collapsed", and moving to the list then just announces it as "list with 11 items..."

bootstrap-version-dropdown-tweak.mp4

Didn't record a separate video, but: on medium-sized browser, when the "Bootstrap" text is visible in the dropdown, it won't announce it twice (thanks to the aria-hidden), so still announces the button as "Bootstrap v5.2 (switch to other versions")

screenshot showing the medium-sized button in focus and the NVDA output

@patrickhlauke patrickhlauke marked this pull request as ready for review June 3, 2022 18:58
@patrickhlauke patrickhlauke requested review from a team as code owners June 3, 2022 18:58
@patrickhlauke patrickhlauke added this to In progress in v5.2.0-stable via automation Jun 3, 2022
@patrickhlauke patrickhlauke force-pushed the patrickhlauke-improve-docs-navbar-version-dropdown branch from bd8e35a to 750dfae Compare June 3, 2022 19:07
- add `aria-hidden="true"` to the "Bootstrap" text that is hidden on large screens
- add separate visually-hidden "Bootstrap", which will be part of the accessible name regardless of whether the other string is visible or not (on large screen)
- extra visually-hidden text to give some context - that the dropdown is about switching versions
- remove the redundant id/aria-labelledby for the dropdown
@patrickhlauke patrickhlauke force-pushed the patrickhlauke-improve-docs-navbar-version-dropdown branch from 750dfae to 1e1551d Compare June 3, 2022 19:10
@patrickhlauke
Copy link
Member Author

patrickhlauke commented Jun 3, 2022

sorry, original PR had all the /dist/ and /js/ changes in it from running the site locally to check. should those directories perhaps be added to .gitignore?

Copy link
Member

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thanks a lot for the detailed description and the video 👌

site/layouts/partials/docs-versions.html Show resolved Hide resolved
v5.2.0-stable automation moved this from In progress to Reviewer approved Jun 5, 2022
@julien-deramond
Copy link
Member

sorry, original PR had all the /dist/ and /js/ changes in it from running the site locally to check. should those directories perhaps be added to .gitignore?

From what I understand it is not possible yet because of some package managers depending on it (more info in #29970)

@XhmikosR
Copy link
Member

XhmikosR commented Jun 5, 2022 via email

@patrickhlauke
Copy link
Member Author

patrickhlauke commented Jun 5, 2022 via email

@patrickhlauke
Copy link
Member Author

quick video recording without the   chrome/nvda

2022-06-05_09-55-26.mp4

@patrickhlauke patrickhlauke merged commit af0c1d8 into main Jun 5, 2022
v5.2.0-stable automation moved this from Reviewer approved to Done Jun 5, 2022
@patrickhlauke patrickhlauke deleted the patrickhlauke-improve-docs-navbar-version-dropdown branch June 5, 2022 08:59
mwszekely pushed a commit to mwszekely/bootstrap that referenced this pull request Jun 8, 2022
- add `aria-hidden="true"` to the "Bootstrap" text that is hidden on large screens
- add separate visually-hidden "Bootstrap", which will be part of the accessible name regardless of whether the other string is visible or not (on large screen)
- extra visually-hidden text to give some context - that the dropdown is about switching versions
- remove the redundant id/aria-labelledby for the dropdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v5.2.0-stable
  
Done
Development

Successfully merging this pull request may close these issues.

None yet

3 participants