Accessibility Issues

[dbollinger]

I am testing the demo and docs pages with VoiceOver and macOS Big Sur, and finding some issues with keyboard controls and screen reader support.

1. Navigating options should make use of aria-activedescendent to support screen readers and other assistive technologies. Without implementing aria-activedescendent, the assistive technology's cursor is not guaranteed to follow the browser's focus.
2. Pressing the esc key does not close the popup menu
3. When the cursor focus moves to the control, the screen reader does not read the current value(s) to the user
4. There are also a number of issues for screen reader support in the "multi-select" variant that could probably be solved with some simple aria attributes.s

I highly recommend adding an accessibility section to this library's README highlighting these issues and encouraging folks to help address them. Additional guidance about best practices for combobox style controls can be found on w3: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mitchdowney]

@sanusart I'm currently adding screen reader accessibility to our web site and noticed I'm having this issue with Mac VoiceOver as well. When group items are visually hovered, the screen reader is not announcing them. The issue can be reproduced on the demo page https://sanusart.github.io/react-dropdown-select/

Does anyone know how we can fix or work around this? I thought maybe I could listen for onHighlight events, read the title of the highlighted item, and set it as the name property for the dropdown...but it looks like there is only an onChange event and not an onHighlight event.

I tried manually setting aria-activedescendent to true through Dev Tools, but that isn't resulting in the item being read for me. Maybe that's not a valid test though.

[mitchdowney]

@sanusart hmm sorry, this might just be user error. I was of the impression elements on the page should only be navigated to with the Tab key, but I realized with Mac VoiceOver I can navigate into the dropdown menu by pressing ctrl + opt + left/right arrows.

It still seems like Tab would make more sense here since it is a menu of buttons...but maybe using ctrl + opt + left/right is a common UX for screen reader users?

[mitchdowney]

@sanusart @dbollinger I made some changes intended to improve screen reader accessibility (at least for Mac VoiceOver). These changes do not seem like a proper fix however, and I haven't tested it thoroughly across different screen readers. According to my research, it seems like using custom keyboard events are supposed to be avoided entirely to ensure proper custom dropdown accessibility...but that would require drastic re-writing, so I'm trying to at least partially improve screen reader handling (in my very limited testing).

I've also added a dropdownAriaDescription prop, since I think the user should be informed about the non-standard accessibility behavior of the dropdown.

I published these changes to npm as @podverse/react-dropdown-select in case someone else wants to use them. Any feedback would be appreciated. Thanks!

#232

[sanusart]

@mitchdowney thank you for investigation and PR draft. Will try to get to it asap.
As far as I know, screen readers are not limited to tab keys only and have broad shortcuts. Saw in the docs of few of them.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.