Accessibility: Focus is lost when using ESC for Dropdown Component (Screenreader / Keyboard navigation)

[mandrasch]

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:

1. Activate VoiceOver (CMD + F5)
2. Visit https://floating-vue.starpad.dev/guide/component#dropdown in Safari
3. Use TAB to get to dropdown button
4. Click ENTER, text is read out by VoiceOver
5. Click ESC to dismiss the dropdown dialogue
6. 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 #1079

[mandrasch]

Possibly related to #1027 🤔

[mandrasch]

Seems like this can be fixed with hide event and re-setting the focus to the triggering element (button - triggerRef)

<script setup>
import { ref } from 'vue'
const triggerRef = ref(null)
const handleHide = () => {
  // Wait for DOM updates, then restore focus
  requestAnimationFrame(() => {
    triggerRef.value?.focus()
  })
}
</script>

<template>
<div style="display:flex;flex-direction:column; gap: 12px;">
    <h1>Focus test</h1>

    <a href="https://example.org">Example Link 1</a>

    <VDropdown @hide="handleHide">
        <!-- This will be the popover target (for the events and position) -->
        <button ref="triggerRef" >Click me</button>
        <!-- This will be the content of the popover -->
        <template #popper>
            Hello World 123
        </template>
    </VDropdown>

    <a href="https://example.org">Example Link 2</a>

    </div>
</template>

Challenge is that focus ring / outline is displayed on Safari after leaving via ESC, so tracking wheter it was exited via ESC and only setting the focus for keyboard users might be necessary.