AccessibleWebDev icon indicating copy to clipboard operation
AccessibleWebDev copied to clipboard

feat: add playground

Open shrilakshmishastry opened this issue 6 months ago • 8 comments

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

https://github.com/user-attachments/assets/f4c6e5d7-794f-4eea-8b71-de1861a3955b

image

Link to issue

Closes # issue-403

Checklist before requesting a review

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

shrilakshmishastry avatar Aug 10 '24 11:08 shrilakshmishastry