search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
447 stars 83 forks source link

app-layout: modal drawer can't be closed with the keyboard #123

Open TetraLogicalHelpdesk opened 3 years ago

TetraLogicalHelpdesk commented 3 years ago

WCAG Level

Level A

Priority

High

Pages/screens/components affected

Description

Good design means supporting different modes of interaction, because there are many reasons why someone might use a keyboard instead of a mouse, and if keyboard interaction is not fully supported the website is effectively unusable.

On smaller screens/viewports, the app layout drawer behaves like a modal dialog. There is no visible control for keyboard users to close the drawer, and pressing Esc also has no effect.

The app layout drawer on small screens, shown as a side modal

Note that because currently the modal-like drawer does not contain keyboard focus, there nominally is a way for keyboard users to navigate back out of the modal and close the drawer by activating the hamburger menu button. However, as the current focus behaviour is incorrect (noted in a separate issue), and as the control is effectively invisible to users, it is not sufficient to pass this WCAG requirement.

User impact

Someone with mobility problems will often use a keyboard instead of a mouse to navigate a web page. A screen reader user will also tend to use a keyboard if they cannot see the screen to use the mouse. Therefore if the website does not properly support keyboard interaction a large number of people are effectively prevented from using it.

In this case, sighted keyboard users will not be able to operate a page using the app layout drawer on a small viewport/screen - once they open the drawer, they will not be able to close it (and remove the semi-transparent overlay that hangs over the underlying page).

Required solution

Make sure that all interactive controls can be used with a keyboard.

In this case, when the drawer acts as a modal dialog, we recommend adding an explicit close control to the drawer (which could take the form of an "X"/Close button, or a "< Back" option at the top of the drawer) that is keyboard-accessible and clearly visible to users. In addition, consider also closing the drawer when the user presses the Esc key.

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:

  1. Check that all interactive elements can be navigated to using the tab key.
  2. Check that all interactive elements can be activated using the enter or space keys.
  3. Check that interactive elements can be interacted with using the arrow keys.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

Related standards

More information

Test data

Test date: March 2021 Website: vaadin.com/components, vaadin.com/docs-beta

rolfsmeds commented 2 years ago

The same API as for dialogs would probably make sense here: Esc closes the drawer unless specifically disabled through the noCloseOnEsc.

DiegoCardoso commented 1 year ago

Closed PR #5831 adding the feature to disable the Esc until we decide whether it's worth adding it.

PR #6114 is a small refactor that moves the previous keydown listener from the drawer element to the body, so we user can dismiss the drawer in case the focus moves out.