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

<Meta title="Prompts/ActionPrompt/Accessibility" tags={['new']} />

# Accessibility

Under the hood, `ActionPrompt` is marked as `role="region"` for a section of content that users might want to navigate to directly.

By default, it's labelled by the `media` asset and `title`, as well as described by the `description` if one is provided.

## Announcement Behaviour

`ActionPrompt` should be treated as a hint or suggestion as part of the product UX. Even the negative variant still serves as a non-critical message. Therefore, it shouldn't be announced via screen reader—neither assertively (`role="alert"`) nor politely (`role="status"`).

**Note:** For immediate user feedback, use [InfoPrompt](?path=/docs/prompts-infoprompt--docs) or [InlinePrompt](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) instead.

If you want to provide a custom label for screen readers, you can use the `aria-label` prop. Make sure to include all necessary information in it, because when provided, the default labelling will be removed.

<Source
  dark
  code={`
<ActionPrompt
  aria-label="JFYI: Henry requested 30 USD for lunch"
  media={{ avatar: { imgSrc: 'profile-photo.webp' } }}
  title="Henry requested 30 USD"
  description="Lunch date"
  ...
/>
`}
/>

## Media

You can use `aria-label` on media assets to provide a custom label for screen readers.

<Source
  dark
  code={`
<ActionPrompt
  media={{
    'aria-label': 'Henry Adams photo',
    avatar: { imgSrc: 'profile-photo.webp' },
  }}
  title="Henry requested 30 USD"
  description="Lunch date"
  ...
/>
`}
/>