dialog: dragging/resizing of modeless dialogs not keyboard accessible

WCAG Level

Level A

Priority

Medium

Pages/screens/components affected

Dialog

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.

Modeless Draggable Resizable Dialogs currently don't offer any method for keyboard users to drag nor resize. This functionality is limited to mouse/touch users only.

An example draggable/resizable dialog

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, the impact will depend on how important the ability to drag/resize the dialog is in the application where it's being used. If it's essential that users be able to move them in order to properly see the underlying content of the page, then this will obviously have a larger impact than if this was simply a "nice to have" feature.

Required solution

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

In this case, consider adding explicit "move" and "resize" buttons that can be focused and activated/toggled by keyboard users. Once toggled, they could respond to cursor key interactions, or even provide visible focusable buttons, to allow a change in position/size of the dialog.

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:

Check that all interactive elements can be navigated to using the tab key.
Check that all interactive elements can be activated using the enter or space keys.
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:

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.