bpk-component-aria-live
v3.2.2
Published
Backpack aria-live component.
Downloads
103
Maintainers
Keywords
Readme
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 text
but can be additions
, 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.