@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 property/attribute reflections:

Property	Attribute
ariaAtomic	aria-atomic
ariaAutoComplete	aria-autocomplete
ariaBrailleLabel	aria-braillelabel
ariaBrailleRoleDescription	aria-brailleroledescription
ariaBusy	aria-busy
ariaChecked	aria-checked
ariaColCount	aria-colcount
ariaColIndex	aria-colindex
ariaColIndexText	aria-colindextext
ariaColSpan	aria-colspan
ariaCurrent	aria-current
ariaDescription	aria-description
ariaDisabled	aria-disabled
ariaExpanded	aria-expanded
ariaHasPopup	aria-haspopup
ariaHidden	aria-hidden
ariaInvalid	aria-invalid
ariaKeyShortcuts	aria-keyshortcuts
ariaLabel	aria-label
ariaLevel	aria-level
ariaLive	aria-live
ariaModal	aria-modal
ariaMultiLine	aria-multiline
ariaMultiSelectable	aria-multiselectable
ariaOrientation	aria-orientation
ariaPlaceholder	aria-placeholder
ariaPosInSet	aria-posinset
ariaPressed	aria-pressed
ariaReadOnly	aria-readonly
ariaRelevant	aria-relevant
ariaRequired	aria-required
ariaRoleDescription	aria-roledescription
ariaRowCount	aria-rowcount
ariaRowIndex	aria-rowindex
ariaRowIndexText	aria-rowindextext
ariaRowSpan	aria-rowspan
ariaSelected	aria-selected
ariaSetSize	aria-setsize
ariaSort	aria-sort
ariaValueMax	aria-valuemax
ariaValueMin	aria-valuemin
ariaValueNow	aria-valuenow
ariaValueText	aria-valuetext
role	role

As well as these non-standard reflections:

Property	Attribute
ariaActiveDescendant	aria-activedescendant
ariaControls	aria-controls
ariaDescribedBy	aria-describedby
ariaDetails	aria-details
ariaErrorMessage	aria-errormessage
ariaFlowTo	aria-flowto
ariaLabelledBy	aria-labelledby
ariaOwns	aria-owns

To determine which browsers support ARIA reflection, see the relevant Web Platform Tests for ARIA string reflection and ARIA element reflection.