VisuallyHidden
XS, under 350B gzippedContent for assistive technology only, removed from the visual layout without leaving the accessibility tree.
- Category
- Accessibility & preferences
- Budget
- xs, static display primitive
- Runtime deps
- None
Preview
This is the exact fixture the conformance suite renders in CI. Switch the language to see the component mirror and reformat.
Install
npx shadcn@latest add https://kata-ui-rho.vercel.app/r/visually-hidden.jsonCopies the source into your project.
Source
/**
* Content present for assistive technology and absent from the visual
* layout — an icon-only button's real label, an SR-only column header.
*
* Not `display: none` or `hidden`: both remove a node from the accessibility
* tree as completely as from the screen, which is the opposite of the point.
*/
export function VisuallyHidden({
children,
as: As = "span",
}: {
children: React.ReactNode;
as?: React.ElementType;
}) {
return (
<As
style={{
position: "absolute",
width: 1,
height: 1,
margin: -1,
padding: 0,
border: 0,
overflow: "hidden",
clip: "rect(0 0 0 0)",
clipPath: "inset(50%)",
whiteSpace: "nowrap",
}}
>
{children}
</As>
);
}
What CI checks
- Bundled, minified and gzipped against its tier budget
- Audited by axe in the state previewed above
- Rendered through react-dom/server with no browser globals
- Scanned for network calls, dangerous sinks, and unguarded animation