User cannot immediately close the message drawer via keyboard after expanding it

Issue

Unable to close message drop down via keyboard

There is no way to collapse the message drop-down via keyboard once it is expanded.

Impact on users

Users with low vision or who rely on using a keyboard only cannot have content overlapped while they are viewing it with no way to close it. It also affects those with attention deficit disorders who need to focus on content without distraction.

Guidelines affected

• 2.1.1 Keyboard (A)
  • All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
• 2.1.3 Keyboard (No Exception) (AAA)
  • All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

Additional notes

To replicate:

1. Navigate to the message drawer toggle icon via keyboard (e.g. by tabbing).
2. Open the message drawer by keyboard (e.g. space or enter)
3. When the message drawer opens, the focus is now somewhere in the drawer itself. However, should the user change his/her mind and decides to close the message drawer, they can't do a simple shift-tab and they have to tab through the whole page again to reach the message drawer toggle icon.