Visually hidden

import { VisuallyHidden } from '@yarcl/react';

<Button>
  <SearchIcon />
  <VisuallyHidden>Search projects</VisuallyHidden>
</Button>

Use VisuallyHidden when visible context is clear but an accessible name or description is still required. Its content remains in the accessibility tree and can name a surrounding button or link.

The .yarcl-visually-hidden class provides the same behavior for plain HTML. Do not use either form to hide interactive elements because keyboard users could focus a control they cannot see.

Props

Accepts every native <span> attribute.

Prop	Type	Default	Description
`children`	`ReactNode`		Content exposed to assistive technology.