import { Meta, Source } from '@storybook/addon-docs/blocks';

<Meta title="Other/StatusIcon/Accessibility" />

# Accessibility

By default, the component offers accessible names for all the icons, to ensure their meaning is conveyed to sighted and non-sighted users alike. The built-in labels are derived from the provided `sentiment` prop (as listed below), but can be overridden via `iconLabel` prop:

<Source code={`
Sentiment.NEGATIVE -> 'Error:'
Sentiment.POSITIVE -> 'Success:'
Sentiment.WARNING -> 'Warning:'
Status.PENDING -> 'Pending:'
Sentiment.NEUTRAL -> 'Information:'

// deprecated
Sentiment.ERROR -> 'Error:'
Sentiment.INFO -> 'Information:'
Sentiment.SUCCESS -> 'Success:'
`} dark />

The purpose of the colon (`:`) is to make the screen reader briefly pause and separate the icon label from the rest of the content.

## Presentational icons

In some very rare cases, where the sentiment/status is already clearly communicated for **all** users (e.g. a duplicated icon in the `Upload` component), it might be more user-friendly to treat the `StatusIcon` as purely presentational.

To achieve it, simply set the `iconLabel` to `null` and that will result in `role="none" aria-hidden` applied to the icon.