Have you read the Contributing Guidelines on issues?
Prerequisites
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
Self-service
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clearoryarn clearcommand.rm -rf node_modules yarn.lock package-lock.jsonand re-installing packages.Description
The ARIA attribute
aria-expandedis placed on each link that has a subsectionFor example the Guides link on https://docusaurus.io/docs/next/category/guides
They should be on the
buttonthat collapses or expands the sublistReproducible demo
No response
Steps to reproduce
Expected behavior
Expected accessibility tree:
I think the accessible name of the button can also be shorter, the
aria-expandedis 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:
Your environment
Self-service