How to toggle focus trap in RAC modal/dialog #6000
-
|
Some consumers of our design system use CommandBar which can be triggered and opened while a RAC modal is open. Because focus is trapped in the RAC modal, keyboard users cannot interact with CommandBar. Is there a context provider for overlay or some other method to manage turning focus traps on or off for RAC? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
We probably need to add this to the docs, but cases like this can be handled with the |
Beta Was this translation helpful? Give feedback.
-
|
That did the trick thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Is this still the suggested approach? If we wanted something like a Non Modal Drawer component that still allowed for certain interactions outside of the Drawer, would we just be using this data attribute at the top level and then hiding the |
Beta Was this translation helpful? Give feedback.
We probably need to add this to the docs, but cases like this can be handled with the
data-react-aria-top-layerattribute. This is a way of marking certain elements as appearing above all others in an application, so the user always has access to them (e.g. via keyboard focus and screen readers). Another example of a top layer element is a toast. If you can add thedata-react-aria-top-layerattribute to the CommandBar element, or an ancestor (e.g. a container that it renders into), then React Aria will allow focus to move to any element inside it.