# bpk-component-aria-live

> Backpack aria-live component.

## Installation

```sh
npm install bpk-component-aria-live --save-dev
```

## Usage

```js
import React from 'react';
import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from 'bpk-component-aria-live';

export default () => (
  <>
    <BpkAriaLive>
      Information about an interaction section of the page. This will be visible only to accessibility technologies.
    </BpkAriaLive>

    <BpkAriaLive visible politenessSetting={ARIA_LIVE_POLITENESS_SETTINGS.assertive}>
      Information about an interaction section of the page. This will be visible to everybody.
    </BpkAriaLive>
  </>
);
```

## Props

| Property | PropType | Required | Default Value |
| - | - | - | - |
| className | string | false | null |
| politenessSetting | oneOf([`ARIA_LIVE_POLITENESS_SETTINGS.off`, `ARIA_LIVE_POLITENESS_SETTINGS.polite`, `ARIA_LIVE_POLITENESS_SETTINGS.assertive`]) | false | `ARIA_LIVE_POLITENESS_SETTINGS.polite` |
| visible | bool | false | false |

`aria-relevant` and `aria-atomic` props can also be set.

`aria-relevant` determines what sort of changes should be read out. By default it is `additions` but can be `removals` or `all`. [Read more about `aria-relevant` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute).

`aria-atomic` is a boolean which determines whether changes should be read out, or the whole region should be read out. [Read more about `aria-atomic` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Use_Case:_Clock).