FocusTrap

Keeps Tab inside a panel of your own while it is open, then gives focus back. Modal, Popover and DropdownMenu already do this; pick FocusTrap for a custom drawer or a guided step.

FocusTrap

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, FocusTrap

Dark theme, FocusTrap

High contrast theme, FocusTrap

UsageLink to the section Usage

tsx

import { FocusTrap } from '@skribly/ui/overlays'

tsx

{open ? (
  <FocusTrap>
    <section aria-label="Quick filters">…</section>
  </FocusTrap>
) : null}

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Built on React Aria FocusScope.
On mount focus goes to the first tabbable element, or stays on one inside that has autoFocus.
Tab and Shift+Tab wrap at the ends, radio groups count as one stop, and focus returns to the opener on unmount.
Give the panel a name and a way out, here Apply and Close, and close it on Escape where that fits.

This demo runs through axe in all three themes on every test run. See what the tests check.