material-web icon indicating copy to clipboard operation
material-web copied to clipboard

mdc-drawer - modal drawer cannot be closed via keyboard

Open christophe-g opened this issue 4 years ago • 3 comments

Describe the bug Modal drawers cannot be closed via keyboard (or at least, I could not find how), making them un-usable for screen reader users.

To Reproduce

  • Go to https://material-components.github.io/material-components-web-components/demos/drawer/
  • Tab to the icon opening the modal drawer.
  • open drawer
  • try to close with keyboard

Expected behavior

Esc key should close the drawer.

Additional context Esc key should close all types of closable drawers. However, the bug is less serious with dissmisable drawers as it is possible to tab to the menu icon to close it in this case.

christophe-g avatar May 28 '21 13:05 christophe-g

Edit: Pressing esc when a element on the drawer has focus indeed closes the drawer. But is it not straightforward (the drawer doe not get focus on open and it might not have any focusable item). The keypress or keydown event listener should be at the document level.

christophe-g avatar May 28 '21 14:05 christophe-g

Some element should autofocus within the drawer. So probably related to #1916 Choosing which is really per use case but the ability is missing 👆

Should actually try with plain input to see if it works

yinonov avatar Aug 10 '21 04:08 yinonov

is there any reason/violation not to trigger keydown from document level?

yinonov avatar Aug 16 '21 13:08 yinonov