Accessibility
The glass sits on top of your shadcn components. Semantics, focus, and keyboard behavior come from the primitives underneath, and every interaction works without the motion or the transparency.
Semantics and focus
- Roles, states, and keyboard support come from the shadcn component underneath. The toolbar, which shadcn does not have, keeps one tab stop and moves between its buttons with the arrow keys, Home, and End.
- The lens shows an
inert,aria-hiddencopy of its list. Screen readers and the keyboard only ever reach the real items. - Menus keep the base menu’s focus management: opening from the keyboard focuses the first item, and Escape returns focus to the trigger.
Preferences
System settings apply automatically. Each also has an attribute for part of a page.
| Preference | Set by | What changes |
|---|---|---|
| Reduced motion | prefers-reduced-motion, or data-reduced-motion="true" on an ancestor | No lift, swell, stretch, or morph. Changes are instant. |
| Reduced transparency | prefers-reduced-transparency, or data-reduced-transparency="true" | Opaque fills instead of blurred glass. |
| Increased contrast | prefers-contrast: more | Opaque fills, as for reduced transparency. |
| Forced colors | forced-colors: active | System colors and borders; the lens becomes Highlight. |
| Dark | .dark or data-liquid-theme="dark" | Dark material and a brighter lens ink. |
Touch
- Icon buttons are 44 px circles, the minimum touch target on iOS.
- A menu opens under the finger that opened it. That press never selects the item that appears beneath it, unless the finger moves 10 px or more, so press, drag, and release still works.
Your part
- Give icon-only buttons an
aria-label. - For toggles, keep the label constant and use
aria-pressed. The toolbar lens follows it. - Check contrast over your own backdrops. Over a busy photo, raise
--liquid-tintor change--liquid-ink.
Testing
Component tests cover roles, refs, keyboard use, and cleanup. Every page of this site is checked against WCAG 2.1 A and AA with axe, on a desktop browser and a touch phone, on every change.