docusaurus icon indicating copy to clipboard operation
docusaurus copied to clipboard

ARIA expanded pattern on sidebar navigation

Open srapilly opened this issue 2 years ago • 0 comments

Have you read the Contributing Guidelines on issues?

Prerequisites

  • [X] I'm using the latest version of Docusaurus.
  • [ ] I have tried the npm run clear or yarn clear command.
  • [ ] I have tried rm -rf node_modules yarn.lock package-lock.json and 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

  1. Go to https://docusaurus.io/docs/next
  2. 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.

srapilly avatar Oct 26 '23 18:10 srapilly