Focus Trap
Allows you to contain tab focus within a target element on-demand.
import { focusTrap } from '@skeletonlabs/skeleton';
Demo
Apply use:focusTrap
and then set the action value to either true
or
false
to enable or disable focus.
Focus Order
Set the default focus value using data-focusindex
attribute. Elements with this data attribute and the lowest
value will be focused first. Additional values can be supplied in the case of conditional rendering. Note that this can be used for Skeleton
Drawer and Modal content, which implement the focus trap by default.
Navigation
When enabled this action will auto-select the first focusable element or the specified target. Press Tab or Shift + Tab to cycle through focusable elements within the target region. When the last item is focused, it will loop to the start, and vice versa.
Focusing Overlays
Skeleton automatically enables this action for overlays such as modals and drawers to aid accessibility.