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

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

# Accessibility

Under the hood, `InfoPrompt` 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 `title` and described by the `description`.

## Announcement Behaviour

`InfoPrompt` is designed for contextual messages that appear within a screen. Unlike `ActionPrompt`, it can be configured to announce to screen readers using ARIA roles:

- **`role="status"`**: Politely announces updates when the screen reader is idle. Use for non-critical success messages or informational updates (e.g., "Your profile has been saved").
- **`role="alert"`**: Immediately interrupts to announce urgent messages. Use for time-sensitive information that requires immediate attention (e.g., errors, warnings, deadlines).

**Default behavior:** Without a role, the prompt won't be announced automatically. Users will encounter it when navigating the page.

<Source
  dark
  code={`
// Polite announcement for non-critical updates
<InfoPrompt
  sentiment="success"
  description="Your profile has been saved"
  role="status"
/>

// Immediate announcement for urgent messages

<InfoPrompt
  sentiment="negative"
  title="Session expired"
  description="Your session has expired. Please log in again."
  role="alert"
/>
`}
/>

## Custom Labels

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={`
<InfoPrompt
  sentiment="negative"
  title="Payment failed"
  description="Unable to process payment."
  aria-label="Critical error: Your payment could not be processed. Please update your payment method and try again within 24 hours."
/>
`}
/>

## Media

Custom media icons should include their own accessibility attributes. Use the `title` prop on icons to provide accessible names for screen readers:

<Source
  dark
  code={`
<InfoPrompt
  sentiment="success"
  description="Your travel account is ready!"
  media={{ asset: <Travel title="Travel feature" /> }}
/>

<InfoPrompt
  sentiment="warning"
  title="Business travel"
  description="Book your business trip with Wise."
  media={{ asset: <Briefcase title="Business" /> }}
/>
`}
/>

**Note:** Unlike `ActionPrompt` (which uses `media['aria-label']`) and `InlinePrompt` (which uses `mediaLabel`), `InfoPrompt` requires you to add accessibility attributes directly to the icon component you pass.