LiveRegion and useAnnounce

LiveRegion odczytuje na głos zmiany swojej zawartości, na przykład liczbę wyników po filtrowaniu. useAnnounce wypowiada jednorazowy komunikat bez pokazywania go, na przykład „Draft saved” po skrócie klawiszowym.

LiveRegion

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: LiveRegion and useAnnounce

No results yet.

Noc, podgląd: LiveRegion and useAnnounce

No results yet.

Wysoki kontrast, podgląd: LiveRegion and useAnnounce

No results yet.

UżycieLink do sekcji Użycie

tsx

import { LiveRegion } from '@skribly/ui/theme'

tsx

<LiveRegion>{count} results</LiveRegion>

const announce = useAnnounce()
announce('Draft saved')
announce('Could not reach the server', 'assertive')

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ść

Komunikaty polite czekają, aż czytnik ekranu skończy; assertive przerywają i służą tylko błędom, które blokują czytelnika.
Renderuj LiveRegion pusty od początku, bo region, który pojawia się razem z tekstem, często nie jest odczytywany.
Ogłoszenia pozostają słyszalne, gdy otwarte jest modalne okno dialogowe, a ten sam komunikat dwa razy jest odczytany dwa razy.

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