Allow creating Button with attached Menu

[jurokapsiar]

Feature Request

Allow creating Button with attached Menu. The functionality should follow ARIA Navigation Menu example with regards to the rendered DOM structure and keyboard handling. The only difference is that the menu should not be opened on hover, but on click.

Requirements

• menu open on enter/space and focus goes to first item in menu
  -(Optional) Down Arrow: opens the menu and moves focus to the first menu item.
  -(Optional) Up Arrow: opens the menu and moves focus to the last menu item.
• menu is closed on esc key and focus goes back to the button
• if he press TAB key, focus goes naturally to next focusable element after menu and menu is closed
• if he press shift+tab key focus goes naturally to previous focusable element and menu is closed.
• able to do position of menu the same as for popup

DOM structure

<div class="menu_button">
  <button id="menubutton"
          aria-haspopup="true"
          aria-controls="menu2">
    WAI-ARIA Quick Links
  </button>
   <!-- ul/li/a structure rendered by Menu component -->
  <ul id="menu2"
      role="menu"
      aria-labelledby="menubutton">
    <li role="none">
      <a role="menuitem" href="https://www.w3.org/">
        W3C Home Page
      </a>
    </li>

[jurokapsiar]

Based on the discussions, providing reasons why we should use Button and Menu component for this use case and not a Dropdown:

• Dropdown in our case renders a List (role list) and ListItem (role listitem). Dropdown is used when you need to select a value. In this case, you do not select a value, but you choose an item from the menu.

• Styling from dropdown also does not apply - the menu should look exactly like the Menu that we already have. It should not look like the options that are rendered by Dropdown. 

• From focus handling point of view, Dropdown is not focusing the items, the focus stays on the List. For Menu, we need to focus the menu items.

• Menu also allows us to use submenu. Dropdown does not have this possibility.

• For accessibility, Dropdown is adding logic to announce the selected item and the amount of selected items. This should not be the case for the Menu inside of the Button.