@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
38 lines • 1.49 kB
TypeScript
import * as React from "react";
/**
* Represents the configurable props for the {@link VisuallyHidden} component.
*
* @remarks
* Extends native `<span>` attributes so hidden assistive text can carry ARIA metadata,
* testing hooks, and composed class overrides while remaining available to screen readers.
*/
interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLSpanElement> {
/**
* Content that is hidden visually but remains accessible to assistive technology.
*/
children: React.ReactNode;
}
/**
* Hides content visually while keeping it accessible to screen readers.
*
* @remarks
* **Rendering Context**: Server- and client-compatible presentational component.
*
* Renders a `<span>` that uses the classic clipping technique to remove content from the
* visual flow without removing it from the accessibility tree. Use it to provide labels
* for icon-only controls, clarify status changes, or add extra context for assistive tech.
*
* @example
* ```tsx
* <button type="button">
* <TrashIcon aria-hidden="true" />
* <VisuallyHidden>Delete item</VisuallyHidden>
* </button>
* ```
*
* @see {@link https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements | W3C hiding elements guidance}
*/
declare const VisuallyHidden: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLSpanElement>>;
export { VisuallyHidden };
export type { VisuallyHiddenProps };
//# sourceMappingURL=visually-hidden.d.ts.map