JSPM

@lwc/aria-reflection

8.15.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17552
  • Score
    100M100P100Q152944F
  • License MIT

ARIA element reflection polyfill for strings

Package Exports

    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 (@lwc/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

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