Make file attachment thumbnail actions keyboard accessible
Review Request #10898 — Created Feb. 8, 2020 and updated — Latest diff uploaded
This patch enables users who are not using a mouse to take advantage of the
actions attached to file attachment thumbnails in a review request. When
a file attachment is tabbed to, the menu appears and the actions in the
menu can be tabbed back and forth using tab & shift+tab. An action can be
taken using the enter key.The implementation of the file attachment menu was slightly changed to
accomodate the new behavior. Rather than usingdisplay: none
and
display: block
for the file actions container, we useopacity: 0
and
opacity: 1
to show and hide the container. When we usedisplay: none
,
this prevents the children of the container from being tabbed to. In addition,
using padding for the shadow causes the focus ring to be wider than necessary.
By using margin, we can get a tighter and clearer focus ring with the same
shadow.
Manual testing:
- using tab & shift+tab to navigate to the file attachments, verifying that the
file actions menu is opened and that each item can be selected using the enter key
and the actions menu is closed once the thumbnail loses focusUnit tests:
- testing that the hover event is fired when a mouse is hovered over the thumbnail
- testing that the focus event is fired when the thumbnail is tabbed to