Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#32839 closed defect (bug) (fixed)

Menu Customizer: review Available Menu Items Panel keyboardAccessible()

Reported by: afercia's profile afercia Owned by: ocean90's profile ocean90
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: has-patch
Focuses: accessibility, javascript Cc:


In the Menu Customizer, when the Available Menu Items Panel is open, keyboardAccessible() tries to implement some sort of "arrows navigation" through the available menu items. Currently it doesn't work, I may be wrong but it looks like it's using a couple of wrong jQuery selectors and it's trying to move focus to elements that are not focusable.

Beside this, trying to handle keydown events and arrow keys breaks screen readers native functionalities because they reserve the arrow keys for their own navigation. Moreover, browsers/screen readers combinations do their own things with event handlers and they deliver events in ways most developers wouldn't expect.

Even if fixed, this would never work with screen readers. Much like what happens in the Media Grid where navigating through attachments with the arrow keys doesn't work when using screen readers.

Now that the available menu items have buttons, keyboard accessibility is guaranteed because they're native focusable elements and I don't see any reason to implement a JavaScript based navigation.

I would recommend to reduce keyboard enhancements here to a bare minimum, keeping just the noop on the search field when empty and the Escape and back tab things.

Attachments (2)

32839.patch (1.7 KB) - added by afercia 9 years ago.
32839.2.patch (1.7 KB) - added by afercia 9 years ago.

Download all attachments as: .zip

Change History (6)

9 years ago

#1 @afercia
9 years ago

  • Keywords has-patch added

#2 @celloexpressions
9 years ago

This code was never really looked at or worked on (came from the initial fork of customize-widgets.js) - it should be removed. Patch needs to remove the console log but otherwise looks good at a glance.

9 years ago

#3 @afercia
9 years ago

Refreshed patch to remove one console log leftover, missed that sorry.

#4 @ocean90
9 years ago

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

In 33070:

Customizer: Remove some non-functional code.

props afercia.
fixes #32839.

Note: See TracTickets for help on using tickets.