Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#28704 closed enhancement (fixed)

Navigate media library with arrow keys

Reported by: danielbachhuber's profile danielbachhuber Owned by: helen's profile helen
Milestone: 4.0 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch dev-feedback
Focuses: javascript Cc:

Description

It would be nice if I could navigate the media library with arrow keys.

Use case: I'm inspecting media assets for their size details. It would be so much faster of an experience to be able to use the keys on my keyboard.

Attachments (4)

28704.diff (646 bytes) - added by adamsilverstein 9 years ago.
Skip arrow navigation when event is inside an input field
28704.2.diff (597 bytes) - added by adamsilverstein 9 years ago.
cleaner fix, check for in input earlier
28704.3.diff (790 bytes) - added by kovshenin 9 years ago.
28704.4.diff (1.1 KB) - added by kovshenin 9 years ago.

Download all attachments as: .zip

Change History (17)

#1 @helen
9 years ago

This is mentioned on #23560, which is currently milestoned for 4.0. Not sure if anybody is actively working on it.

#2 @celloexpressions
9 years ago

  • Milestone changed from Future Release to 4.0

Fix for this is included in the most recent #23560 patches.

#3 @helen
9 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 29220:

Keyboard accessibility for the media modal:

  • Arrow keys navigate between items in the grid.
  • Transfer focus into the panel when selecting a tab along the side.
  • Transfer focus into the details sidebar when selecting an item and vice versa.
  • Set initial focus on the close button so that it is visible.

props celloexpressions, lessbloat, ericlewis. fixes #25100, #25101, #28704. see #23560.

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


9 years ago

#5 @helen
9 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Need to noop out of this when focus is inside an input of some kind - editing captions when creating a gallery, for instance.

#6 follow-up: @ryan
9 years ago

To get around the arrow keys being hijacked, I must use Emacs keybindings to caption images when creating a gallery. Intensely frustrating.

@adamsilverstein
9 years ago

Skip arrow navigation when event is inside an input field

#7 in reply to: ↑ 6 @adamsilverstein
9 years ago

  • Focuses javascript added
  • Keywords has-patch dev-feedback added; needs-patch removed

Let the frustration end!

In 28704.diff skip keyboard navigation when inside an input field.

Replying to ryan:

To get around the arrow keys being hijacked, I must use Emacs keybindings to caption images when creating a gallery. Intensely frustrating.

@adamsilverstein
9 years ago

cleaner fix, check for in input earlier

#8 @adamsilverstein
9 years ago

28704.2.diff is a cleaner fix, catches the input field earlier.

@kovshenin
9 years ago

#9 @kovshenin
9 years ago

In 28704.3.diff: skip all key handlers in input areas, not just arrow keys. Prevents selection/deselection of items multiple times when typing a caption with spaces. Also stops event propagation to prevent scrolling the grid view when hitting space to select in edit post or open modal in media grid.

@kovshenin
9 years ago

#10 @kovshenin
9 years ago

28704.4.diff actually stop event propagation in the media grid. Tested in Chrome and Firefox on OS X.

#11 @stephdau
9 years ago

Now also tested in Safari 7.0.5 (9537.77.4). Works as advertised.

#12 @helen
9 years ago

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

In 29331:

Prevent key event handlers from firing when in input areas in the media modal, as people understandably want to type inside said inputs. props kovshenin. fixes #28704.

#13 @azaozz
9 years ago

In 29332:

Use node.nodeName instead of tagName for better consistency/compatibility, see #28704.

Note: See TracTickets for help on using tickets.