Customizer Theme Switcher: Switch the details/live preview buttons

[celloexpressions]

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

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

[westonruter]

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.

[celloexpressions]

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

[afercia]

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/

[ocean90]

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

[DrewAPicture]

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

Before:

After:

Moving for commit consideration.

[helen]

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.

[celloexpressions]

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.

[helen]

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.

[ocean90]

In 31954:

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

props celloexpressions, ocean90.
fixes #31791.

[ocean90]

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.