Package Exports

@catherineorg/kwc-aria-reflection
@catherineorg/kwc-aria-reflection/dist/index.cjs.js
@catherineorg/kwc-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 (@catherineorg/kwc-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

@catherineorg/kwc-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 @catherineorg/kwc-aria-reflection

import '@catherineorg/kwc-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.