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

Package detail

@lwc/aria-reflection

readme

@lwc/aria-reflection

Usage

Implementation