@lwc/aria-reflection

@lwc/aria-reflection

Note: use this code at your own risk. It is optimized for backwards-compatibility, not as a forward-looking polyfill that keeps up to date with web standards.

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 '@lwc/aria-reflection';

The polyfill is applied globally to Element.prototype as soon as the module is 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.