Make WordPress Core

Opened 10 years ago

Closed 10 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:

Description

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 10 years ago.
32839.2.patch (1.7 KB) - added by afercia 10 years ago.

Download all attachments as: .zip

Change History (6)

@afercia
10 years ago

#1 @afercia
10 years ago

  • Keywords has-patch added

#2 @celloexpressions
10 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.

@afercia
10 years ago

#3 @afercia
10 years ago

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

#4 @ocean90
10 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.