search

JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.56k stars 4.12k forks source link

Accessibility issue: Focus is lost on select field when using a screen reader, it is not possible to choose the option #4813

Closed ElenaShevchenko closed 2 years ago

ElenaShevchenko commented 3 years ago

With screen reader running, tab through each field in https://react-select.com/creatable.

When I tab from one select to another (Creatable Example -> Creatable Multiselect Example), my focus moves from field within the component to something inside next component. When I try to choose option using arrow down I loose focus and going out of the form.

134911243-eb04760c-70f9-4992-8f97-0774f50105f3

ebonow commented 2 years ago

Greetings @ElenaShevchenko ,

I am not sure that I am seeing the same behavior, but just want to confirm with you the steps.

  1. Tab into Select (Creatable Example)
  2. Press tab => Focus leaves Select, Focus on (Creatable Multiselect Example "Source Code Icon") Button
  3. Press tab => Focus on (Creatable Multiselect Example "New Window Icon") Button
  4. Press tab => Focus on Creatable Multiselect Example Select

I agree that the accessibility on the documentation site is very poor. Not only is the outline on the icons set to 0 on active, but the icons both have an opacity set on them until they are hovered.

Just want to be clear if the issue you are seeing is with the documentation site itself or the Select.

ebonow commented 2 years ago

@ElenaShevchenko thanks for bringing to our attention. I have created a PR to address some issues with the documentation. #4878

This particular commit within the PR changes the styling so that the icon buttons will receive an outline when they are focused which seemingly should address this issue you are seeing.

https://github.com/JedWatson/react-select/pull/4878/commits/7a260279d35f997657c7be104a8e31a5f4429cdf