Components

Visually Hidden

A component that uses the visuallyHidden utility to hide text from screen.

See more about the visuallyHidden utility in Seeds.

import { VisuallyHidden } from '@sproutsocial/racine'
<Box>
<Text as="p" mb={400}>A collection of timely, shared Topics available to all Listening customers. These do not count against your plan limit.</Text>
<Button appearance="primary" href='https://support.sproutsocial.com/hc/en-us/articles/360041192711-Featured-Topics' external>
Learn more<VisuallyHidden> about Featured Topics</VisuallyHidden>
</Button>
</Box>

The above example would show up in the VoiceOver Links menu with the VisuallyHidden text (see example below).

Example of Mac OS VoiceOver showing VisuallyHidden text in the VoiceOver Links menu