ARIA expanded pattern on sidebar navigation
Have you read the Contributing Guidelines on issues?
- [X] I have read the Contributing Guidelines on issues.
Prerequisites
- [X] I'm using the latest version of Docusaurus.
- [ ] I have tried the
npm run clearoryarn clearcommand. - [ ] I have tried
rm -rf node_modules yarn.lock package-lock.jsonand re-installing packages. - [ ] I have tried creating a repro with https://new.docusaurus.io.
- [ ] I have read the console error message carefully (if applicable).
Description
The ARIA attribute aria-expanded is placed on each link that has a subsection
<a class="menu__link menu__link--sublist menu__link--active" aria-current="page" aria-expanded="true" href="/docs/next/category/guides">Guides</a>
For example the Guides link on https://docusaurus.io/docs/next/category/guides
They should be on the button that collapses or expands the sublist
The aria-expanded attribute is applied to a focusable, interactive element that toggles visibility of content in another element. For example, it is applied to a parent treeitem to indicate whether its child branch of the tree is shown. Similarly, it can be applied to a button that controls visibility of a section of page content.
Reproducible demo
No response
Steps to reproduce
- Go to https://docusaurus.io/docs/next
- Use a screen reader to navigate in the menu or the accessibility tree can be visualized with chrome devtools
Expected behavior
Expected accessibility tree:
- link 'Advanced Guides'
- button 'Advanced Guides' expanded: false or true
I think the accessible name of the button can also be shorter, the aria-expanded is already conveying the state, we don't need to keep "Collapse side category" or "Open sidebar category"
Related article: https://adrianroselli.com/2019/06/link-disclosure-widget-navigation.html
Actual behavior
Current accessibility tree:
- link 'Advanced Guides' expanded: false or true
- button 'Collapse sidebar category 'Advanced Guides'
Your environment
- Public site URL: https://docusaurus.io/docs/next
Self-service
- [X] I'd be willing to fix this bug myself.