Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#32943 closed defect (bug) (fixed)

Menu Customizer: reorder buttons tabindex not set for just added items

Reported by: afercia Owned by: valendesigns
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: has-patch commit
Focuses: accessibility, javascript Cc:


Just noticed when you add a new item to a menu, the just-added item reorder buttons don't get any tabindex attribute. This results in all 4 reorder buttons being focusable when using a keyboard. See screenshot below.
When adding more than one item, seems just the last one doesn't get the tabindex attributes.


Attachments (2)

32943.diff (1.5 KB) - added by valendesigns 6 years ago.
32943.2.diff (2.4 KB) - added by westonruter 6 years ago.

Download all attachments as: .zip

Change History (10)

#1 @jorbin
6 years ago

  • Milestone changed from Awaiting Review to 4.3

#2 @ocean90
6 years ago

It looks like a new menu item doesn't get added to menuSection.container because console.log( menuSection.container.find( '.menu-item' ).length ); in reflowMenuItems returns the number of the initial added items.

#3 @celloexpressions
6 years ago

Anyone able to patch this?

6 years ago

#4 @valendesigns
6 years ago

  • Keywords has-patch 2nd-opinion added; needs-patch removed
  • Owner set to valendesigns
  • Status changed from new to assigned

The issue here seems to be a race condition. The menu item is not yet added to the UI when the tabIndex code is executed. By adding a short delay in 32943.diff I was able to get things to work correctly.

This ticket was mentioned in Slack in #core-customize by valendesigns. View the logs.

6 years ago

#6 @westonruter
6 years ago

  • Keywords needs-testing added; 2nd-opinion removed

@valendesigns In 32943.2.diff I introduce a new Customizer event pane-contents-reflowed which gets triggered when wp.customize.reflowPaneContents() finishes. The menu section then listens for this event and updates the tabIndex attributes at this time. This should be more robust. I'm noticing, however, that while the tabIndex attributes are getting set to -1, the keyboard focus sometimes isn't getting set to an adjacent element that *is* focusable. I suppose this would be a separate issue.

6 years ago

#7 @valendesigns
6 years ago

  • Keywords commit added; needs-testing removed

@westonruter Updated patch looks good!

#8 @westonruter
6 years ago

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

In 33283:

Customizer: Defer updating nav menu item tabIndex attributes until pane is reflowed.

Introduces pane-contents-reflowed Customizer event.

Props valendesigns, westonruter.
Fixes #32943.

Note: See TracTickets for help on using tickets.