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