Files
codeaashu-claude-code/web/components/a11y/VisuallyHidden.tsx
ashutoshpythoncs@gmail.com b564857c0b claude-code
2026-03-31 18:58:05 +05:30

32 lines
735 B
TypeScript

import type { ReactNode } from "react";
interface VisuallyHiddenProps {
children: ReactNode;
/** When true, renders as a span inline; defaults to span */
as?: "span" | "div" | "p";
}
/**
* Visually hides content while keeping it accessible to screen readers.
* Use for icon-only buttons, supplemental context, etc.
*/
export function VisuallyHidden({ children, as: Tag = "span" }: VisuallyHiddenProps) {
return (
<Tag
style={{
position: "absolute",
width: "1px",
height: "1px",
padding: 0,
margin: "-1px",
overflow: "hidden",
clip: "rect(0, 0, 0, 0)",
whiteSpace: "nowrap",
borderWidth: 0,
}}
>
{children}
</Tag>
);
}