Visually Hidden

Hides content from the screen in an accessible way.

Install the component from the @minddrop/ui package.

import { VisuallyHidden } from '@minddrop/ui';
import { Settings } from '@minddrop/icons';

export default () => (
  <button>
    <Settings />
    <VisuallyHidden>Settings</VisuallyHidden>
  </button>
);

Anything you put inside this component will be hidden from the screen but will be announced by screen readers.

This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.