Package Exports

@lwc/aria-reflection
@lwc/aria-reflection/dist/index.cjs.js
@lwc/aria-reflection/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lwc/aria-reflection) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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.