feat: add playground #404

shrilakshmishastry · 2024-08-10T11:19:37Z

Describe your changes

Introduce a playground where users can interact with code and look at live demos. The idea is to introduce playground initially and later maybe convert it into a challenge ground, like we have in reactdev

what is Playground?

A final code of the accessibility best practice that is described throughout the pattern template. This allows the user to interact with code, see the output, and open the code in codesandbox.

There are 4-5 options available to embed editor, I have listed them here.

I am currently using sandpack-react. An open source, well-documented library with a lot of functionality out of the box.

I have tried out this in the form component. Need opinion and corrections to improve.

Screenshots

Screen.Recording.2024-08-10.at.4.55.32.PM.mov

Link to issue

Closes # issue-403

Checklist before requesting a review

I have performed a self-review of my code.
Followed the repository's Contributing Guidelines.
I ran the app and tested it locally to verify that it works as expected.
I have checked my code with an automatic accessibility tool such as Axe Dev Tools or Wave
and it shows no errors.

github-actions · 2024-08-10T11:19:52Z

Hello @shrilakshmishastry, thanks for raising a pull request in this project. The maintainers of this project are volunteers so please be understanding if it takes time before you get a response. We still appreciate your help with creating pull requests!

EmmaDawsonDev

Some nice work so far. Things I'm concerned about:

The current colours in the sandbox do not meet colour contrast thresholds of 4.5:1. Is there a way to update the theme to find one that has good colour contrast and also matches the current site theme in light/dark mode?
The component is not keyboard accessible meaning anyone using a keyboard is unable to edit the code. Is there something that can be done about this?
How does it work with JS?
I tried making edits to the code and nothing happened. Then after about 3 minutes the preview crashed. I would expect if it was an interactive playground that any edits I make would be reflected in place without me having to go to open the sandbox in full.

EmmaDawsonDev · 2024-08-11T08:35:37Z

components/ContentTemplates/FormsTemplate.tsx

 import { formsPageNavigation } from "../../data/pageNavigationLists"
 import { CodeBlock } from "../CodeBlock/CodeBlock"
 import { NavPage } from "../NavPage/NavPage"
 import { PageUpdated } from "../PageUpdated/PageUpdated"
 import { TemplateSection } from "../TemplateSection/TemplateSection"
+import { formatCss, formatHtml } from "../../utils"
+
+const Playground = dynamic(() => import("../Playground/Playground"), {


Is there any reason this needs to be dynamic? Why can't it be server side rendered like the rest of the content on the page?

By default, sandpack provides client-side rendering. When not imported dynamically like above where I set ssr: false, it was causing Hydration problem. To avoid it, I used dynamic rendering as a first step. But it's possible to server render . More on it

I need your opinion here, whether I should use server side rendering here or go ahead with default client side?

EmmaDawsonDev · 2024-08-11T08:36:41Z

components/ContentTemplates/FormsTemplate.tsx

@@ -216,6 +222,25 @@ export const FormsTemplate = () => {
 					screen reader user.
 				</p>
 			</TemplateSection>
+			<TemplateSection sectionName="playground" title="Playground">


This needs adding to the in-page navigation

shrilakshmishastry · 2024-08-13T02:46:32Z

Some nice work so far. Things I'm concerned about:

The current colours in the sandbox do not meet colour contrast thresholds of 4.5:1. Is there a way to update the theme to find one that has good colour contrast and also matches the current site theme in light/dark mode?

The component is not keyboard accessible meaning anyone using a keyboard is unable to edit the code. Is there something that can be done about this?

How does it work with JS?

I tried making edits to the code and nothing happened. Then after about 3 minutes the preview crashed. I would expect if it was an interactive playground that any edits I make would be reflected in place without me having to go to open the sandbox in full.

Hey @EmmaDawsonDev 👋

(Answering to above points according to their numbers)

Yes, There are themes available. Here is the link to theme. Can you please help me here to select the one that suits the site theme and matches color contrast thresholds? Also can you please tell me how did you test color contrast?
I will check and come back on keyboard accessibility of editor.
This supports vanilla js and all framework of js. You need to pass the required template to SandPack or SandpackProvider

  <SandpackProvider template="react">
    <SandpackLayout>
      <SandpackPreview />
      <SandpackCodeEditor />
    </SandpackLayout>
  </SandpackProvider>

Replace the react with the template you require. More about templates.

Can you please provide more details on error (screen shot of error), the node, yarn version? also screen recording ? So I can reproduce. As you can see in above video it worked well for me 😬

shrilakshmishastry · 2024-08-13T05:00:44Z

Some nice work so far. Things I'm concerned about:

The current colours in the sandbox do not meet colour contrast thresholds of 4.5:1. Is there a way to update the theme to find one that has good colour contrast and also matches the current site theme in light/dark mode?

The component is not keyboard accessible meaning anyone using a keyboard is unable to edit the code. Is there something that can be done about this?

How does it work with JS?

I tried making edits to the code and nothing happened. Then after about 3 minutes the preview crashed. I would expect if it was an interactive playground that any edits I make would be reflected in place without me having to go to open the sandbox in full.

Hey @EmmaDawsonDev 👋

(Answering to above points according to their numbers)

Yes, There are themes available. Here is the link to theme. Can you please help me here to select the one that suits site theme and matches color contrast thresholds?

I will check and come back on keyboard accessibility of editor.

This supports vanilla js and all framework of js. You need to pass the required template to SandPack or SandpackProvider like
  <SandpackProvider template="react">
    <SandpackLayout>
      <SandpackPreview />
      <SandpackCodeEditor />
    </SandpackLayout>
  </SandpackProvider>
Replace the react with the template you require. More about templates.

Can you please provide more details on error (screen shot of error), the node, yarn version? also screen recording ? So I can reproduce. As you can see in above video it worked well for me 😬

reported accessibility issue in sandpack codesandbox/sandpack#1173

shrilakshmishastry · 2024-08-13T05:23:29Z

I have noticed few things here,

for voice-over that reads all the tags, the editor is available, and it's possible to edit the code.
The top buttons have the role of tab. But they do not follow the tab accessibility pattern.
I guess you might have missed, editor is accessible via the tab, when focused, you need to explicitly click on enter key to activate it and esc key to come out of it

shrilakshmishastry · 2024-08-31T03:06:04Z

Solving editor accessibility here codesandbox/sandpack#1184

EmmaDawsonDev · 2024-09-01T16:08:45Z

Apologies for not getting to this very quickly! I've just started a new job so I've been a bit overwhelmed with new information and will also be away quite a bit in the next couple of weeks travelling.

EmmaDawsonDev · 2024-09-03T17:11:08Z

Here's a screenshot of the sandbox when I open it. My system is set automatically to lightmode but the sandbox doesn't seem to change even when I switch the page to darkmode. The html tags in green are too light and the grey icons/text on the grey buttons don't have enough contrast either

feat: add playground

24e2d4b

chore: add jsdoc to utils

ec5ea44

EmmaDawsonDev requested changes Aug 11, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add playground #404

feat: add playground #404

shrilakshmishastry commented Aug 10, 2024 •

edited

Loading

github-actions bot commented Aug 10, 2024

EmmaDawsonDev left a comment

EmmaDawsonDev Aug 11, 2024

shrilakshmishastry Aug 13, 2024

EmmaDawsonDev Aug 11, 2024

shrilakshmishastry commented Aug 13, 2024 •

edited

Loading

shrilakshmishastry commented Aug 13, 2024

shrilakshmishastry commented Aug 13, 2024

shrilakshmishastry commented Aug 31, 2024

EmmaDawsonDev commented Sep 1, 2024

EmmaDawsonDev commented Sep 3, 2024

feat: add playground #404

Are you sure you want to change the base?

feat: add playground #404

Conversation

shrilakshmishastry commented Aug 10, 2024 • edited Loading

Describe your changes

Screenshots

Link to issue

Checklist before requesting a review

github-actions bot commented Aug 10, 2024

EmmaDawsonDev left a comment

Choose a reason for hiding this comment

EmmaDawsonDev Aug 11, 2024

Choose a reason for hiding this comment

shrilakshmishastry Aug 13, 2024

Choose a reason for hiding this comment

EmmaDawsonDev Aug 11, 2024

Choose a reason for hiding this comment

shrilakshmishastry commented Aug 13, 2024 • edited Loading

shrilakshmishastry commented Aug 13, 2024

shrilakshmishastry commented Aug 13, 2024

shrilakshmishastry commented Aug 31, 2024

EmmaDawsonDev commented Sep 1, 2024

EmmaDawsonDev commented Sep 3, 2024

shrilakshmishastry commented Aug 10, 2024 •

edited

Loading

shrilakshmishastry commented Aug 13, 2024 •

edited

Loading