Skip to content
New issue

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

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

Already on GitHub? Sign in 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in 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