MenuButton

From W3C Wiki

Menu button


This might also be called a drop-down button. Pressing the button causes a drop-down menu to display. The user can then select an item from the menu. This image from the Dojo JavaScript Toolkit is an example. The button itself is labeled "Edit". When the button is pressed a drop-down menu appears with three choices: cut, copy, paste.

Keyboard Interaction

  • With focus on the button pressing space or enter will toggle the display of the drop-down menu. Focus remains on the button.
  • With focus on the button and no drop down menu displayed, pressing down arrow will open the drop-down menu and move focus into the menu and onto the first menu item.
  • With focus on the button and the drop-down menu open, pressing down arrow will move focus into the menu onto the first menu item.
  • With focus on the drop-down menu, the up and down arrow keys move focus within the menu items, "wrapping" at the top and bottom.
  • With focus on the drop-down menu, pressing escape closes the menu and returns focus to the button.
  • With focus on the button pressing the tab key will take the user to the next tab focusable item on the page.
  • With focus on the drop-down menu, pressing the tab key will take the user to the next tab focusable item on the page. Note that this may be difficult to achieve on a web page.

Mouse Interaction

  • Clicking on the button toggles opening/closing the associated menu. Focus is set on the button.
  • Clicking on a item in the opened drop-down menu executes the action for that menu item and closes the menu. Focus returns to the button.
  • Mouse out of an opened menu closes the menu and returns focus to the button.
  • Mouse over of an opened menu changes the visual indicator to indicate that it is the current choice. Should mouse over actually set focus? At a minimum the button object needs to know what the current menu item is so the mouse and keyboard can interact.

ARIA Roles and Properties

Option 1:

  • The button receives a role of button with an owns property, if necessary.
  • The drop-down menu has a role of menu. May have a hasparent property depending upon whether or not implementation creates children within the hierarchy of the parent button or not.
  • Each menu item has a role of menuitem. May have a hasparent property depending upon whether or not implementation creates children within the hierarchy of the parent menu.

Option 2:

  • The button receives a role of menu with an owns property depending upon whether or not the drop-down menu is created as a direct child element of the button in the DOM hierarchy.

Example

XHTML Spreadsheet