Menu Button: Keyboard Focus Styling

Example

Focus and hover provide a visual border using CSS border property and background color change.

Button element has the default role of button.
aria-haspopup="true" attribute.
aria-controls attribute references the id of the element with the menu role.
aria-expanded="true" when menu is open, otherwise attribute is not present.
Accessible name for the button comes from the text content of the button element.

Container ul element has the role="menu".
Container ul element has the aria-labelledby="id-mb" to provide an accessible name for the menu.
a elements have the role="menuitem".
li elements have the role="none", since the list item semantics are not needed due to the menuitem roles being on the a elements.
Accessible name for the menu items comes from the text content of the anchor elements.