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

Overlays with enforceFocus set to true still allow screen readers to exit focus #6924

Open
sethrkeim opened this issue Jul 24, 2024 · 0 comments

Comments

@sethrkeim
Copy link

Environment

  • Package version(s): @blueprintjs/core 5.10.5
  • Operating System: MacOs 14.5 (23F79)
  • Browser name and version: Google Chrome 126.0.6478.183

Code Sandbox

Link to a minimal repro: https://codesandbox.io/p/devbox/nifty-darwin-39fcj7?workspaceId=a13b2115-2f73-4639-a670-1cb7a26dfddc

Steps to reproduce

  1. Create a popover with enforceFocus set to true (default value).
  2. Turn on a screen reader
  3. Using the keyboard, open the popover, and using left and right arrow keys, move between the items in the popover.

Actual behavior

Using the left arrow key, you can escape the popover and traverse through the other items on the page.

Expected behavior

With enforceFocus set to true, I shouldn't be able to leave the focus of the popover with arrow keys while using a screen reader. It should either loop back to the last element in the popover, or stop at the first one.

Possible solution

aria-modal seems to be meant to tell screenreaders that a certain element is "modal" or must be interacted with before being able to focus on other parts of the screen. It must be paired with role=dialog or role=alertdialog. Either in the Popover or Overlay2 component the content could be wrapped in a div with these properties iff enforceFocus is true.

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

No branches or pull requests

1 participant