Customizer: the Collapse sidebar link should be a button

[afercia]

The "Collapse Sidebar" in the Customizer is a link used as UI control and should be a button. This applies to the Theme installer too. The button would need also an aria-expanded and aria-label attributes to be updated depending on the collapsed/expanded status. The current title attribute should be removed.

Related: #29949, #31201, #31195, #32053.

[afercia]

First pass.

• remove the title attribute
• add aria-expanded and aria-label attributes to be dynamically updated depending on the sidebar status
• tries to simplify CSS
• use the focus style proposed in #31201 props to @jk2228

Tested on latest Chrome and Firefox on Windows and in IE 8. Needs testing on modern IE, Safari, Macs.

Screenshots in different states, before and after. Notice in Firefox on Windows the arrow CSS transform doesn't get sub-pixel anti-aliasing, fixed in the patch with the .001deg hack.

[samuelsidler]

Bringing this over from #29949.

Replying to afercia:

Replying to samuelsidler:

The current collapsed mode is basically preview

Was thinking the same thing while working on #32819 and maybe instead of "Collapse" should be just "Hide sidebar/Show sidebar".

We could definitely use better terminology there. Do we call the Customizer a "sidebar" anywhere else though? I like the hide/show idea, but not sure if we should say "sidebar" or something else.

My only complaint with the current behavior is that I wish the "reveal" button was more pronounced. As it stands now, it's hard to tell that I'm in preview mode.

In #32819 we're trying to improve the focus style, please have a look at the screenshot there: was thinking to keep the blue and the box-shadow on the button when the sidebar is collapsed to indicate that is in a sort of "active" mode. Thoughts?

Looks good/better. Still not as pronounced as it probably should be. I should know that I'm in edit mode and not just viewing my site.

Maybe we need to add a "bar" at the bottom or top of the page with a "back to customizer" link and/or a "save & publish" button? Doesn't need to be full-width. Thinking more like what Chrome does for links on hover, but taller. Worth experimenting with a few different directions anyway.

To be clear, the work here is a definitely an improvement. :)

[westonruter]

Replying to samuelsidler:

We could definitely use better terminology there. Do we call the Customizer a "sidebar" anywhere else though? I like the hide/show idea, but not sure if we should say "sidebar" or something else.

We've previously referred to the left-hand Customizer UI as the “pane”. So we could use that term here. Otherwise, I think if we just said expand/collapse “controls” it would perhaps be more intuitive.

[afercia]

Replying to samuelsidler:

I should know that I'm in edit mode and not just viewing my site.

What about "Full screen preview/Exit full screen preview"? Maybe no more mentioning the sidebar/pane would make clear we're in a "preview" mode.

[sunnyratilal]

Tested on Safari on Mac: all working good.

Replying to afercia:

First pass.

• remove the title attribute
• add aria-expanded and aria-label attributes to be dynamically updated depending on the sidebar status
• tries to simplify CSS
• use the focus style proposed in #31201 props to @jk2228

Tested on latest Chrome and Firefox on Windows and in IE 8. Needs testing on modern IE, Safari, Macs.

Screenshots in different states, before and after. Notice in Firefox on Windows the arrow CSS transform doesn't get sub-pixel anti-aliasing, fixed in the patch with the .001deg hack.

[ocean90]

In 33153:

Customizer: Use a <button> for the collapse sidebar … button.

props afercia.
fixes #32819.