Navigate media library with arrow keys

[danielbachhuber]

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.

[helen]

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

[celloexpressions]

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

[helen]

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.

[helen]

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

[ryan]

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

[adamsilverstein]

Skip arrow navigation when event is inside an input field

[adamsilverstein]

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]

cleaner fix, check for in input earlier

[adamsilverstein]

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

[kovshenin]

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]

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

[stephdau]

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

[helen]

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.

[azaozz]

In 29332:

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