Visually Hidden

Hidden from sight, present for screen readers. The clip technique — not display:none or visibility:hidden, both of which remove the element from the accessibility tree entirely.

src/components/ui/visually-hidden.tsx

About

From the component's own source, where it was written.

Hidden from sight, present for screen readers.

The clip-based technique, not display: none or visibility: hidden — both of those remove the element from the accessibility tree, which defeats the entire purpose. It is also not opacity: 0, which leaves the element taking up layout.

Tailwind's sr-only does exactly this; the component exists so intent is legible in the markup, and so asChild can apply it to an element that already carries its own classes.

Install

npx astralyx-ui add visually-hidden

Usage

import { VisuallyHidden } from '@/components/ui/visually-hidden'

<button>
  <TrashIcon />
  <VisuallyHidden>Delete invoice</VisuallyHidden>
</button>

Composer

Change the props and the source below follows.

This sentence contains an invisible but announced hidden text.

Props

hidden text

reveal (debug)

tsx

<VisuallyHidden>Delete invoice</VisuallyHidden>

Examples

Icon button name

tsx

<Button size="icon-sm">
  <Settings />
  <VisuallyHidden>Settings</VisuallyHidden>
</Button>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`VisuallyHidden`

Hidden from sight, present for screen readers.

Extends ComponentProps<'span'>.

Prop	Type	Default	Description
asChild	boolean	false	Apply to an element that already carries its own classes.

Behaviour

Topic	Detail	Description
technique	sr-only	Identical to Tailwind sr-only; the component exists so the intent is legible in the markup.