Motyw i dostępność
Motyw dzienny, nocny i wysokiego kontrastu z ustawieniami czytelnika w aplikacjach Skribly: rozmiar tekstu, ograniczony ruch, wyraźna obwódka fokusa i podkreślone linki. Do tego drobne elementy potrzebne na każdej stronie: link pomijający, ukryte etykiety i ogłoszenia na żywo. Budowane z celem WCAG 2.2 AA.
Strony: 6, eksporty: 8
- ThemeProvider
- ThemeToggle
- ThemeScript
- AccessibilityProvider
- AccessibilitySettings
- SkipLink
- VisuallyHidden
- LiveRegion
ImportLink do sekcji Import
Każda grupa ma własny punkt wejścia, więc aplikacja, która potrzebuje tylko tej grupy, ładuje tylko ją. Wszystko jest też eksportowane z @skribly/ui.
import { ThemeProvider, ThemeToggle, ThemeScript, AccessibilityProvider, … } from '@skribly/ui/theme'Strony tej grupyLink do sekcji Strony tej grupy
- ThemeProviderPrzechowuje tryb motywu, zapamiętuje wybór i ustawia data-theme na stronie. Umieść jeden w korzeniu aplikacji; useTheme odczytuje i zmienia tryb z dowolnego komponentu poniżej. scoped nadaje motyw pojedynczemu panelowi, tak jak tutaj.ThemeProvider
- ThemeTogglePozwala czytelnikowi wybrać motyw dzienny, nocny, wysokiego kontrastu albo ustawienie systemu. W ustawieniach użyj formy segmentowej, a w zatłoczonym górnym pasku formy menu.ThemeToggle
- ThemeScriptSkrypt wbudowany w head, który stosuje zapisany motyw i ustawienia czytelnika przed pierwszym wyrenderowaniem, aby ciemna strona nigdy nie błysnęła jasnym tłem. themeScript() daje to samo źródło jako tekst dla sekcji head, której React nie renderuje.ThemeScript
- AccessibilitySettingsAccessibilityProvider stosuje ustawienia czytelnika na stronie i zapisuje je na urządzeniu; useAccessibility je odczytuje, na przykład aby pominąć animację. AccessibilitySettings to gotowa sekcja ustawień, która przyjmuje dodatkowe wiersze, takie jak ThemeToggle.AccessibilityProvider, AccessibilitySettings
- SkipLink and VisuallyHiddenSkipLink pozwala użytkownikom klawiatury ominąć powtarzaną nawigację i przejść do treści. VisuallyHidden zachowuje tekst tylko dla czytników ekranu, na przykład jednostkę po liczbie albo nazwę ikony.SkipLink, VisuallyHidden
- LiveRegion and useAnnounceLiveRegion 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