Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiModal] VoiceOver + Safari is able to escape the focus trap when navigating by virtual cursor instead of keyboard #7532

Closed
1Copenut opened this issue Feb 15, 2024 · 3 comments · Fixed by #7564

Comments

@1Copenut
Copy link
Contributor

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:

  1. Go to the EuiModal docs page. You must be using Safari on MacOS to reproduce this bug.
  2. Turn on VoiceOver
  3. Tab to the first modal button, and press Ctrl + Opt + Enter to open the modal. Verify VO says "You are in a modal".
  4. 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)

@cee-chen
Copy link
Contributor

cee-chen commented Mar 4, 2024

@1Copenut Can you help us set a priority on this? Does this only affect VO, and not JAWS/NVDA?

edit: only VO

@cee-chen
Copy link
Contributor

cee-chen commented Mar 4, 2024

VO has been having issues lately, this may be resolved in time on Apple's end without action from us - we should re-test in 6 months to see if it's still an issue

@1Copenut
Copy link
Contributor Author

1Copenut commented Mar 8, 2024

@cee-chen I think I have a line on this item. I'm working #7563 tonight and by happenstance, Safari + VO trapped the focus with virtual cursor when I properly identified the parent DIV as a modal. I'm still testing, but might be able to close two tickets fairly easily here. Will keep working it tonight and hopefully PR in the morning.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants