Visually Hidden

Text that screen readers announce but the page doesn't show, and skip links that appear on keyboard focus.

Basic usage

<VisuallyHidden> renders a <span> with chassis-css's .visually-hidden helper: hidden on screen, read by screen readers. Use it to name a control whose visible content is only an icon.

import { Button, VisuallyHidden } from '@chassis-ui/react'

export const Example = () => (
  <Button color="primary">
    <span aria-hidden="true">★</span>
    <VisuallyHidden>Add to favorites</VisuallyHidden>
  </Button>
)

Focusable

With focusable, the element is hidden until it, or an element inside it, has keyboard focus. That is the usual skip link: the first element a keyboard user reaches, invisible to everyone else. It renders .visually-hidden-focusable instead.

import { VisuallyHidden } from '@chassis-ui/react'

export const Example = () => (
  <>
    <VisuallyHidden component="a" focusable href="#visually-hidden-content">
      Skip to main content
    </VisuallyHidden>
    <p id="visually-hidden-content">Press Tab in this example to reveal the skip link above.</p>
  </>
)

Like other components, it renders another element with component, or its single child with asChild: <VisuallyHidden asChild focusable><Link href="#content">…</Link></VisuallyHidden>.

API

VisuallyHidden

Prop	Type	Default
`asChild?`	`boolean`	—
Render the single child element in place of this component's own element, with this component's classes, props and ref merged onto it: `<Button asChild><Link href="/login">Log in</Link></Button>`. The alternative to `component` for React Server Components — an element can be passed from the server to this package's client components, a component reference (`component={Link}`) can't.
`className?`	`string`	—
A string of all className you want applied to the component.
`component?`	`ElementType`	`'span'`
Component used for the root node. Either a string to use an HTML element or a component.
`focusable?`	`boolean`	—
Shows the element while it, or an element inside it, has keyboard focus: a skip link, or a group of controls only keyboard users reach. Renders `.visually-hidden-focusable` instead of `.visually-hidden`.
`ref?`	`any`	—