@lwc/aria-reflection-polyfill
Polyfill for ARIA string reflection on Elements.
This is part of the Accessibility Object Model (AOM).
For example:
element.setAttribute('aria-pressed', 'true');
console.log(element.ariaPressed);
element.ariaPressed = false;
console.log(element.getAttribute('aria-pressed'));
Note that the attribute aria-pressed
is reflected to the property ariaPressed
, and vice versa.
Usage
npm install @lwc/aria-reflection-polyfill
import '@lwc/aria-reflection-polyfill';
The polyfill is applied as soon as it's imported.
Implementation
The polyfill patches these standard properties:
- ariaAtomic
- ariaAutoComplete
- ariaBusy
- ariaChecked
- ariaColCount
- ariaColIndex
- ariaColSpan
- ariaCurrent
- ariaDisabled
- ariaExpanded
- ariaHasPopup
- ariaHidden
- ariaInvalid
- ariaKeyShortcuts
- ariaLabel
- ariaLevel
- ariaLive
- ariaModal
- ariaMultiLine
- ariaMultiSelectable
- ariaOrientation
- ariaPlaceholder
- ariaPosInSet
- ariaPressed
- ariaReadOnly
- ariaRelevant
- ariaRequired
- ariaRoleDescription
- ariaRowCount
- ariaRowIndex
- ariaRowSpan
- ariaSelected
- ariaSetSize
- ariaSort
- ariaValueMax
- ariaValueMin
- ariaValueNow
- ariaValueText
- role
As well as these currently non-standard properties:
- ariaActiveDescendant
- ariaControls
- ariaDescribedBy
- ariaDetails
- ariaErrorMessage
- ariaFlowTo
- ariaLabelledBy
- ariaOwns
To determine which browsers already support ARIA reflection, see this test.