bug:Fixed the missing Copy button in Installation Section#364
Conversation
|
@saurabh007007 is attempting to deploy a commit to the Dodo Payments Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe pull request modifies the CodeExample component in the quick-integrations file to add CodeBlockCopyButton children to npm, pnpm, and bun code blocks, enabling copy functionality for installation commands without changing code structure or content. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. 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: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/landing/quick-integrations.tsx`:
- Line 138: The CodeBlockCopyButton is being rendered as an icon-only Button
(size="icon") with CopyIcon/CheckIcon children and no accessible name; add an
aria-label to each call site of CodeBlockCopyButton (all four usages) so screen
readers get a meaningful name, or alternatively update the component in
src/components/landing/code-block.tsx to provide a sensible default aria-label
when spreading ...props into Button (e.g., when only icon children are present)
so Button(size="icon") always receives an aria-label; reference
CodeBlockCopyButton, Button, CopyIcon, and CheckIcon when making the change.
There was a problem hiding this comment.
Pull request overview
Adds the missing copy button to the Installation section’s command code blocks on the landing page (fixing issue #363), aligning the Installation tabbed commands with other code examples that already support copy-to-clipboard.
Changes:
- Render
CodeBlockCopyButtoninside each Installation commandCodeBlock(npm/pnpm/bun). - Ensures the copy affordance appears for tabbed install commands, not just single-code examples.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| > | ||
| <CodeBlockCopyButton /> | ||
| </CodeBlock> |
There was a problem hiding this comment.
CodeBlockCopyButton is rendered as an icon-only button without an accessible name. Please pass an aria-label (and/or add visually hidden text) so screen readers can identify it (e.g., "Copy command").
| > | ||
| <CodeBlockCopyButton /> | ||
| </CodeBlock> |
There was a problem hiding this comment.
CodeBlockCopyButton is used as an icon-only control here without an accessible label. Add an aria-label (and/or sr-only text) so assistive tech can announce the purpose of the button.
| > | ||
| <CodeBlockCopyButton /> | ||
| </CodeBlock> |
There was a problem hiding this comment.
This icon-only CodeBlockCopyButton needs an accessible name. Please add an aria-label (and/or visually hidden text) describing the action (copy the bun command).
|
@saurabh007007 thanks for the fix, merging it. |
Thanks for merging it! Happy to contribute — looking forward to working on more improvements. |
Summary
This PR adds the missing copy button inside the installation block. #363
Changes
src/components/landing/quick-integrations.tsxfile to add copy button hereScreenshots/Recordings (if UI)
How to Test
Steps to validate locally:
Checklist
Summary by CodeRabbit