bpk-component-aria-live

Backpack aria-live component.

Installation

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

Usage

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.

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.