Menu Button: High Contrast Support

Example

When button does not have focus, CSS border property is set to 1px.
When button does have focus, CSS border property is set to 3px and padding is reduced by 2px.
When menuitem does not have focus, CSS border property is set to none.
When menuitem does have focus, CSS border property is set to 2px and padding is reduced by 2px.

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.