Focus Trap
Focus Trap keeps the focus within its focusable children elements.
| install | yarn add @clayui/core |
|---|---|
| version | 3.96.0 |
Introduction
Focus Trap is a component that wraps elements in the DOM and prevents focus from escaping from its child components when the user navigates with Tab or Shift + Tab.
It definitely is used when trying to build accessible components, blocking all interactions outside of it while Focus Trap is active.
It's the responsibility of the user to add an escape method for the focus trap, either with a button or the escape key.
Example
Code Sample (expand to see it)