The contextual menu is a secondary menu which can be applied to any button. The button contains a few aria-attributes:
aria-controls attribute matching the
id of the span containing the menu.
aria-expanded attribute, the value always being the opposite of the
aria-hidden value on the span containing the menu.
aria-haspopup with the value of true.
This component strives to follow WCAG 2.1 (level AA) guidelines, and care must be taken to ensure this effort is maintained when the component is implemented across other projects. This section offers advice to that effect:
role=”button”, in our example we use the native button element.
.p-contextual-menu__toggle, and what it controls via
aria-hidden to true or false accordingly. The
aria-expanded attribute on the control element should change accordingly.
p-contextual-menu__toggle class on a
button element, please ensure that the button label contains a trailing ellipsis
..., e.g. "Take action...". This is a convention used to indicate that the button launches a dialog.