Accessible Icon

Makes icons accessible by adding a label.

Import the component from the @minddrop/ui package.

import { AccessibleIcon } from '@minddrop/ui';
import { Close } from '@minddrop/icons';

export default () => (
  <AccessibleIcon label="Close">
    <Close />
  </AccessibleIcon>
);

Contains the icon to make accessible.

Most icons or icon systems come with no accessibility built-in. For example, the same visual cross icon may in fact mean "close" or "delete". This component lets you give meaning to icons used throughout your app.

This is built with Visually Hidden.