Make file attachment thumbnail actions keyboard accessible
Review Request #10898 — Created Feb. 8, 2020 and updated
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
Description | From | Last Updated |
---|---|---|
This RB enables users, Should RB be "patch" or "review request"? |
mike_conley | |
We can combine this with the definition of this._$file. Note that in ES6 we also now prefer the native function.bind() … |
david | |
This should have an "Args" section documenting what e is. |
david | |
This needs an "Args:" section. |
david | |
What listens for this? |
mike_conley |
- Change Summary:
-
Finish implementation of keyboard nav in the file actions. Attach videos of previous behaviour + new behaviour and update RB description.
- Summary:
-
[WIP] Show file actions on file attachment focusShow file actions on file attachment focus
- Description:
-
~ 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 but individual options at the moment can't be selected. The styling/positioning of the menu is also a little off.
~ 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
anddisplay: block
for the file actions container, we useopacity: 0
andopacity: 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. - Commit:
-
36cf04319223581ab943c99d4c08d31b4dec40b7700c1d4614431d447a2f291cf50f18f6fb1b946d
- Diff:
-
Revision 2 (+36 -21)
- Removed Files:
- Added Files:
Checks run (2 succeeded)
- Change Summary:
-
Add tests
- Commit:
-
700c1d4614431d447a2f291cf50f18f6fb1b946d84a721fde5df4e7be4d10d462f03493b7d0b05c9
Checks run (2 succeeded)
- Change Summary:
-
Fix description & testing sections
- Description:
-
~ 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.
~ 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
anddisplay: block
for the file actions container, we useopacity: 0
andopacity: 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.~ 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 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. - Testing Done:
-
~ Manual testing & new unit tests.
~ 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
- Change Summary:
-
Fix issues from review.
- Commit:
-
84a721fde5df4e7be4d10d462f03493b7d0b05c9cd88d227751a9f9b688e72e37ad5bf7373dc3a9a
Checks run (2 succeeded)
- Description:
-
~ This RB enables users who are not using a mouse to take advantage of the
~ 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
anddisplay: block
for the file actions container, we useopacity: 0
andopacity: 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.