Docs: add demo HTML using Gardevoir CDN + optional reduced-motion snippet #356
Conversation
WalkthroughAdds a reduced-motion accessibility rule to global styles, updates an accessibility comment to English, replaces local stylesheet with the Gardevoir CDN and sets explicit button types in the demo, and adds a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant CDN as Gardevoir CDN
participant Site as Demo HTML
User->>Browser: Navigate to demo page
Browser->>CDN: GET /gardevoir (Reseter.css)
CDN-->>Browser: 200 OK (stylesheet)
Browser->>Site: Parse HTML, apply CSS
Note right of Browser: If prefers-reduced-motion: reduce\nreduced-motion rules override animations/transitions
Browser-->>User: Render styled page (buttons non-submitting)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
src/components/global.scss (1)
27-27: Unify comment language with project conventions.The rest of the file is in English; keep comments consistent.
Apply this one-line change if you keep the current approach:
-// Acessibilidade: reduz animações para usuários que preferem menos movimento +// Accessibility: reduce motion for users who prefer less movementdemo.html (1)
33-35: Set an explicit type on standalone button to avoid accidental form submission.Even though it’s outside the form now, being explicit prevents issues if the markup changes later.
- <button>Clique Aqui</button> + <button type="button">Clique Aqui</button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.vscode/launch.json(1 hunks)demo.html(1 hunks)src/components/global.scss(1 hunks)
🔇 Additional comments (2)
.vscode/launch.json (1)
11-11: Confirm the dev server port before hardcoding 8080Short: I searched the repo for "8080" and common dev-server configs. I only found parcel-related entries inside yarn.lock and no explicit dev server config or any "8080" matches — so the port can't be confirmed from the codebase.
Files/locations to check:
- .vscode/launch.json — line ~11:
"url": "http://localhost:8080",
- Note: repo contains parcel deps in yarn.lock but no visible dev-server config (vite/webpack/serve/etc.).
Action: If you run a dev server, confirm the correct port (or make it configurable). If there is no dev server, prefer the "file" launch (Option A mentioned earlier).
demo.html (1)
7-7: Verify reseter.css path — search found no matching file; confirm built locationI ran the suggested search and found no file named
reseter.cssin the repository. Please confirm the correct path (or the built artifact location) and update the link.
- demo.html — line 7:
<link rel="stylesheet" href="reseter.css" />Suggested change (example — adjust to the actual built path):
- <link rel="stylesheet" href="reseter.css" /> + <link rel="stylesheet" href="dist/reseter.css" />
|
Hi I cannot understand what this PR is meant to do, can you explain |
…glish | chore: remove VSCode launch
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
demo.html (1)
2-2: Document language mismatch: Portuguese content with lang="en".Align the lang attribute with the content for accessibility and assistive tech.
-<html lang="en"> +<html lang="pt-BR">
🧹 Nitpick comments (1)
demo.html (1)
26-29: Improve form accessibility: explicit label associations and useful attributes.Even in demos, explicit for/id improves a11y and testing. Add name and autocomplete hints. Keep type="button" if you don’t intend to submit.
- <label>Nome: <input type="text" /></label><br><br> - <label>Email: <input type="email" /></label><br><br> - <button type="button">Enviar</button> + <label for="nome">Nome:</label> + <input id="nome" name="nome" type="text" autocomplete="name" /><br><br> + <label for="email">Email:</label> + <input id="email" name="email" type="email" autocomplete="email" inputmode="email" /><br><br> + <button type="button">Enviar</button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
(demo) use Gardevoir CDN; fix button type style comment in English chore remove VSCode launch(1 hunks)demo.html(1 hunks)src/components/global.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/global.scss
🔇 Additional comments (4)
(demo) use Gardevoir CDN; fix button type style comment in English chore remove VSCode launch (3)
20-22: Explicit type="button" to prevent unintended form submission — OK.Good call for a demo page with no form action.
27-28: Non-form demo button explicitly set to type="button" — OK.Matches the intent to avoid accidental form submits.
41-41: Comment localized to English — OK.Keeps code comments consistent and accessible to a broader audience.
demo.html (1)
33-34: LGTM: demo button uses type="button".Appropriate for a non-form interactive element in a demo.
...se Gardevoir CDN; fix button type style comment in English chore remove VSCode launch
Outdated
Show resolved
Hide resolved
therunnas
changed the title
|
@kkrishguptaa Hi, thanks for asking! Let me explain the purpose of this PR. The main goals are:
Based on the review feedback, I also:
In short, this PR improves developer experience (with a quick demo) and user accessibility (reduced-motion support), while also cleaning up small repo details. If preferred, I can split this into two PRs (demo vs. accessibility snippet) or move the reduced-motion snippet into a docs/addons file. |
There was a problem hiding this comment.
Please delete the unnecessary file and please translate this the demo to English. Thank you. The PR for reduced motion should be a different one. I suggest you make a file "opinionated.scss" in the directory with index and mini, let's bundle that particular thing into a different version so that it doesn't give unexpected behaviour to users of a css reset.
2 participants
Related Issue
N/A
Describe the changes you've made
This PR introduces two improvements:
Documentation/Demo — adds a tiny
demo.htmlso contributors can quickly visualize how the reset affects lists, forms, buttons and typography. The demo uses the official Gardevoir CDN for zero-setup.Accessibility (optional snippet) — includes a small
@media (prefers-reduced-motion)snippet so projects that want reduced motion can reduce animations/transitions and use default scroll behavior.Changes after review:
type="button"to the demo button.launch.jsonto avoid a hardcoded dev-server port.How has this been tested?
docs/demo.htmldirectly in the browser and confirmed reset styles apply correctly.type="button".Checklist
Additional Information
If preferred, I can split this into two separate PRs (demo vs. accessibility snippet), or move the reduced-motion snippet into a docs/addons file. Happy to adjust based on project guidelines.
Code of Conduct
I agree to follow this project's Code of Conduct
Summary by CodeRabbit