Components · Layout
VisuallyHidden
Screen-reader-only text.
Screen-reader-only text
import { Button, VisuallyHidden } from '@rookcom/monarch-react';
<Button>
Save <VisuallyHidden>changes to the ticket</VisuallyHidden>
</Button>Usage examples
The example at the top of the page is the only one for this component.
Purpose
Hides content visually while keeping it available to assistive technology.
Use when
- Adding context a sighted user gets from layout, e.g. "changes to the ticket" after "Save".
Avoid when
- Hiding content from everyone: use
hidden. - Naming an icon-only button: use IconButton
label.
Design principles
- Its class
.mn-visually-hiddenis a foundation utility (styles/foundation.css) that other components also use.
API reference
import { VisuallyHidden } from '@rookcom/monarch-react';| Export | Kind | Rendering | Root class |
|---|---|---|---|
VisuallyHidden | component | server-safe | .mn-visually-hidden |
Renders a <span>; native attributes pass through.
Generated from the TypeScript declarations of packages/react/src/components/layout/visually-hidden.
Properties
VisuallyHidden
Hides content visually while keeping it available to assistive technology.
| Prop | Type | Description |
|---|---|---|
children | ReactNode | |
className | string | |
id | string |
Variants
VisuallyHidden has no variants.
States
No states: it renders static content.
Interaction behaviour
Not interactive.
Keyboard support
Not interactive, so there is no keyboard behaviour.
Accessibility
- Text stays in the accessibility tree and contributes to the accessible name of its parent.
Responsive behaviour
- Always 1px and clipped at every width.
Theme support
- Not visible, so themes do not apply.
Do and don't
Do
- Use it to complete a visible label that relies on context.
Don't
- Do not hide focusable elements with it.
Related components
- Button: IconButton
labelnames icon-only buttons.
Dependencies
| Kind | Depends on |
|---|---|
| npm packages | None |
| Monarch components | None |
Testing coverage
- Keeps text in the accessible name of its parent button.
| Check | Covered |
|---|---|
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |
Tests: packages/react/src/components/layout/visually-hidden