Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

ARIA expanded pattern on sidebar navigation #9458

Closed
3 of 7 tasks
srapilly opened this issue Oct 26, 2023 · 3 comments
Closed
3 of 7 tasks

ARIA expanded pattern on sidebar navigation #9458

srapilly opened this issue Oct 26, 2023 · 3 comments
Labels
bug An error in the Docusaurus core causing instability or issues with its execution domain: a11y Related to accessibility concerns of the default theme help wanted Asking for outside help and/or contributions to this particular issue or PR.

Comments

@srapilly
Copy link

Have you read the Contributing Guidelines on issues?

Prerequisites

  • 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

Self-service

  • I'd be willing to fix this bug myself.
@srapilly srapilly added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Oct 26, 2023
@Josh-Cena Josh-Cena added help wanted Asking for outside help and/or contributions to this particular issue or PR. domain: a11y Related to accessibility concerns of the default theme and removed status: needs triage This issue has not been triaged by maintainers labels Jul 19, 2024
@ianjmacintosh
Copy link

It looks like this has been addressed.

I just checked on a local build and see the button element is now described accurately with the aria-expanded attribute:

<div class="menu__list-item-collapsible">
  <a class="menu__link menu__link--sublist" href="/docs/advanced">Advanced Guides</a>
  <button aria-label="Expand sidebar category 'Advanced Guides'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button>
</div>

Is this OK to close?

@srapilly
Copy link
Author

srapilly commented Oct 7, 2024

@ianjmacintosh Nice! everything seems good now :)

@srapilly srapilly closed this as not planned Won't fix, can't repro, duplicate, stale Oct 7, 2024
@Josh-Cena
Copy link
Collaborator

For posterity: #9944

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution domain: a11y Related to accessibility concerns of the default theme help wanted Asking for outside help and/or contributions to this particular issue or PR.
Projects
None yet
Development

No branches or pull requests

3 participants