Opened 10 years ago
Closed 10 years ago
#32839 closed defect (bug) (fixed)
Menu Customizer: review Available Menu Items Panel keyboardAccessible()
Reported by: | afercia | Owned by: | 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.
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.