WordPress.org

Make WordPress Core

#22502 closed enhancement (fixed)

Media: Keyboard shortcuts

Reported by: tomthewebmaster Owned by: koopersmith
Milestone: 3.5 Priority: low
Severity: normal Version: 3.5
Component: Media Keywords:
Focuses: Cc:

Description

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

Attachments (9)

22502.diff (1.9 KB) - added by lessbloat 17 months ago.
22502_screenshot.png (24.7 KB) - added by tomthewebmaster 17 months ago.
22502.2.diff (4.4 KB) - added by lessbloat 17 months ago.
22502.3.diff (6.4 KB) - added by koopersmith 17 months ago.
22502.4.diff (7.4 KB) - added by lessbloat 17 months ago.
22502.5.diff (6.3 KB) - added by koopersmith 17 months ago.
A refreshed version of 22502.3.diff.
22502.6.diff (6.7 KB) - added by koopersmith 17 months ago.
22502.7.diff (6.7 KB) - added by koopersmith 17 months ago.
22502.escape.diff (973 bytes) - added by koopersmith 17 months ago.

Download all attachments as: .zip

Change History (33)

comment:1 nacin17 months ago

  • Milestone changed from Awaiting Review to 3.5
  • Owner set to koopersmith
  • Status changed from new to assigned

comment:2 DrewAPicture17 months ago

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

comment:3 tomthewebmaster17 months ago

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.

comment:4 koopersmith17 months ago

  • Status changed from assigned to accepted
  • Summary changed from New media: Allow use of esc key to close media window to Media: Keyboard shortcuts

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

comment:5 pavelevap17 months ago

  • Cc pavelevap@… added

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).

comment:6 koopersmith17 months ago

  • Priority changed from normal to low

lessbloat17 months ago

comment:7 lessbloat17 months ago

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.

comment:8 tomthewebmaster17 months ago

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.

comment:9 koopersmith17 months ago

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

comment:10 nacin17 months ago

  • Priority changed from low to normal
  • Severity changed from minor to normal

lessbloat17 months ago

comment:11 lessbloat17 months ago

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).

koopersmith17 months ago

comment:12 follow-up: koopersmith17 months ago

  • Keywords has-patch added

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.

comment:13 koopersmith17 months ago

  • Keywords needs-testing added

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

comment:14 follow-up: tomthewebmaster17 months ago

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!

Last edited 17 months ago by tomthewebmaster (previous) (diff)

comment:15 in reply to: ↑ 14 koopersmith17 months ago

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!

lessbloat17 months ago

comment:16 in reply to: ↑ 12 lessbloat17 months ago

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:

http://f.cl.ly/items/0x3K063x2G102d2k400k/focus-style.jpg

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)
Last edited 17 months ago by lessbloat (previous) (diff)

comment:17 koopersmith17 months ago

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.

koopersmith17 months ago

A refreshed version of 22502.3.diff.

koopersmith17 months ago

comment:18 koopersmith17 months ago

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.

koopersmith17 months ago

comment:19 koopersmith17 months ago

Latest fixes the keydown event on focused attachments.

koopersmith17 months ago

comment:20 koopersmith17 months ago

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

comment:21 nacin17 months ago

In 22946:

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

comment:22 koopersmith17 months ago

  • Priority changed from normal to low

comment:23 nacin17 months ago

  • Keywords has-patch needs-testing removed

comment:24 ryan17 months ago

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

In 23006:

Final round of media UX improvements.

Props koopersmith
fixes #21390 #22502

Note: See TracTickets for help on using tickets.