WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#28822 closed defect (bug) (fixed)

Media Grid: Focus doesn't change when tabbing through selected items

Reported by: philipjohn Owned by: helen
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords:
Focuses: accessibility, javascript Cc:
PR Number:

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:

  1. Go to the media grid view (you'll need some media items in there)
  2. Select bulk edit mode
  3. Tab through media items hitting the space key to select them.
  4. Select two or more items
  5. The last selected item will have the blue border and tick
  6. Now tab back through previously selected items
  7. 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)

media-grid-focus-on-multi-select.png (104.5 KB) - added by philipjohn 5 years ago.
Middle of the three items has focus in this screenshot
28822.diff (709 bytes) - added by ericlewis 5 years ago.
28822.2.diff (771 bytes) - added by adamsilverstein 5 years ago.
refresh against trunk
28822.3.diff (835 bytes) - added by adamsilverstein 5 years ago.
don't make checkboxes tabable in media grid bulk select mode
28822.4.diff (556 bytes) - added by adamsilverstein 5 years ago.
toggle selection when clicking (or keyboard enter) on a selected image in grid bulk select mode
28822.5.diff (578 bytes) - added by adamsilverstein 5 years ago.
deselect on .check enter, even in insert media modal
28822.6.diff (544 bytes) - added by celloexpressions 5 years ago.
Update media modal attachment-focus-styling changes in 4.0 in color schemes.

Download all attachments as: .zip

Change History (38)

@philipjohn
5 years ago

Middle of the three items has focus in this screenshot

#1 follow-up: @ocean90
5 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 @ericlewis
5 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 @ericlewis
5 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

@ericlewis
5 years ago

#5 @ericlewis
5 years ago

In attachment:28822.diff, add proper focus box-shadow styles for selected attachments.

#6 follow-up: @wonderboymusic
5 years ago

Requires 2 tabs to focus when moving between items...

This ticket was mentioned in IRC in #wordpress-ui by accessiblejoe. View the logs.


5 years ago

@adamsilverstein
5 years ago

refresh against trunk

#8 @adamsilverstein
5 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.


5 years ago

#10 @adamsilverstein
5 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: @ocean90
5 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: @adamsilverstein
5 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 @ocean90
5 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.


5 years ago

#15 @helen
5 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.

#16 @helen
5 years ago

Also discovered some issues with keyboard movement while looking at this: #29303, #29304.

@adamsilverstein
5 years ago

don't make checkboxes tabable in media grid bulk select mode

#17 @adamsilverstein
5 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

@adamsilverstein
5 years ago

toggle selection when clicking (or keyboard enter) on a selected image in grid bulk select mode

#18 @adamsilverstein
5 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.

@adamsilverstein
5 years ago

deselect on .check enter, even in insert media modal

#19 @adamsilverstein
5 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 @adamsilverstein
5 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.

#21 @wonderboymusic
5 years ago

In 29585:

Media Grid: Don't make checkboxes tabbable when in bulk select media grid mode, fixes tabbing in bulk select mode.

Props adamsilverstein.
See #28822.

#22 follow-up: @wonderboymusic
5 years ago

Seems like 28822.4.diff is unnecessary... ? appears to already work.

#23 @wonderboymusic
5 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 @adamsilverstein
5 years ago

Replying to wonderboymusic:

Seems like 28822.4.diff is unnecessary... ? appears to already work.

yep, think you are right, not needed.

#25 @helen
5 years ago

  • Owner set to helen
  • Status changed from new to accepted

#26 @helen
5 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.


5 years ago

#28 @helen
5 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 29607:

Media:

  • Make attachment focus styles more obvious, particularly for already selected items.
  • Fix styling for the selection set attachments.
  • Remove some CSS cruft.

fixes #28822.

@celloexpressions
5 years ago

Update media modal attachment-focus-styling changes in 4.0 in color schemes.

This ticket was mentioned in IRC in #wordpress-dev by celloexpressions. View the logs.


5 years ago

#30 @adamsilverstein
5 years ago

Testing 28822.6.diff - looks good!

#31 @helen
5 years ago

In 29614:

Media: Fix keying of selected attachments to color schemes.

props celloexpressions. see #28822.

Note: See TracTickets for help on using tickets.