How it works
The contextual menu is a secondary menu which can be applied to any button. The button contains a few aria-attributes:
aria-controlsattribute matching the
idof the span containing the menu.
aria-expandedattribute, the value always being the opposite of the
aria-hiddenvalue on the span containing the menu.
aria-haspopupwith the value of true.
- Keyboard interaction:
- The Enter and space keys opens the menu
- The Escape closes the menu
- When the menu is open, the Tab key will move through the menu items and once it leaves the final item, the menu closes. AT will then announce the pop up has collapsed.
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:
- The control element should have the
role=”button”, in our example we use the native button element.
.p-contextual-menu__toggle, and what it controls via
- The target element is shown/hidden by changing
aria-hiddento true or false accordingly. The
aria-expandedattribute on the control element should change accordingly.
- When using the
p-contextual-menu__toggleclass on a
buttonelement, 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.