makeup-menu

makeup-menu

A JavaScript class that represents an ARIA menu. No CSS provided.

View Demo.

HTML

The following markup structure and classnames are required. Any SVG icons can be used.

Stateless Menu

<div class="menu">
  <div class="menu__items" role="menu">
    <div class="menu__item" role="menuitem">
      <span>Item 1</span>
    </div>
    <div class="menu__item" role="menuitem">
      <span>Item 2</span>
    </div>
    <div class="menu__item" role="menuitem">
      <span>Item 3</span>
    </div>
  </div>
</div>

Single-Select Menu

<div class="menu">
  <div class="menu__items" role="menu">
    <div class="menu__item" role="menuitemradio" aria-checked="true" data-menuitemradio-name="sort">
      <span>Item 1</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
    <div class="menu__item" role="menuitemradio" aria-checked="false" data-menuitemradio-name="sort">
      <span>Item 2</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
    <div class="menu__item" role="menuitemradio" aria-checked="false" data-menuitemradio-name="sort">
      <span>Item 3</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
  </div>
</div>

Multi-Select Menu

<div class="menu">
  <div class="menu__items" role="menu">
    <div class="menu__item" role="menuitemcheckbox" aria-checked="true" data-menuitemcheckbox-name="filter">
      <span>Item 1</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
    <div class="menu__item" role="menuitemcheckbox" aria-checked="false" data-menuitemcheckbox-name="sort">
      <span>Item 2</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
    <div class="menu__item" role="menuitemcheckbox" aria-checked="false" data-menuitemcheckbox-name="sort">
      <span>Item 3</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
  </div>
</div>

Grouped Menu

<div class="menu">
  <div class="menu__items" role="menu">
    <div class="menu__item" role="menuitem">
      <span>Item A1</span>
    </div>

    <hr class="menu__separator" role="separator" />

    <div class="menu__item" role="menuitemradio" aria-checked="true" data-makeup-group="sort">
      <span>Item B1</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
    <div class="menu__item" role="menuitemradio" aria-checked="false" data-makeup-group="sort">
      <span>Item B2</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
    <div class="menu__item" role="menuitemradio" aria-checked="false" data-makeup-group="sort">
      <span>Item B3</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>

    <hr class="menu__separator" role="separator" />

    <div class="menu__item" role="menuitemcheckbox" aria-checked="true" data-makeup-group="filter">
      <span>Item C1</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
    <div class="menu__item" role="menuitemcheckbox" aria-checked="true" data-makeup-group="filter">
      <span>Item C2</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
  </div>
</div>

CSS

No CSS is provided. However, the class is fully compatible with eBay Skin.

JavaScript

import Menu from "makeup-menu";

document.querySelectorAll(".menu").forEach(function (el, i) {
  const widget = new Menu(el, config);

  el.addEventListener("makeup-menu-select", function (e) {
    console.log(e.type, e.detail);
  });

  el.addEventListener("makeup-menu-change", function (e) {
    console.log(e.type, e.detail);
  });
});

Config

The constructor takes a configuration object as its second parameter.

todo

Events

makeup-menu-select

Fired when a stateless menu item is activated.

makeup-menu-change

Fired when a radio or checkbox item is toggled.