@digitalservicebund/icons

Icons

Google's Material UI icons re-packaged as a set of React components without being dependent on Emotion.

Changelog

Please read here

Installation

npm install --save @digitalservicebund/icons

Usage

import WarningAmberIcon from "@digitalservicebund/icons/WarningAmber";

<WarningAmberIcon />

<WarningAmberIcon className="w-48 h-48" />

Accessibility

By default, the icons provided are hidden from screen readers (using aria-hidden="true"). It is assumed that icons are used purely for decorative purposes. That they only ever accompany a text that is meaningful even without an icon.

If this is not the case and the icon has sematic meaning, you have to take extra steps. Sara Soueidan shows some techniques regarding Accessible Icon Buttons.

Just in case you make an icon visible to screen readers, icons also have an appropriate ARIA role (role="graphics-symbol").

Changelog

[2.0.1]

Fixed

• remove invalid and needless ARIA roles

The graphics-symbol role is not officially specified and not understood my assistive technologies. Furthermore, the build script tests the aria-hidden attribute. Thereby the icons are not available in the accessibility tree anyway, so they don't need any role.

We received a hint for this in an external accessibility audit.