FocusTrap

Trzyma Tab wewnątrz własnego panelu, dopóki jest otwarty, a potem oddaje fokus. Modal, Popover i DropdownMenu już to robią; wybierz FocusTrap dla własnej szuflady albo kroku przewodnika.

FocusTrap

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: FocusTrap

Noc, podgląd: FocusTrap

Wysoki kontrast, podgląd: FocusTrap

UżycieLink do sekcji Użycie

tsx

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

tsx

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

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Zbudowane na FocusScope z React Aria.
Po zamontowaniu fokus trafia na pierwszy element dostępny z klawiatury albo zostaje na elemencie w środku, który ma autoFocus.
Tab i Shift+Tab zawijają się na końcach, grupy przycisków opcji liczą się jako jeden przystanek, a fokus wraca do elementu otwierającego po odmontowaniu.
Daj panelowi nazwę i drogę wyjścia, tutaj Apply i Close, i zamykaj go klawiszem Escape tam, gdzie to pasuje.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.