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.

Keywords

FAQs

What is @lwc/aria-reflection?

Is @lwc/aria-reflection popular?

Is @lwc/aria-reflection well maintained?

Package last updated on 21 Nov 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install