Visually Hidden

Import

import { VisuallyHidden } from '@marbleui/ui'

Props

<VisuallyHidden>

Re-exported from React Aria VisuallyHidden; see its documentation for props.

Usage notes

Hides content visually while keeping it available to screen readers. Use it to add context to a link or control. When the control is an icon-only button, prefer aria-label.

<a href="/pricing">Read more <VisuallyHidden>about pricing plans</VisuallyHidden></a>

Re-exported from React Aria; it takes elementType and isFocusable props.
The content is announced but not seen, so write it as real text for a screen reader.
Don’t use it to hide interactive elements without isFocusable.

Example source · show

import { IconButton } from '../icon-button'
import { VisuallyHidden } from './visually-hidden'

export const styles = {
  Default: () => (
    <div className="flex flex-col items-center gap-3 text-sm text-fg-muted">
      <a href="#" className="flex items-center gap-1 text-accent-ink">
        Read more <VisuallyHidden>about pricing plans</VisuallyHidden> →
      </a>
      <IconButton variant="outline" aria-label="Settings">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><circle cx="12" cy="12" r="3" /></svg>
      </IconButton>
      <span className="text-xs">Screen readers hear “Read more about pricing plans”.</span>
    </div>
  ),
}

Source: packages/ui/src/visually-hidden/visually-hidden.tsx

Catalog