You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The mdSelect is a type of Material Design Menu that behaves like and resembles a <select>.
Functional requirements
- Menu should be positioned over their "emitting" elements, establishing context
- The selected menu item should not be shown as a duplicate when expanded
- Dismiss menu by selecting an item (unless selecting multiple), tapping outside the menu, or using the Escape key
- Menu animates out from emitting item when expanding
Accessibility requirements
- **mdSelect element**
- `[aria-live="polite"]` makes sure selections are announced in a screen reader. Copy list item text to button only when selection is made with enter/space key, or click (not arrow keys). That way it won't read aloud twice.
- **Button element**
- `[aria-haspopup="true"]` indicates button launches associated input
- `[aria-controls="_listID_"]` links button to options list
- Needs unique ID for pairing with list
- **Unordered list**
- [`role="menu"`](http://www.w3.org/TR/wai-aria/roles#menu) to communicate purpose of list
- `aria-labelledby="_buttonID_"` to pair with button element
- `aria-expanded="true | false"` to indicate when associated panel is expanded
- Unique ID for pairing with button
- `tabindex="-1"`to script focus but remove from tab order
- **Child list items**
- [`role="menuitem"`](http://www.w3.org/TR/wai-aria/roles#menuitem) on each child item
- `tabIndex="-1"` for scripting
Resources
- [WAI-ARIA Listbox](http://www.w3.org/TR/wai-aria/roles#listbox)
- [Using "listbox" and "option" roles vs. "menu" and "menuitem"](http://www.marcozehe.de/2014/03/11/easy-aria-tip-7-use-listbox-and-option-roles-when-constructing-autocomplete-lists/)
The mdSelect is a type of Material Design Menu that behaves like and resembles a
<select>.Functional requirements
- Menu should be positioned over their "emitting" elements, establishing context - The selected menu item should not be shown as a duplicate when expanded - Dismiss menu by selecting an item (unless selecting multiple), tapping outside the menu, or using the Escape key - Menu animates out from emitting item when expandingAccessibility requirements
- **mdSelect element** - `[aria-live="polite"]` makes sure selections are announced in a screen reader. Copy list item text to button only when selection is made with enter/space key, or click (not arrow keys). That way it won't read aloud twice. - **Button element** - `[aria-haspopup="true"]` indicates button launches associated input - `[aria-controls="_listID_"]` links button to options list - Needs unique ID for pairing with list - **Unordered list** - [`role="menu"`](http://www.w3.org/TR/wai-aria/roles#menu) to communicate purpose of list - `aria-labelledby="_buttonID_"` to pair with button element - `aria-expanded="true | false"` to indicate when associated panel is expanded - Unique ID for pairing with button - `tabindex="-1"`to script focus but remove from tab order - **Child list items** - [`role="menuitem"`](http://www.w3.org/TR/wai-aria/roles#menuitem) on each child item - `tabIndex="-1"` for scriptingResources
- [WAI-ARIA Listbox](http://www.w3.org/TR/wai-aria/roles#listbox) - [Using "listbox" and "option" roles vs. "menu" and "menuitem"](http://www.marcozehe.de/2014/03/11/easy-aria-tip-7-use-listbox-and-option-roles-when-constructing-autocomplete-lists/)