VisuallyHidden

Import

import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

Renders content in the accessibility tree while hiding it visually. Use for accessible names on icon-only controls, aria-live announcement regions, and supplementary screen-read...

Important props

이 컴포넌트는 주요 variant prop보다 children/compound pattern 중심으로 사용합니다.

Theming targets

이 항목은 공개 theming target이 문서화되어 있지 않습니다.

Best practices

• DoUse to give icon-only buttons and controls an accessible name that screen readers announce.
• DoRender as a block element (as="div") with aria-live to announce dynamic updates like drag-and-drop or result counts.
• Do notUse it to hide content from everyone; it stays in the accessibility tree; use conditional rendering or `hidden` to remove content entirely.
• Do notPut interactive controls inside it; the content is not visible and cannot receive pointer input.