Theme and accessibility
Light, dark and high contrast themes with the reader settings of the Skribly apps: text size, reduced motion, a strong focus ring and underlined links. Also the small pieces every page needs: a skip link, hidden labels and live announcements. Built to WCAG 2.2 AA as a target.
6 pages, 8 exports
- ThemeProvider
- ThemeToggle
- ThemeScript
- AccessibilityProvider
- AccessibilitySettings
- SkipLink
- VisuallyHidden
- LiveRegion
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { ThemeProvider, ThemeToggle, ThemeScript, AccessibilityProvider, … } from '@skribly/ui/theme'Pages in this groupLink to the section Pages in this group
- ThemeProviderHolds the theme mode, stores the choice and sets data-theme on the page. Put one at the root of an app; useTheme reads and changes the mode from any component below it. scoped themes a single panel, as here.ThemeProvider
- ThemeToggleLets the reader pick light, dark, high contrast or the system setting. Use the segmented form in settings and the menu form in a crowded top bar.ThemeToggle
- ThemeScriptAn inline script for the head that applies the stored theme and reader settings before the first paint, so a dark page never flashes light. themeScript() gives the same source as a string for heads that React does not render.ThemeScript
- AccessibilitySettingsAccessibilityProvider applies the reader settings to the page and stores them on the device; useAccessibility reads them, for example to skip an animation. AccessibilitySettings is the ready settings section, and takes extra rows such as a ThemeToggle.AccessibilityProvider, AccessibilitySettings
- SkipLink and VisuallyHiddenSkipLink lets keyboard users jump past repeated navigation to the content. VisuallyHidden keeps text for screen readers only, such as the unit after a price or the name of an icon.SkipLink, VisuallyHidden
- LiveRegion and useAnnounceLiveRegion reads changes to its content aloud, such as a result count after filtering. useAnnounce speaks a one-off message without showing it, such as "Draft saved" after a shortcut.LiveRegion