Make file attachment thumbnail actions keyboard accessible

Review Request #10898 — Created Feb. 8, 2020 and updated — Latest diff uploaded


Review Board


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 using display: none and
display: block for the file actions container, we use opacity: 0 and
opacity: 1 to show and hide the container. When we use display: 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

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 focus

Unit 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