Arrows in customizer, open section background

[jane]

We talked about these two things a while back but without a ticket they didn't get done. It's late in the game, and I'm willing to be overruled if there's a leads majority in opposition, but these two small things have been driving me *crazy* since they went in, and they just make the customizer feel a little unfinished.

1. Arrows. The little arrows flip upside down when a section is open. This is not the way we use arrows similar places in the UI (widgets, menus), and is not good interaction design bc the arrows are pointing up from the section header at the next section and it doesn't really have meaning. The one place we do this is in screen options/help tabs, but in that case the tab (and the arrow) is at the bottom of the content when it flips, so it's semantic there. Customizer sections are structured like widgets and menus (header always stays above content) vs the help tabs (header slides down below the content when open), so the arrow should not flip; it should always point down.

2. Background color of the open section. Using that gray that's so similar to the headers means the actionable area does not stand out at all. The thing that makes it so different from widgets/menus is that on those screens the headers are darker because of a gradient. I like the lack of heavy gradient in the customizer, but don't like the lack of separation. If keeping the section headers light/sans-the-gradient-we-use-elsewhere, the actionable area needs a lighter background.

[jane]

The arrow looks right. For color, maybe the open background could just be white.

[SergeyBiryukov]

20828.2.patch​ changes the background of the whole pane (since the background of open sections is currently transparent and defaults to whatever is set for the whole pane).

20828.3.patch​ only changes the background of the open sections, as requested.

[helenyhou]

20828.3.patch​ is mostly working - needs to change the background for .customize-section .customize-control-image .library li.library-selected to white as well (the tabs for selecting an image).

Going to look at adding more contrast to the section header hover state as well and will post screenshots.

[helenyhou]

Screenshot of some variants: 20828.customize-section-header-hover.png​

• Left: current
• Center: lightened 20828.hover-lighter.diff​
• Right: darkened (similar to admin menu hover state) 20828.hover-darker.diff​

Both patches include the tab color fix mentioned above.

[jane]

@helenyhou: For hover/active, let's go with the darkest state you had, Layout in the right column. We have to start getting away from the virtually-no-contrast thing we've gotten into, it's terrible for both usability and accessibility.

[ryan]

In [20991]:

Customizer UI tweaks.

• Don't flip arrow when for open section.
• Give the open section a white background.
• Provide a darker hover state for section headers.

Props helenyhou, SergeyBiryukov
fixes #20828

[jane]

@helenyhou: Do you want to add another mini-patch so the darker color shows for on state as well as hover?

[helenyhou]

Replying to jane:

@helenyhou: Do you want to add another mini-patch so the darker color shows for on state as well as hover?

Sure - looking at doing some more fine-tuning of the colors, actually, so will do it all together.

Also, definitely agreed on making sure we keep an on eye on contrast in general.

[koopersmith]

Also, per jane, we should switch the position of the "Collapse" text and the arrow, so it becomes "[arrow] Collapse".

[helenyhou]

If we aim for more parity with the admin menu: 20828.after.4.png​

20828.4.diff​

[SergeyBiryukov]

20828.4.diff​ looks good (in both LTR and RTL).

It's also easier to collapse/uncollapse the pane when the button stays at the same place.

[nacin]

I am worried there is not enough contrast in the "Collapse" link, or in the "Default" sub-text in the Header and Background Images panes.

[jane]

Collapse could probably use more contrast, but it's not a regression, and we're late. Let's look at it in 3.5 and get 3.4 out the door.

The default text is light, but not as contrastless at collapse text. I vote we skip until 3.5 rather than spending any more time fiddling with colors.

[nacin]

In [21006]:

Darken the hover/on states for the customizer section titles. Switch Collapse arrow and label. Improve text contrast. props helenyhou. fixes #20828.