AriaMenuMixin

Overview

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 middle of the Elix render pipeline:

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

Expects the component to provide:

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

Provides the component with:

• internal.render method that applies ARIA attributes to the component's host element and its contained items.

Usage

import AriaMenuMixin from "elix/src/base/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.