fix: add aria-label to hero copy button

[Nishra2611]

@piyushdotcomm

Summary

• Added a dynamic aria-label to the copy-to-clipboard button in modules/home/hero-code.tsx.
• The label changes between "Copy code" and "Copied to clipboard" based on the button state.
• This provides an accessible name for screen readers and improves usability for users relying on assistive technologies.

Type of change

• Bug fix
• New feature
• Refactor
• Documentation
• Test or CI improvement
• Starter template change

Related issue

Closes #

Validation

• npm run lint
• npm test
• npm run build

List any additional manual verification you performed:

• Ran the application locally and verified the homepage hero code demo.
• Confirmed the copy button now exposes an accessible name through the aria-label attribute.
• Verified that the label changes from "Copy code" to "Copied to clipboard" after clicking the button.
• Inspected the button using Chrome DevTools Accessibility tools to ensure the accessible name is correctly announced.

Screenshots or recordings

Checklist

• I kept this PR focused on one primary change
• I updated documentation if behavior changed
• I did not commit secrets, local logs, or scratch files
• I am requesting review on the correct scope

Summary by CodeRabbit

• Accessibility Improvements
  • Enhanced the copy button with improved screen reader support, providing clearer feedback when code is copied to clipboard.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[github-actions]

👋 Thanks for opening a PR, @Nishra2611!

Your PR has entered the 🚦 PR Review Pipeline.

⚪ Standard PR detected — your PR will follow the standard review pipeline.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	👥 Maintainer	Code + Quality Review
Stage 3 — PA / Maintainer Review	🔑 Project Admin	Final Merge Decision

A pipeline status comment will appear below and update automatically as your PR progresses.

---

While you wait

• Sign all commits (git commit -s)
• Link your issue (Closes #123)
• Use a feature branch (not main)
• Avoid unrelated changes

This comment is posted only once.

[coderabbitai]

Walkthrough

This PR adds an aria-label attribute to the copy button in the hero code demo component. The label dynamically reflects the button state—displaying "Copied to clipboard" when clicked, or "Copy code" otherwise—improving accessibility for screen reader users without changing behavior.

Changes

Accessibility Enhancement

Layer / File(s)	Summary
Copy button aria-label modules/home/hero-code.tsx	An aria-label attribute was added to the copy button with conditional text based on the copied state, providing screen reader users with feedback about the button's current state.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related issues

• [Bug]: Missing aria-label on copy button in hero-code.tsx — inaccessible to screen readers #463: This PR directly implements the suggested aria-label fix for the copy button accessibility bug.

Possibly related PRs

• piyushdotcomm/Editron#391: Both PRs add aria-label attributes to button elements as part of the same accessibility enhancement pattern.

Suggested labels

good first issue, gssoc:approved, mentor:piyushdotcomm, type:bug, level:beginner, gssoc26

Suggested reviewers

• piyushdotcomm

Poem

A rabbit hops through hero code with cheer, 🐰
Adding labels so the screen-readers hear!
"Copy code" now speaks with voice so clear,
Accessibility blooms—the path is near! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: adding an aria-label attribute to the copy button for accessibility improvements.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The PR description comprehensively addresses all required template sections with clear details about the change, proper type classification, validation steps, and manual verification.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}