[wp-trac] [WordPress Trac] #42027: Customize: changeset Publish button and panel focus management

[WordPress Trac]

#42027: Customize: changeset Publish button and panel focus management
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |      Owner:
     Type:  defect (bug)             |     Status:  new
 Priority:  normal                   |  Milestone:  4.9
Component:  Customize                |    Version:  trunk
 Severity:  normal                   |   Keywords:  has-screenshots needs-
  Focuses:  ui, accessibility,       |  patch
  javascript                         |
-------------------------------------+-------------------------------------
 The new Customiser changeset feature introduces a publish button with a
 coupled "cog" button and an expandable panel:

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

 There are 2 relevant accessibility issues here, related to focus
 management:
 - the Publish and "cog" buttons focus style relies just on a color change
 and it's barely perceivable; there should be a clear indication of focus,
 made with a shape and not just color
 - when clicking the "cog" button, the related panel expands on the right;
 however, the panel is placed in the source after the site preview; when
 using a keyboard to navigate content, this makes very difficult to even
 understand what is going on and requires potentially dozens of Tab key
 presses to actually reach the panel. As done for other panels (available
 menu items, available widgets) focus should be managed programmatically
 and moved to the expanded panel. When tabbing away from the panel or
 closing it, keyboard navigation should be moved back to the sidebar.

 Note: Ideally, the expanded panel should be placed in the source
 immediately after the controls that opens it. I guess this is not possible
 right now, due to technical limitation of the current Customizer
 implementation. If so, the only option left is managing focus
 programmatically.

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