fix: Add aria-expanded for mobile navigation dropdown
Pre-flight checklist
- [X] 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
The mobile navigation dropdown does not convey the expanded state to assistive technologies such as a screen reader, it's also not focusable
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
If the element has an href attribute: Interactive content.
It would be preferable to use an HTML button (a button should work with SPACE onKeyUp and ENTER onKeyDown) I think it could be done in another PR (styling changes would be needed)
Test Plan
Can be tested on Docusaurus website homepage with a zoom to trigger the mobile version:
-
They should be keyboard focusable
-
They should work with
enterorspace -
They should convey their expanded state
On the chrome accessibility tree view, we can see that:
-
Versions has
expanded: false -
Languages has
expanded: true
Test links
Deploy preview: https://deploy-preview-9463--docusaurus-2.netlify.app/
Related issues/PRs
Quite similar to:
- https://github.com/facebook/docusaurus/issues/8478
- https://github.com/facebook/docusaurus/pull/9439 (links for desktop dropdown)
[V2]
Built without sensitive environment variables
| Name | Link |
|---|---|
| Latest commit | f2f3443b17323c61494c0b70d602ff49fd3f27ce |
| Latest deploy log | https://app.netlify.com/sites/docusaurus-2/deploys/653c1e7b966a1f0008e2ae57 |
| Deploy Preview | https://deploy-preview-9463--docusaurus-2.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
⚡️ Lighthouse report for the deploy preview of this PR
| URL | Performance | Accessibility | Best Practices | SEO | PWA | Report |
|---|---|---|---|---|---|---|
| / | 🟠 80 | 🟢 97 | 🟢 100 | 🟢 100 | 🟠 89 | Report |
| /docs/installation | 🟠 54 | 🟢 98 | 🟢 100 | 🟢 100 | 🟠 89 | Report |
| /docs/category/getting-started | 🟠 62 | 🟢 100 | 🟢 100 | 🟢 90 | 🟠 89 | Report |
| /blog | 🟠 64 | 🟢 100 | 🟢 100 | 🟢 90 | 🟠 89 | Report |
| /blog/preparing-your-site-for-docusaurus-v3 | 🟠 53 | 🟢 97 | 🟢 100 | 🟢 100 | 🟠 89 | Report |
| /blog/tags/release | 🟠 84 | 🟢 100 | 🟢 100 | 🟠 80 | 🟠 89 | Report |
| /blog/tags | 🟠 64 | 🟢 100 | 🟢 100 | 🟢 90 | 🟠 89 | Report |