[wp-trac] [WordPress Trac] #33228: Customizer initial focus

[WordPress Trac]

#33228: Customizer initial focus
------------------------------+--------------------------------------------
 Reporter:  afercia           |       Owner:
     Type:  enhancement       |      Status:  new
 Priority:  normal            |   Milestone:  4.7
Component:  Customize         |     Version:  4.2
 Severity:  normal            |  Resolution:
 Keywords:  has-patch needs-  |     Focuses:  ui, accessibility, javascript
  testing                     |
------------------------------+--------------------------------------------
Changes (by afercia):

 * keywords:  has-patch => has-patch needs-testing
 * milestone:  Future Release => 4.7


Comment:

 Looking back at this, just tested on Safari and looks like it wasn't
 getting the updated `themes.css` stylesheet even when pressing `Shift-
 Command-R`. I had to empty the cache from the Develop menu. So in order to
 properly test this patch, pleas try this:

 If you haven't already, go in `Safari > Preferences > Advanced tab` and
 check "Show Develop menu in menu bar". Then just empty the caches from the
 Develop menu:

 [[Image(https://cldup.com/GBBJGnRnwP.png)]]

 After this, everything seems to work nicely even in Safari+VoiceOver and
 the `customize-loader` "overlay" is actually the only content available:
 - no more need to set initial focus, any related JS can be removed
 - the overlay behaves like a normal web page, focus management is a native
 browser thing
 - keyboard navigation is "natively" constrained within the overlay, this
 fixes also #27705

 Needs a bit more testing (Windows) and cleaning. Moving to 4.7.

 There are some more improvements to consider in this area but they should
 probably go in a separate ticket:
 - the "X" link hidden text is different, sometimes it's "Close" sometimes
 "Cancel", I'd propose to simplify and just use "Close" whether it's the
 live preview or customizer or theme installer
 - order of elements: the "X" link should probably be the first control in
 the tab order
 - consider to use `wp.a11y.speak()` to announce the `customize-loader`
 overlay has loaded

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