Theme previewer: Use listbox for theme patterns & style variation lists to improve selection UX

[ryelle]

This updates the "Theme patterns" and "Theme style variations (items)" blocks to use the listbox UI pattern for interaction. In this pattern, the current item has a "selected" role, and is visually (and semantically) flagged. The current selected item can also be (optionally) unselected. This also introduces new styles for hover, focus, and selected states.

The change also applies to the Patterns list on single theme pages, where selecting an item triggers the navigation to open the pattern in the previewer (which is the current behavior). Some of the style changes (hover state) also apply to style variations on the single theme page, but I didn't change the interaction pattern here.

Fixes #113.

Tech details: This introduces a new helper script, wporgListbox, a JS class which sets up the listbox behavior for the two blocks. It sets up the interaction listeners (focus, keydown, click), and triggers a custom event for selection that other blocks can listen for. The new listbox elements (uls) are a single tabstop in the page, and to navigate through the items you use a keyboard (much nicer on themes with many patterns).

Note that I did not use the Interactivity API for this— I ran into an initial roadblock, and decided the wporgListbox class would be more understandable.

Screenshots

https://github.com/WordPress/wporg-theme-directory/assets/541093/0d5b1c5e-9714-4c2a-98a7-1c8f32bcd440

How to test the changes in this Pull Request:

1. View a theme with style variations and/or patterns in the previewer
2. Click on the style variations/patterns
3. You should see the hover style (zoom), and the focus+selected states after selecting one
4. It should update the previewer
5. Click away and the selected state should stay
6. Try using a keyboard, note that once an item has focus, use the arrow keys to change focus
7. You should be able to follow your keyboard focus visually
8. Use space or enter to select an item
9. It should update the previewer
10. Try unselecting a selected pattern
11. It should send the previewer back to the theme homepage

Optionally try this with a screenreader or mobile device.

[ryelle]

I've deployed this so that it can be tested on the live preview site— but I would still appreciate any feedback on the code or design. You can follow the test instructions above. cc @ndiego @StevenDufresne @adamwoodnz @WordPress/meta-design

[adamwoodnz]

For keyboard navigation it's definitely a little jarring moving between style variations and patterns on the single theme page (tab stops), so would be good to update the variations to match.

[adamwoodnz]

• Try unselecting a selected pattern
• It should send the previewer back to the theme homepage

Should the theme homepage option then be selected? For me the previewer changes and the item I deselected loses selected state, but the homepage does not become selected.

[adamwoodnz]

Works well for me with keyboard and mouse, however when I have VoiceOver activated I can't select style variations or patterns using my keyboard. I can tab to the lists and they are announced, and I can then navigate within the lists, but enter or space both fail to load the selected item. In this video I am hitting enter or space on each item after it is focused:

https://github.com/WordPress/wporg-theme-directory/assets/1017872/cdf33207-8870-4e34-a27a-311bc8d50b64

[ryelle]

For keyboard navigation it's definitely a little jarring moving between style variations and patterns on the single theme page (tab stops), so would be good to update the variations to match.

Yeah, I think that would be a good post-launch task.

Should the theme homepage option then be selected? For me the previewer changes and the item I deselected loses selected state, but the homepage does not become selected.

I'm not sure what you mean by this, there is no "homepage option" for patterns. If you're on the theme homepage, you're not viewing a pattern (some themes do have patterns that reflect parts of the homepage, but those are not the same).

Works well for me with keyboard and mouse, however when I have VoiceOver activated I can't select style variations or patterns using my keyboard.

Strange, it was working for me yesterday, I'll try again.

[ryelle]

I think the voiceover issue is not actually an issue— I can trigger the selection by hitting VO+Space which is the way most VO users would use it. Space by itself doesn't work, but I think that's a VO compat issue.