vanillaSelectBox
vanillaSelectBox copied to clipboard
Accessibility Issues
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 theselect
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?