[wp-trac] [WordPress Trac] #32686: Customizer Menus: Accessibility: create new menu, focus goes to the preview area in Firefox

[WordPress Trac]

#32686: Customizer Menus: Accessibility: create new menu, focus goes to the preview
area in Firefox
---------------------------+-----------------------------
 Reporter:  designsimply   |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Customize      |    Version:
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 /hat tip afercia for reporting this at https://github.com/voldemortensen
 /menu-customizer/issues/127

 Reported by Michelle deYoung from the accessibility testers group. See:
 https://make.wordpress.org/accessibility/2015/06/12/accessibility-
 usertest-menu-customizer/

  Issue: Once a new menu is created, the keyboard focus is moved to the
 content area.

 Initially I couldn't reproduce this, she didn't mention the specific
 browser she used so I was using Chrome. When you press Enter or Spacebar
 on the "Create Menu" button, in Chrome all is fine, focus is moved to the
 new panel.
 By the way with Firefox something weird happens: after you press "Create
 Menu", press the tab key 3 times and you're in the preview iframe. Looking
 closely here's what happens:

 1. press "Create Menu" either with Enter or Spacebar, doesn't matter
 1. tab once: focus is on the "Collapse" link
 1. tab again: focus is on the iframe (Firefox gives focus to iframes)
 1. tab again: focus is on the first focusable element in the preview

 I think (not sure) this has something to do with timings: probably Firefox
 is not able to give focus to a panel while the animation is running and
 the element not fully visible yet.

 Worth noting a complete focus loss like this one would make the Customizer
 hardly usable by keyboard users.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32686>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform