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

TOC sections cannot be toggled with keyboard #2621

Open
arlina-espinoza opened this issue Nov 20, 2024 · 0 comments
Open

TOC sections cannot be toggled with keyboard #2621

arlina-espinoza opened this issue Nov 20, 2024 · 0 comments

Comments

@arlina-espinoza
Copy link

Describe the bug
The sections on the left table of contents cannot be toggled (open/close) via keyboard, only with a mouse.

Image

Expected behavior
The sections should be expanded/collapsed when they have keyboard focus and expand/collapse with the space bar.

How to reproduce

  1. Go to example page on Chrome: https://redocly.github.io/redoc/
  2. Tab to get to a section like "Upcoming Events".
  3. Press space to try to open/close - nothing happens.

Recommendations

  • Ensure there is a button role either by making the control a <button> element or adding role="button" to the element
  • Make the control focusable either by making it a <button> element or adding tabindex="0"
  • Ensure the button can be activated with the ENTER and SPACE keys
  • Add an accessible name to the button by adding an aria-label to the button or <div role="button">. Additionally, ensure the value updates when the double arrow icon updates to an "X" icon that closes the disclosure.
  • Add the aria-expanded attribute to the button. When content is expanded, aria-expanded="true", when it is collapsed, aria-expanded="false"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants