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

fix(theme): improve a11y of DocSidebarItemCategory expand/collapsed button #9944

Merged
merged 1 commit into from
Mar 14, 2024

Conversation

mxschmitt
Copy link
Contributor

@mxschmitt mxschmitt commented Mar 12, 2024

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

When using Narrator on Windows and using Tab to go over the items in the sidebar, it does not announce the expanded / collapsed state on link elements. This is because link elements should not be expandable, only buttons should be.

For expandable menu items with a preview page I moved the aria-expanded state to the actual button. For menu items without, I added role="button" to the element.

Test Plan

  1. Use Narrator on Windows in the OS settings
  2. Navigate to http://localhost:3000/docs/category/getting-started
  3. Tab until you reach the sidebar

Expected: Narrator announces the collapsed / expanded state.
Actual: Does not

Test links

Deploy preview: https://deploy-preview-9944--docusaurus-2.netlify.app/

Related issues/PRs

Relates microsoft/playwright.dev#1265

This came out of a discussion with @scottaohara, who is in the W3C WAI-ARIA working group.

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Mar 12, 2024
Copy link

netlify bot commented Mar 12, 2024

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit aae6a82
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/65f0ced65ff2a300087de8ba
😎 Deploy Preview https://deploy-preview-9944--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 54 🟢 98 🟢 96 🟢 100 🟠 88 Report
/docs/installation 🟠 53 🟢 96 🟢 100 🟢 100 🟠 88 Report
/docs/category/getting-started 🟠 75 🟢 100 🟢 100 🟢 90 🟠 88 Report
/blog 🟠 66 🟢 100 🟢 100 🟢 90 🟠 88 Report
/blog/preparing-your-site-for-docusaurus-v3 🟠 64 🟢 96 🟢 100 🟢 100 🟠 88 Report
/blog/tags/release 🟠 70 🟢 100 🟢 100 🟠 80 🟠 88 Report
/blog/tags 🟠 75 🟢 100 🟢 100 🟢 90 🟠 88 Report

Copy link

netlify bot commented Mar 12, 2024

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit 358aaae
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/65f0ceffe14c1d0008a7f992
😎 Deploy Preview https://deploy-preview-9944--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@slorber slorber added the pr: bug fix This PR fixes a bug in a past release. label Mar 14, 2024
@slorber slorber changed the title fix(a11y): DocSidebarItemCategory expand/collapsed button fix(theme): improve a11y of DocSidebarItemCategory expand/collapsed button Mar 14, 2024
@slorber
Copy link
Collaborator

slorber commented Mar 14, 2024

Thanks 👍

@slorber slorber merged commit 032e3b8 into facebook:main Mar 14, 2024
32 checks passed
@slorber slorber added the to backport This PR is planned to be backported to a stable version of Docusaurus label Mar 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release. to backport This PR is planned to be backported to a stable version of Docusaurus
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants