search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
26.26k stars 1.09k forks source link

Select: undefined value causes focus issues with Chromium + NVDA #3560

Open samuliraty opened 1 week ago

samuliraty commented 1 week ago

Package version: @headlessui/vue@1.7.23 Browser: Chrome, Edge Reproduction: https://github.com/samuliraty/vue-headlessui-select-a11y-issue-example

Arrow keys don't work in Select dropdown with Chromium-browsers and NVDA open. Focus moves to next element on page as if dropdown was not open. Focus works correctly without NVDA on Chromium, and with NVDA on Firefox.

Steps to reproduce:

  1. Open Chrome and NVDA
  2. Navigate to page with a HeadlessUI Select with undefined value
  3. Open the dropdown
  4. Try to move up and down using arrow keys