Blox Material v1.0.0

Menu

Directive for creating a material designed menu. The menu can either be positioned manually, or automatically, by anchoring it to an element.

Accessibility

This directive will automatically apply proper accessibility attributes to the contained list, and its items:

  • All list items will be assigned role="menuitem", and a tabindex="0" attributes.
  • Disabled menu items (use disabled on the item), will be assigned: aria-disabled="true", and tabindex="-1".
  • The list itself will be assigned the role="menu" attribute.

Menu


Last menu choice: <none>

API

Directive: MdcMenuDirective

Selector: [mdcMenu] [mdcSelectMenu]
Exported as: mdcMenu

Directive for a spec aligned material design Menu. This directive should wrap an mdcList. The mdcList contains the menu items (and possible separators).

An mdcMenu element will also match with the selector of the menu surface directive, documented here: mdcMenuSurface. The mdcMenuAnchor API is documented on the same page.

Accessibility

  • For role and aria-* attributes on the list, see documentation for mdcList.
  • The best way to open the menu by user interaction is to use the mdcMenuTrigger directive on the interaction element (e.g. button). This takes care of following ARIA recommended practices for focusing the correct element, and maintaining proper aria-* and role attributes on the interaction element, menu, and list.
  • When opening the mdcMenuSurface programmatic, the program is responsible for all of this. (including focusing an element of the menu or the menu itself).
  • The mdcList will be made focusable by setting a "tabindex"="-1" attribute.
  • The mdcList will get an aria-orientation=vertical attribute.
  • The mdcList will get an aria-hidden=true attribute when the menu surface is closed.
Property Description
@Output()
pick
EventEmitter<MdcMenuSelection>

Event emitted when the user selects a value. The passed object contains a value (set to the value of the selected list item), and an index (set to the index of the selected list item).

Directive: MdcMenuTriggerDirective

Selector: [mdcMenuTrigger]

Accessibility

  • Enter, Space, and Down Arrow keys open the menu and place focus on the first item.

  • Up Arrow opens the menu and places focus on the last item

  • Click/Touch events set focus to the mdcList root element

  • Attribute role=button will be set if the element is not already a button element.

  • Attribute aria-haspopup=menu will be set if an mdcMenu is attached.

  • Attribute aria-expanded will be set while the attached menu is open

  • Attribute aria-controls will be set to the id of the attached menu. (And a unique id will be generated, if none was set on the menu).

  • Enter, Space, and Down-Arrow will open the menu with the first menu item focused.

  • Up-Arrow will open the menu with the last menu item focused.

  • Mouse/Touch events will open the menu with the list root element focused. The list root element will handle keyboard navigation once it receives focus.

Property Description
@Input()
mdcMenuTrigger
MdcMenuDirective

Interface: MdcMenuSelection

Data send by the pick event of MdcMenuDirective.

Property Description
value
any

The value of the selected menu item (MdcListItemDirective).
index
number

The index of the selected menu item (MdcListItemDirective).