context-menu: small-screen nested menus and mouse hover #118
Description
WCAG Level
Level AA
Priority
High
Pages/screens/components affected
Description
Content (such as a dropdown menu or a popover) that appears when a user hovers a pointer (such as a mouse) over, or moves focus to, a particular section of the page can often cause problems for users. The content must be dismissable without the need to move the mouse or keyboard focus. The newly displayed content must be hoverable (i.e. not disappear once the users moves their mouse/focus from the element that caused the content to appear). And lastly, the content should be persistent, and not disappear after a set timeout while the user is still focused on, or hovering over, the trigger element or the content itself.
In the case of small screens/viewports, the context-menu with nested menus is extremely difficult to use for mouse users. As soon as the mouse hovers over a context menu item with a submenu, the submenu is opened, covering the previous level in the hierarchy. It is possible for the user to return to the previous level in the menu structure by clicking on the semi-transparent overlay above the context menu, or by pressing the left cursor key (although this is likely not what a user would expect). However, if a mouse user triggers the hover behaviour, and then - without moving the mouse - presses the left cursor key, the submenu is closed but then immediately reopened. If the user tries to close the submenu using Esc, the entire context menu is closed.
User impact
The current behaviour of nested context menus in small viewport/screen scenarios likely assumes that these will be operated by touchscreen (although thankfully they also still work correctly for keyboard users). Low vision users use screen magnification or increased zoom settings, while still operating web content with the mouse. For these users, the current "open on hover" behaviour of the context menu will be frustrating and confusing.
Required solution
In this particular case, the simplest solution is to remove the "open on hover" behaviour of the submenus when the context menu is in small screen view. Instead, only open the submenu when the user explicitly clicks on/activates the item with the submenu.
This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the components, their variants, and the documentation website.
Test procedure(s)
Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the components, their variants, and the documentation website for instances of the same issue:
- on a small screen/viewport, open a nested context menu
- hover over items with a submenu
- verify that the items don't open the submenu on hover
- click on the items
- verify that submenus open on click
Definition of done
Complete all of these tasks before closing this issue or indicating it is ready for retest:
- All issues identified within the test sample have been resolved.
- The rest of the components, their variants, and the documentation website have been tested for the same issue.
- All issues identified throughout the rest of the components/website have been resolved or filed as new issues.
Related standards
More information
Test data
Test date: March 2021
Website: vaadin.com/components, vaadin.com/docs-beta