Devices menu in admin interface does not use standard controls

[keelanfh]

Steps to replicate

• Create a new step by step overview
• Tab till you get to Preview Page layout
• Press enter to open the menu
• Press tab to go round the elements in the menu.

Expected results

• The menu should be dismissible when it is opened by the Esc key,
• Tabbing off the menu with tab key should close the menu
• Correct state information is provided when the menu is opened and closed
• Aria principles for toolbars or menus are applied so that the menu can be accessed by keyboard only users and screen reader users and would meet the WCAG 2.1 guidelines.

Actual results

• You can’t close the menu while you are on it, Esc does not close the menu
• If you tab through all the element and off the menu to the next item Preview button, the menu remains on screen and does not close.
• It announces the toggle button has not been pressed before the button is activated it does not announce the toggle button has been pressed after it is pressed when the menu is on screen so is not giving correct state information.
• Although this appears to be a menu it has not been programmed using WAI-ARIA principles which would ensure it was accessible and be useable with keys for menus.

WCAG 2.1 reference

2.1.1. All functionality is operable with a keyboard. https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html 4.1.2 Use standard controls, or ensure that non-standard controls are properly marked up using WAI-ARIA https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html