Media: Keyboard shortcuts

[tomthewebmaster]

It would be nice if you could use the "esc" key to close the new media window, like you can with the old one.

[DrewAPicture]

+1 for this. I've already tried to close it with Esc several times to no effect.

[tomthewebmaster]

It looks like the jquery that controls closing the new media modal via the corner button is in wp-includes/js/media-views.js around line 1616.

I believe the old media window made use of thickbox's javascript to allow the use of the esc key to exit. The relevant code is in wp-includes/js/thickbox/thickbox.js starting on line 249.

Just though I'd post this in case it helps in producing a patch.

[koopersmith]

For 3.5, we should add esc to close and shift+click to select multiple.

[pavelevap]

Shortcut (or small link) for "Select all" feature would be very helpfull.

Example: I use new filter to show only files uploaded to current post and now I want to select all these files at once and insert them into post. I do not want to click 15-times. In this case it would be also fine to insert gallery shortcode without ids to enable automatically displaying all new images uploaded to current post (as it was in current WordPress version).

[lessbloat]

22502.diff​ adds basic focus/keyboard functionality to the new media modal (required to get onclick "esc" to work), and hooks up esc button to close out the modal when pressed.

[tomthewebmaster]

Thanks, lessbloat for posting 22502.diff​. I tested it on Firefox 17, Chrome 23 and Safari 6.0.2 on Mac OS 10.8.2 and found that it worked some of the time for me. I experienced the same results in each of these browsers.

When I first entered the media modal, "Upload Files" was selected (as shown in 22502_screenshot.png). When this, or any of the items in the left column were selected, the esc function worked for me. When I selected some uploaded images, or had nothing at all selected, this patch did not work.

This patch did not work for me in Opera 12.11 on the same Mac.

[koopersmith]

Note that the calls to focus() will be invalid after a fix to #22594 lands.

[lessbloat]

A few improvements in 22502.2.diff:

• Changed initial focus to use $( '.media-menu .active' ).focus();
• Keeps focus in modal when adding a new gallery
• Keeps focus in modal when canceling a gallery
• Esc key to close modal (if/when focus is on modal)
• Make left menu focusable, and tweaked styles (to tone them down)
• Make images in media gallery focusable & selectable/deselectable (and adds dotted outline when focused)

If we can force focus on the modal while it's open somehow, that might be nice (and it would make it so that the ESC click always works).

[koopersmith]

attachment:22502.3.diff​ builds off of the earlier attachments:

• Initial focus should be applied automatically.
• Keeps focus inside the modal. If the focus somehow escapes the modal, restores it to inside the modal (this last bit excludes IE8 and below).
• General code clean up.

I think we should improve the visuals of the attachment focus style — it also triggers whenever you click an attachment, so it needs to mesh tightly with the existing styles.

[koopersmith]

Also, there are a few situations that still lose focus, like tabbing in the sidebar when the field has been changed.

[tomthewebmaster]

I tested 22502.3.diff in Firefox 17.0, Chrome 23.0.1271.95, Safari 6.0.2 and Opera 12.11 on Mac OS 10.8.2.

This patch worked well in allowing me to use the "esc" key to exit the media modal except in a few limited cases. In all the browsers I tested, I was not able to use the "esc" key to exit immediately after clicking to edit a gallery that had already been created from the post window. When working within the media modal, I found a few additional cases where it did not work, presumably because I lost focus, in Firefox and Opera. The cases are recorded below.

In "Upload Files"

• After uploading a new image - Firefox, Opera

In "Media Library"

• After clicking "Delete Permanently" - Firefox, Opera
• After clicking "Edit", and then "Return to Library" - Firefox, Opera
• After clicking "Clear" or deselecting all images - Firefox
• After clicking "Create a new gallery" - Firefox, Opera
• After clicking "Create a new gallery", and then "Cancel Gallery" - Firefox, Opera

In "From URL"

• After clicking a button under "Align" - Firefox

Other

• After clicking on the media modal background - Firefox, Opera

These don't seem like major cases, but I wanted to create a record of them. Overall, this patch seems to work well.

Thanks!

[koopersmith]

Replying to tomthewebmaster:

I tested 22502.3.diff in Firefox 17.0, Chrome 23.0.1271.95, Safari 6.0.2 and Opera 12.11 on Mac OS 10.8.2.

These don't seem like major cases, but I wanted to create a record of them. Overall, this patch seems to work well.

This is a fantastic comment. Thank you!

[lessbloat]

Replying to koopersmith:

I think we should improve the visuals of the attachment focus style — it also triggers whenever you click an attachment, so it needs to mesh tightly with the existing styles.

22502.4.diff​ is an attempt to improve the focus styles. How's this:

It's a single px line (as opposed to the double px border on selection). #ccc didn't look prominent enough, so I kicked it up to #999.

I also:

• Added focus style for close icon (X)
• Assigned focus back to the first image when you click the "clear" link (otherwise the focus gets lost)

[koopersmith]

That focus style is *much* nicer. We probably should make sure it's also detectable on the already gray/blue attachments. This is a great start.

---

We should be fixing the focus issues in their corresponding views.

• We generally should not be calling $( '.media-menu .active' ).focus();, as it is a hack around a problem and generally doesn't fix the issue in all use cases. In the case that it's used in this past patch, it will only work for insert into post workflows.

• Selecting the first image on clear is a cross-view operation, and will cause the user to lose their existing context. The proper way to solve this (which would solve most of the other bugs mentioned above) is figuring out how to maintain focus best across views.

[koopersmith]

A refreshed version of 22502.3.diff.

[koopersmith]

attachment:22502.6.diff​​ builds on attachment:22502.5.diff​, adding attachment focus styles based lessbloat's earlier patch, focusing the attachment container instead of just the image container.

[koopersmith]

Latest fixes the keydown event on focused attachments.

[koopersmith]

Since tabbing is a bit half baked, let's try to do a few small patches to actually get functionality committed.

[nacin]

In 22946:

Pressing escape now closes the media modal. props koopersmith, see #22502.

[ryan]

In 23006:

Final round of media UX improvements.

Props koopersmith
fixes #21390 #22502