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

<Meta title="Prompts/InlinePrompt/Accessibility" />

# Accessibility

Under the hood, `InlinePrompt` 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` icon and the prompt's text content.

## Announcement Behaviour

`InlinePrompt` appears alongside a specific component on the screen (e.g., input fields, list items). It should not be announced via screen reader—neither assertively (`role="alert"`) nor politely (`role="status"`).

**Note:** For immediate user feedback that requires announcement, use [InfoPrompt](?path=/docs/prompts-infoprompt--docs) instead.

## Media Label

You can use the `mediaLabel` prop to override the icon's accessible name announced by screen readers. This is especially useful for custom icons or when you want to provide more context than the default sentiment label.

By default, sentiment icons have these labels:

- `positive`: "Success:"
- `negative`: "Error:"
- `warning`: "Warning:"
- `neutral`: "Information:"
- `proposition`: No label (GiftBox icon is decorative by default)

<Source
  dark
  code={`
<InlinePrompt 
  media={<Travel />} 
  sentiment="positive" 
  mediaLabel="Travel feature enabled: "
>
  Your travel account is set up and ready to use.
</InlinePrompt>

<InlinePrompt 
  media={<Clock />} 
  sentiment="warning" 
  mediaLabel="Delayed processing: "
>
  The account verification is taking longer than usual.
</InlinePrompt>
`}
/>

## Muted State

When a prompt is associated with a disabled component, use the `muted` prop to visually indicate the relationship while keeping the prompt accessible and interactive. The prompt remains keyboard accessible and can include interactive elements like links.

<Source
  dark
  code={`
<InlinePrompt muted sentiment="warning" mediaLabel="Feature locked: ">
  Please <Link href="#">confirm your residential address</Link> to activate this feature.
</InlinePrompt>
`}
/>

The muted state uses a special backslash circle icon to indicate the disabled relationship, but the prompt itself remains fully accessible to screen readers and keyboard users.