Documentation

Class

AashDropdownMenuComponent

AashDropdownMenu~AashDropdownMenuComponent(props)

A component that generates a dropdown menu with all required ARIA attributes.

The DOM is generated as shown in the WAI-ARIA Authoring Practices 1.1

Example:

<div id="language-selector" class="aash-dropdown-menu">
 <button type="button" aria-haspopup="menu"
  aria-controls="language-selector-menu" aria-expanded="true">
  <span>Language</span>
 </button>
 <ul id="language-selector-menu" role="menu">
  <li role="none">
   <button type="button" role="menuitem">English</button>
  </li>
  <li role="none">
   <button type="button" role="menuitem">German</button>
  </li>
 </ul>
</div>
Constructor

# new AashDropdownMenuComponent(props)

Parameters:
Name Type Description
props Object

The properties
id string

The id for the enclosing div
label string

The text of the button that opens the menu
items Array

The menu items as an array with elements of type MenuItem ([ string | (() => string), any ]). Each item consists of two elements, the first being the label of the menu item (a string) or a function that returns the label and the second being an opaque value to forward information to the action function that is invoked when the item has been chosen
l10n function

A function invoked with a menu item's label (of type string) as argument before the label is rendered
action function

A function that is invoked when an item has been chosen. The chosen item, i.e. the entry from the list of items is passed as an argument.

View Source components/dropdown-menu/AashDropdownMenu.ts, line 6