You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Create a popover with enforceFocus set to true (default value).
Turn on a screen reader
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.
The text was updated successfully, but these errors were encountered:
Environment
Code Sandbox
Link to a minimal repro: https://codesandbox.io/p/devbox/nifty-darwin-39fcj7?workspaceId=a13b2115-2f73-4639-a670-1cb7a26dfddc
Steps to reproduce
enforceFocus
set to true (default value).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
orrole=alertdialog
. Either in the Popover or Overlay2 component the content could be wrapped in a div with these properties iffenforceFocus
is true.The text was updated successfully, but these errors were encountered: