You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
Describe the bug
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
The text was updated successfully, but these errors were encountered: