Visually Hidden
Hide content accessibly
VisuallyHidden hides an item but ensures it remains visible to accessibility readers.
- Keeps content hidden on screen but visible to assistive tech.
- Works with "space" prop to not disturb spacing.
Installation
VisuallyHidden is already installed in @hanzo/gui, or you can install it independently:
npm install @hanzogui/visually-hiddenUsage
Simply wrap the content you want hidden in VisuallyHidden:
import { Text, VisuallyHidden } from '@hanzo/gui'
export default () => (
<VisuallyHidden>
<Text>Add annotations here</Text>
</VisuallyHidden>
)When using with the space property, it will avoid double-spacing:
import { H1, Text, VisuallyHidden, YStack } from '@hanzo/gui'
export default () => (
<YStack space>
<H1>Title</H1>
<VisuallyHidden>
<Text>Add annotations here</Text>
</VisuallyHidden>
</YStack>
)Last updated on