Multiple code previews

[tylersticka]

It would be great to be able to view multiple code samples where appropriate.

Some use cases:

• The pattern is shared on the server and may be included via simplified template code (rather than plain HTML).
• The pattern is a JavaScript component or has accompanying JavaScript.
• The pattern depends on a complex data structure best represented via an accompanying bit of sample JSON.

[Paul-Hebert]

💯

[Paul-Hebert]

Heydon Pickering provides guidance for creating tabbed interfaces which could be helpful here.

He also discusses when it's appropriate to use accordions instead of tabs. This may be worth considering. I think it would feel less streamlined, but allow users to view multiple code previews at once.

[Paul-Hebert]

Scott O'hara also has a library for accessible tabs

It's also worth considering more of a codepen like experience, where code previews are shown side by side.

[Paul-Hebert]

Another useful article: https://tink.uk/using-tabbed-interfaces-with-a-screen-reader/

I want to spend a little time thinking through the ideal UX before diving into the dev implementation here. The screenshot you shared is how we've done this in the past, and seems tab-like, but I wonder if it:

1. Is the best UX for this task
2. Is different enough from tabs that some of the tab keyboard behaviors would be confusing.