Make file attachment thumbnail actions keyboard accessible

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

hxqlin
Review Board
master
cd88d22...
reviewboard

This RB 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
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 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

Loading file attachments...

Description From Last Updated

We can combine this with the definition of this._$file. Note that in ES6 we also now prefer the native function.bind() ...

daviddavid

This should have an "Args" section documenting what e is.

daviddavid

This needs an "Args:" section.

daviddavid
hxqlin
hxqlin
hxqlin
hxqlin
hxqlin
david
  1. 
      
  2. We can combine this with the definition of this._$file. Note that in ES6 we also now prefer the native function.bind() over the underscore _.bind() method.

    this._$file = this.$('.file')
        .focusin(this._onHoverOrFocusIn.bind(this))
        .focusout(this._onHoverOrFocusOut.bind(this));
    
  3. This should have an "Args" section documenting what e is.

  4. This needs an "Args:" section.

  5. 
      
hxqlin
Review request changed

Change Summary:

Fix issues from review.

Commit:

-84a721fde5df4e7be4d10d462f03493b7d0b05c9
+cd88d227751a9f9b688e72e37ad5bf7373dc3a9a

Diff:

Revision 4 (+81 -21)

Show changes

Checks run (2 succeeded)

flake8 passed.
JSHint passed.
Loading...