AriaMenuMixin

Purpose: Help menu-like components expose their selection state to screen readers and other assistive technologies via ARIA accessibility attributes. This allows components to satisfy the Gold Standard criteria Declared Semantics (Does the component expose its semantics by wrapping/extending a native element, or using ARIA roles, states, and properties?).

This mixin primarily works in the updates phase of the Elix render pipeline:

events → methods → setState → updates → render DOM → post-render

Expects the component to provide:

  • state.selectedIndex property indicating the index of the currently selected item. This is usually provided by SingleSelectionMixin.
  • items property representing the items that can be selected. This is usually provided by ContentItemsMixin.

Provides the component with:

  • updates property that RenderUpdatesMixin can use to update ARIA attributes on the component's host element and its contained items.

Usage

import AriaMenuMixin from 'elix/src/AriaMenuMixin.js';
class MyElement extends AriaMenuMixin(HTMLElement) {}

Elix mixins and components support universal access for all users. The work required to properly expose the selection state of a component in ARIA is complex, but thankfully fairly generalizable. AriaMenuMixin provides a reasonable baseline implementation of ARIA support for list components. (Another important aspect of supporting universal access is to provide full keyboard support. See KeyboardMixin and its related mixins.)

Accessibility

AriaMenuMixin works very similarly to AriaListMixin; see that page for details. The primary differences are that AriaMenuMixin:

  • Sets a default role of menu on the element.
  • Sets a default role of menuitem on the element's assigned items.
  • Sets aria-checked to true on the selected item.

API

Used by class Menu.