@lwc/aria-reflection

@lwc/aria-reflection

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); // true
element.ariaPressed = false;
console.log(element.getAttribute('aria-pressed')); // false

Note that the attribute aria-pressed is reflected to the property ariaPressed, and vice versa.

Usage

npm install @lwc/aria-reflection

import { applyAriaReflection } from '@lwc/aria-reflection';

applyAriaReflection();

The polyfill is applied as soon as the function is executed.

Optionally, you can pass in a custom prototype:

applyAriaReflection(MyCustomElement.prototype);

By default, the polyfill is applied to the global Element.prototype.

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.