floating-vue
floating-vue copied to clipboard
Accessibility: Focus is lost when using ESC for Dropdown Component (Screenreader / Keyboard navigation)
First of all: Thanks very much for providing this awesome library as open source! 💚
I'm currently testing integrations of an existing site regarding WCAG 2.2 AA conformance.
I noticed the following challenge for screenreader users:
The focus is lost after using ESC to get out of a dropdown dialog.
Reproduction:
- Activate VoiceOver (CMD + F5)
- Visit https://floating-vue.starpad.dev/guide/component#dropdown in Safari
- Use TAB to get to dropdown button
- Click ENTER, text is read out by VoiceOver
- Click ESC to dismiss the dropdown dialogue
- Use TAB again --> Focus is on beginning of page
Expected State:
Active focus is on the element, which triggered the dropdown (dropdown button "click me")
Tested with: Safari 18.5, VoiceOver, OSX 15.5
This can be debugged in Chrome as well with TAB (no screenreader):
Tab to Button ✅
Hit ENTER ✅
After hitting ESC - focus is set to
, not back to clicked button ❌Thanks very much in advance!
PS: Also opened a question here for tooltip component in regards to accessibility https://github.com/Akryum/floating-vue/discussions/1079