Visually Hidden

Components

Visually Hidden

Code
Usage

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).