[wp-trac] [WordPress Trac] #31336: Customizer: separate navigation from options UI for better UX by removing accordion behavior

[WordPress Trac]

#31336: Customizer: separate navigation from options UI for better UX by removing
accordion behavior
--------------------------+------------------------------------------------
 Reporter:                |       Owner:  ocean90
  celloexpressions        |      Status:  assigned
     Type:  enhancement   |   Milestone:  4.3
 Priority:  normal        |     Version:  4.0
Component:  Customize     |  Resolution:
 Severity:  normal        |     Focuses:  ui, accessibility, administration
 Keywords:  has-patch     |
--------------------------+------------------------------------------------
Changes (by celloexpressions):

 * owner:  celloexpressions => ocean90
 * focuses:  ui, administration => ui, accessibility, administration


Comment:

 [attachment:31336.5.diff] implements the latest design from @folletto and
 fixes remaining issues with bugs ranging from inconsistent grays/whites to
 the widget-expansion issues. I've reviewed basic keyboard accessibility
 and we should have an improvement with this since there are much better
 focus states now. Could use a thorough accessibility audit after a first
 pass makes it in.

 I think this is ready for final commit review. If anything comes up,
 please let me know. We need to get this in ASAP to continue iterating on
 the design of menus in the Customizer, which will align with these changes
 per the latest design. At this point, Menu Customizer will assume this
 patch is applied (or committed), at least in terms of CSS.

 The design has probably evolved enough here to also close #29158,
 especially with the improvements to the handling of different shades of
 grays and white, establishing a clear pattern of white backgrounds for
 interactive UI elements including both navigational elements and input
 fields, with bolder colored hover/focus states for navigational elements
 only. The only remaining decision would be whether or not to key the
 hover/focus styles to color schemes.

 The flow is feeling really good now for both desktop and mobile, so it
 could be a nice exercise to do some before/after on make/flow if anyone's
 interested. Screencast coming soon here, in case the grays get messed up
 in the gif, it's very close to what folletto proposed.

 I'll also note that this may cause bc issues with custom sections that
 would be simply unavoidable, so it'll be good to get it in as early as
 possible to allow for ample testing.

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