[wp-trac] [WordPress Trac] #32493: Customizer accessibility audit

[WordPress Trac]

#32493: Customizer accessibility audit
---------------------------+--------------------------------------------
 Reporter:  afercia        |       Owner:
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  4.3
Component:  Customize      |     Version:  4.2
 Severity:  normal         |  Resolution:
 Keywords:  needs-testing  |     Focuses:  ui, accessibility, javascript
---------------------------+--------------------------------------------

Comment (by afercia):

 One of the main accessibility issues in the Customizer is about sliding
 panels. When they're out of view they're just... "out of view" but they're
 not really hidden to assistive technologies and their content is still
 readable. It's also possible to tab through the ouf-of-view focusable
 element and activate them pressing Enter. Please refer to the screenshot
 below, it's the Menu Customizer, currently under development:

 [[Image(https://cldup.com/TDo-MXsI1d.png)]]

 Here you can clearly see that after the "Social Links Menu" control, it's
 actually possible to keep tabbing and focus all the controls that are
 inside the following out-of-view panels. This happens also when using
 arrows to read content, as screen reader users normally do.
 In the same way, it's possible to read and focus out-of-view content
 placed ''before'' the currently visible panel.
 It's a big issue also for keyboard users, it's easy to understand how
 easily users may lose context and get lost.

 The same issue occurred for Press This during the 4.2 release cycle. The
 solution was:
 - Slide out: detect when the animation completes and then completely hide
 the out-of-view content with `display: none`
 - Slide in: remove `display: none` and then start the animation.
 If focus is programmatically moved from one panel to another panel, this
 should happen at the end of the animation.

 Worth asking @azaozz and @michaelarestad who brilliantly handled this
 development. Since this is already done and already in core, maybe the
 best thing to do would be abstract it a bit and use it as a general
 utility method available in the admin. Any thoughts more than welcome.
 Related: #30599

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32493#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform