[wp-trac] [WordPress Trac] #34391: Harden panel/section UI code by removing contents from being logically nested (read: goodbye margin-top hacks)

[WordPress Trac]

#34391: Harden panel/section UI code by removing contents from being logically
nested (read: goodbye margin-top hacks)
-------------------------------------+-------------------------------------
 Reporter:  westonruter              |       Owner:  delawski
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  4.7
Component:  Customize                |     Version:  4.0
 Severity:  normal                   |  Resolution:
 Keywords:  early has-patch dev-     |     Focuses:  ui, accessibility,
  feedback needs-refresh             |  javascript
-------------------------------------+-------------------------------------
Changes (by celloexpressions):

 * keywords:  early has-patch dev-feedback => early has-patch dev-feedback
     needs-refresh


Comment:

 @afercia can you verify that there is no net change to the usability of
 sliding panels for assitive technology with [attachment:34391_4.diff]?

 @delawski a few notes:
 - There is a double-margin before the theme section now. We should remove
 the margin-top from the themes section heading on the top level so that
 the margin on customize info remains for users that can't change themes.
 - Tested on mobile and it looks good.
 - There is a ''lot'' of churn in the CSS here, but I think it's a net red,
 which is good. Also eliminates some oddities like a `left: -354px` with no
 indication of why that's the number.
 - What about putting some of the container classes on the content
 container now also to reduce 3rd-party CSS change? For example, I'd prefer
 for the `customize-nav-menus.css` changes to not be needed. We should also
 avoid adding any new selectors that use any of the `accordion-` classes,
 as those are legacy from the old UI that's no longer used.
 - To reduce conflicts with #37661, let's avoid any changes to the themes
 section JS that aren't required (ie, if `section.container` still works
 let's leave that instead of switching to `section.contentContainer`).
 - The patch adds an empty `@since` to customize-nav-menus.js.

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