Visually Hidden

Overview

SrOnly removes content from the visual flow while keeping it accessible to assistive technologies. Uses the clip-rect technique recommended by WebAIM.

Usage

HTML
React

<button>
  <svg aria-hidden="true">...</svg>
  <span class="pm-sr-only">Close dialog</span>
</button>

import { SrOnly } from "@paramanu/utilities-react"

<button>
  <Icon aria-hidden />
  <SrOnly>Close dialog</SrOnly>
</button>

Guidelines

Use for icon-only buttons that need accessible labels
Use focusable for skip navigation links
Do not use to hide decorative content (use aria-hidden instead)

API

Prop	Type	Default	Description
`focusable`	`boolean`	`false`	Element becomes visible when focused
`as`	`ElementType`	`"span"`	The HTML element to render