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

Accessibility: "Authorizations" not keyboard accessible #2406

Open
Tracked by #1279
kburk1997 opened this issue Sep 7, 2023 · 2 comments
Open
Tracked by #1279

Accessibility: "Authorizations" not keyboard accessible #2406

kburk1997 opened this issue Sep 7, 2023 · 2 comments
Labels
a11y Accessibility-related issues Type: Bug

Comments

@kburk1997
Copy link

Describe the bug

  1. Go to Redocly demo
  2. Go to "POST Add a new pet"
  3. Try to tab to "Authorizations"

Expected behavior
Authorizations can get keyboard focus and can be expanded/collapsed with keyboard (since it can be clicked on).

Screenshots
Screen recording with KeyCastr

Screen.Recording.2023-09-07.at.1.46.47.PM.mov
@lornajane lornajane added the a11y Accessibility-related issues label Sep 8, 2023
@shubhamt619
Copy link

I was able to add Keyboard accessiblity to the Authorization and other items, but when I pressed space bar / enter, the click did not work. I would need someone who understands this codebase more deeply.

@arlina-espinoza
Copy link

The main issue is that the markup is using an h5 with a click event instead of an an element that has the right accessible semantics. This post details some good info about it: https://theadminbar.com/accessibility-weekly/divs-are-not-buttons/
In summary, Authorizations can be made accessible by:
a) Using a button element instead
b) Or the h5 made focusable and with interactive semantics by:

  • Add a tabindex to make it keyboard focusable.
  • Add CSS focus styles to show when it is being focused.
  • Add JavaScript key press events for the Enter key and Space bar.
  • Add a role attribute to tell screen reader users it’s a button.
  • Add additional aria attributes to indicate if it’s a toggle button, tab, or button that expands or collapses something.
    I feel (a) is simpler and already in use in other places (like the responses), and it might just require minimal styling updates.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility-related issues Type: Bug
Projects
None yet
Development

No branches or pull requests

4 participants