#28822 closed defect (bug) (fixed)
Media Grid: Focus doesn't change when tabbing through selected items
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 4.0 | Priority: | normal |
Severity: | normal | Version: | 4.0 |
Component: | Media | Keywords: | |
Focuses: | accessibility, javascript | Cc: |
Description
Summary: When using the new media grid bulk edit mode with the keyboard, the focus fails to change when tabbing through already selected items.
Steps to reproduce:
- Go to the media grid view (you'll need some media items in there)
- Select bulk edit mode
- Tab through media items hitting the space key to select them.
- Select two or more items
- The last selected item will have the blue border and tick
- Now tab back through previously selected items
- The blue remains on the last item and it's not clear where focus is because selected item styling now overrides the focus styling.
Attaching screenshot which shows three selected media items. The focus is on the middle item, but as can be seen that's not at all clear from the visual clues.
Attachments (7)
Change History (38)
#1
follow-up:
↓ 2
@
11 years ago
- Keywords needs-patch added
- Milestone changed from Awaiting Review to 4.0
When I selected multiple items each item gets the blue border, see https://cloudup.com/c4S1khO5cSv. Thats different from the gallery modal, where only the selected one has the blue border, see https://cloudup.com/c4B3dCm-gCw.
The missing focus styles for selected items is also an issue in the modal.
Tested in Chrome.
#2
in reply to:
↑ 1
@
11 years ago
Replying to ocean90:
When I selected multiple items each item gets the blue border, see https://cloudup.com/c4S1khO5cSv. Thats different from the gallery modal, where only the selected one has the blue border, see https://cloudup.com/c4B3dCm-gCw.
That's intentional. When creating a gallery the last selected attachment has a blue border to highlight what attachment has detail focus in the right sidebar. In the media grid, there is no detail focus for bulk select. An attachment is either selected or not, so they all have the same weight.
#3
@
11 years ago
- Summary changed from Focus doesn't change when tabbing through selected items in the media grid to Media Grid: Focus doesn't change when tabbing through selected items
#5
@
11 years ago
In attachment:28822.diff, add proper focus box-shadow styles for selected attachments.
This ticket was mentioned in IRC in #wordpress-ui by accessiblejoe. View the logs.
11 years ago
#8
@
11 years ago
28822.2.diff refresh against trunk
Here is a screencast with the patch applied.
The double tab issue is already present in trunk and appears unrelated to this patch.
This ticket was mentioned in IRC in #wordpress-ui by davidakennedy. View the logs.
10 years ago
#10
@
10 years ago
- Keywords dev-feedback close added; needs-patch removed
This is no loner an issue in trunk, the new bulk edit mode styling is different. the final item does not get a persistent blue border. focus is easy to see. arrows work better than tabs, that's a separate issue!
#11
in reply to:
↑ 6
;
follow-up:
↓ 12
@
10 years ago
- Keywords needs-patch added; dev-feedback close removed
Replying to wonderboymusic:
Requires 2 tabs to focus when moving between items...
This is still an issue. Tested in Chrome on OSX.
#12
in reply to:
↑ 11
;
follow-up:
↓ 13
@
10 years ago
Comparing the media grid bulk select mode to the insert gallery bulk select mode, the tabbing works the same - one tab takes you into the checkbox, the next tab takes you to the next image; the problem here is there is no indication that you are in the checkbox (missing focus style?) and keyboard enter seems to fail to change the selection some times.
insert gallery bulk selection: https://cloudup.com/cDmxOas0LBv
media grid bulk select: https://cloudup.com/cP9ZA26wV-k
one solution would be to not make the checkbox focusable in the media grid bulk select mode - since actioning the image has the same effect anyway. the other would be to have the checkbox behave more like it does in the gallery selector - change when focused and handle enter event. which do you think makes more sense?
Replying to ocean90:
Replying to wonderboymusic:
Requires 2 tabs to focus when moving between items...
This is still an issue. Tested in Chrome on OSX.
#13
in reply to:
↑ 12
@
10 years ago
Replying to adamsilverstein:
Fun! :(
So we have three states:
1) insert gallery bulk selection:
- after some tabbing the first attachment has focus
- pressing enter the attachment makes the attachment selected and the Attachment Details is in focus
- now you have to tab multiple times to get back to the attachments
- when the selected attachment is in focus again and you press enter nothing happens
- on next tab the checkbox is in focus, pressing enter deselects the attachment
2) regular browser in modal:
- after some tabbing the first attachment has focus itself
- after pressing enter the attachment is selected and the Attachment Details is in focus
- now you have to tab multiple times to get back to the attachments
- when the selected attachment is in focus and you press enter the attachment is deselected
- after pressing enter the attachment is selected again and the Attachment Details is in focus
- now you have to tab multiple times to get back to the attachments
- when the selected attachment is in focus and you tab on more the checkbox is in focus, you see the minus
- after pressing enter the Attachment Details is in focus
3) media grid bulk select:
- after some tabbing the first attachment has focus
- after pressing enter the attachment is selected
- next tab brings something into focus, but it's not visible, pressing enter doesn't change anything
- on next tab the next attachment has focus
Weird stuff is in bold.
This ticket was mentioned in IRC in #wordpress-ui by davidakennedy. View the logs.
10 years ago
#15
@
10 years ago
I think we can just take the checkbox out of the tab order when not creating a collection (gallery/playlist) - actioning the whole item with the keyboard works the same in the other contexts. In collection mode, you do get some visual change, although not much - just the icon.
#17
@
10 years ago
In 28822.3.diff:
- Don't make checkboxes tabbable when in bulk select media grid mode, fixes tabbing in bulk select mode
screencast: https://cloudup.com/cjoR2TE7gs4
@
10 years ago
toggle selection when clicking (or keyboard enter) on a selected image in grid bulk select mode
#18
@
10 years ago
In 28822.4.diff:
- Allow toggle selection of grid items - when clicking or hitting enter on an already selected image, deselect it (instead of trying to select it again and actually doing nothing). Resolves #1 above.
#19
@
10 years ago
- Focuses javascript added
- Keywords has-patch dev-feedback added; needs-patch removed
In 28822.5.diff:
- Allow checkbox enter key action in media modal to unselect item. Fixes last item in #2 above . Needs more testing, sometimes checkbox doesn't deselect.
#20
@
10 years ago
Patches .3, .4 and .5 above each address discrete issues raised in #comment:13 above. Keeping them discrete so their purpose is clear, apply all three for best results.
#22
follow-up:
↓ 24
@
10 years ago
Seems like 28822.4.diff
is unnecessary... ? appears to already work.
#23
@
10 years ago
28822.5.diff
works but media.view.Attachment.toggleSelection()
is firing twice, which is why it sometimes toggles against a race condition
#24
in reply to:
↑ 22
@
10 years ago
Replying to wonderboymusic:
Seems like
28822.4.diff
is unnecessary... ? appears to already work.
yep, think you are right, not needed.
#26
@
10 years ago
- Keywords has-patch dev-feedback removed
I think some of the comments here have kind of wandered away from the ticket itself. The only thing I see left here is to visually differentiate the focus styling for a selected item that has focus. - probably some combination of color and glow. Anything else should likely be moved to a different ticket.
This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.
10 years ago
This ticket was mentioned in IRC in #wordpress-dev by celloexpressions. View the logs.
10 years ago
#30
@
10 years ago
Testing 28822.6.diff - looks good!
Middle of the three items has focus in this screenshot