Describe the bug
Modal dialogs must trap keyboard and virtual cursor focus to ensure screen reader users do not accidentally escape the modal and start interacting with the rest of the page. Our EuiModal has a bug where I can traverse behind the modal when I an navigating using the VO shortcut plus arrow keys. Video attached below.
Impact and severity
Screen reader users could be negatively impacted by this issue, especially when we're using modal dialogs for things like confirming delete actions, entering user data, or modifying instances.
Environment and versions
- EUI version: 93.1.1
- React version: 18
- Kibana version (if applicable): 8.12
- Browser: Safari
- Operating System: MacOS Ventura
To Reproduce
Steps to reproduce the behavior:
- Go to the EuiModal docs page. You must be using Safari on MacOS to reproduce this bug.
- Turn on VoiceOver
- Tab to the first modal button, and press
Ctrl + Opt + Enter to open the modal. Verify VO says "You are in a modal".
- Press
Ctrl + Opt + Left_Arrow 3-5 times. Your virtual cursor (black square) should be behind the modal and behind the gray smoke layer. This is the bug.
Expected behavior
Modal dialogs should prevent users from escaping with a screen reader or keyboard.
Video reproduction of the issue
https://github.com/elastic/eui/assets/934879/4da90a39-5fc8-4ef1-b0da-e69a0c8a2614
Additional context
Understanding SC 2.4.3: Focus Order (Level A)
Describe the bug
Modal dialogs must trap keyboard and virtual cursor focus to ensure screen reader users do not accidentally escape the modal and start interacting with the rest of the page. Our
EuiModalhas a bug where I can traverse behind the modal when I an navigating using the VO shortcut plus arrow keys. Video attached below.Impact and severity
Screen reader users could be negatively impacted by this issue, especially when we're using modal dialogs for things like confirming delete actions, entering user data, or modifying instances.
Environment and versions
To Reproduce
Steps to reproduce the behavior:
Ctrl + Opt + Enterto open the modal. Verify VO says "You are in a modal".Ctrl + Opt + Left_Arrow3-5 times. Your virtual cursor (black square) should be behind the modal and behind the gray smoke layer. This is the bug.Expected behavior
Modal dialogs should prevent users from escaping with a screen reader or keyboard.
Video reproduction of the issue
https://github.com/elastic/eui/assets/934879/4da90a39-5fc8-4ef1-b0da-e69a0c8a2614
Additional context
Understanding SC 2.4.3: Focus Order (Level A)