AccessibleWebDev
AccessibleWebDev copied to clipboard
feat: add playground
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
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.