vanillaSelectBox icon indicating copy to clipboard operation
vanillaSelectBox copied to clipboard

Accessibility Issues

Open tleifj opened this issue 2 years ago • 0 comments

I'm running into a few accessibility issues when using keyboard navigation with vanillaSelectBox. A few items:

  • The individual options in the dropdown are inaccessible with keyboard navigation. I would expect to be able to open the item and use down and up arrows to navigate the options and hit enter to select an option similar to a native select input. Because a button element is used in the markup when it is focused and you hit enter, the dropdown opens (like click event) but you can't navigate to the options.
  • Because there are button elements within the vanillaSelectBox markup and because of preventDefault on the select click event, when a user tries to hit enter to submit a form in another non-vanillaSelectBox input (in my case a text input for keyword search) the form doesn't submit as expected and it fires the click event on the next vanillaSelectBox which opens up the dropdown unexpectedly.

Removing the preventDefault fixes the issue but it does submit the form when hitting enter when the vanillaSelectBox is focused. Changing the button element to a div allows for the form to submit when focused on another input. Can the button element be changed to a div to prevent these issues? Can there be some logic to make the dropdown options focusable and selectable via keyboard?

tleifj avatar Aug 26 '22 21:08 tleifj