WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#31791 closed enhancement (fixed)

Customizer Theme Switcher: Switch the details/live preview buttons

Reported by: celloexpressions Owned by: ocean90
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: Customize Keywords: has-patch
Focuses: ui Cc:

Description

Based on usability testing and feedback from almost everyone that's provided it. Let's get this in.

Attachments (2)

31791.diff (3.7 KB) - added by celloexpressions 6 years ago.
31791.patch (4.9 KB) - added by ocean90 5 years ago.

Download all attachments as: .zip

Change History (16)

#1 @obenland
6 years ago

  • Component changed from Bundled Theme to Customize

This ticket was mentioned in Slack in #accessibility by garyj. View the logs.


6 years ago

#3 follow-up: @afercia
6 years ago

@celloexpression hi, quick question: any reason to use a span instead of a real button?

<span class="button" tabindex="0" id="{{ data.theme.id }}-action"><?php _e( 'Theme Details' ); ?></span>

did't test the patch though, just reading the code. As a best practice, we should always use elements that have native support for keyboard interaction. Thanks :)

#4 in reply to: ↑ 3 @westonruter
6 years ago

Replying to afercia:

@celloexpression hi, quick question: any reason to use a span instead of a real button?

<span class="button" tabindex="0" id="{{ data.theme.id }}-action"><?php _e( 'Theme Details' ); ?></span>

did't test the patch though, just reading the code. As a best practice, we should always use elements that have native support for keyboard interaction. Thanks :)

Adding tabindex to any element makes it keyboard-interactable.

#5 @celloexpressions
6 years ago

It was already a span, but a button would probably work too, feel free to test and iterate.

#6 @afercia
6 years ago

Patch needs a refresh after r31911 and r31914.

Adding tabindex to any element makes it keyboard-interactable.

@westonruter that just makes them focusable. Keyboard interaction is a different thing, to rebuild a native button behavior you would need something more, see: http://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/

#7 @ocean90
6 years ago

  • Keywords needs-refresh added

I agee, it should be a <button> since it's not an overlay anymore.

@ocean90
5 years ago

#8 @ocean90
5 years ago

  • Keywords needs-refresh removed

#9 @DrewAPicture
5 years ago

  • Keywords commit added

31791.patch still applies and works as advertised, incorporating a11y feedback from @afercia.

Before:
http://f.cl.ly/items/3d0f2s42380l0A2R1m1y/Screen%20Shot%202015-03-31%20at%206.28.51%20PM.png

After:
http://f.cl.ly/items/0i11211j0G2B3m102a2Y/Screen%20Shot%202015-03-31%20at%206.29.43%20PM.png

Moving for commit consideration.

#10 follow-up: @helen
5 years ago

  • Keywords commit removed

31791.patch appears to break keyboard navigation to live preview for me. Tabbing jumps from button to button.

Testing this really emphasized that it's strange that live previewing a theme on a narrow screen takes you back to the controls - I'd expect it to load and take you to the preview pane, otherwise it's very unclear as to what's happened, and you'd want to see the effects before customizing anyway. Didn't see that mentioned on #31289, though I may have missed it.

#11 follow-up: @celloexpressions
5 years ago

We could very easily deep-link to the themes section if we want to stay there after switching. But given that it's not super obvious how to navigate back to Customize, and that theme switching is very slow with the page reload, I think it would be better to emphasize the preview & customize workflow.

#12 in reply to: ↑ 11 @helen
5 years ago

Replying to celloexpressions:

We could very easily deep-link to the themes section if we want to stay there after switching.

I wasn't talking about the theme switcher panel, I mean the preview itself. On a narrow screen, after switching, you are presented with the customizer controls instead of a preview, which is not super useful when you haven't yet seen what the preview looks like.

#13 @ocean90
5 years ago

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

In 31954:

Customizer Theme Switcher: Switch the details/live preview buttons.

props celloexpressions, ocean90.
fixes #31791.

#14 in reply to: ↑ 10 @ocean90
5 years ago

Replying to helen:

31791.patch appears to break keyboard navigation to live preview for me. Tabbing jumps from button to button.

Thanks, I accidentally removed tabindex="0".

Testing this really emphasized that it's strange that live previewing a theme on a narrow screen takes you back to the controls.

I agree, let's continue this on #31289 or #28784.

Note: See TracTickets for help on using tickets.