WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#32819 closed defect (bug) (fixed)

Customizer: the Collapse sidebar link should be a button

Reported by: afercia Owned by: ocean90
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.2
Component: Customize Keywords: has-patch needs-testing
Focuses: ui, accessibility, javascript Cc:

Description

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.

Attachments (1)

32819.patch (10.4 KB) - added by afercia 7 years ago.

Download all attachments as: .zip

Change History (10)

@afercia
7 years ago

#1 follow-up: @afercia
7 years ago

  • Keywords has-patch added

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.

https://cldup.com/nz8duIpl9C.png

This ticket was mentioned in Slack in #core-customize by afercia. View the logs.


7 years ago

#3 @samuelsidler
7 years ago

  • Milestone changed from Awaiting Review to 4.3

#4 @afercia
7 years ago

  • Keywords needs-testing added

#5 follow-ups: @samuelsidler
7 years ago

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. :)

#6 in reply to: ↑ 5 @westonruter
7 years ago

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.

#7 in reply to: ↑ 5 @afercia
7 years ago

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.

#8 in reply to: ↑ 1 @sunnyratilal
7 years ago

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.

https://cldup.com/nz8duIpl9C.png

#9 @ocean90
7 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 33153:

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

props afercia.
fixes #32819.

Note: See TracTickets for help on using tickets.