fix(a11y): add dynamic aria-label to copy button in hero-code.tsx

[Shiva210Jyoti]

Summary

Adds a dynamic aria-label to the copy-to-clipboard button in modules/home/hero-code.tsx.

Type of change

• Bug fix

Related issue

Closes #463

What changed

• Added aria-label={copied ? "Copied to clipboard" : "Copy code"} to the copy button
• Label updates dynamically based on button state, communicating both the action and state change to assistive technology
• No visual change — only the accessibility tree is affected

Validation

• npm run lint
• Inspected button in browser DevTools Accessibility panel — now shows accessible name "Copy code" / "Copied to clipboard" depending on state
• No other files modified

Context

This is the same class of fix applied to other components via #283, #281, and #279. The homepage hero section was missed in those passes. This brings it to the same standard.

I am the assigned contributor for this issue (GSSoC'26).

Summary by CodeRabbit

• Accessibility
  • Copy code button now announces its current state to screen readers ("Copy code" or "Copied to clipboard"), providing clearer feedback for assistive technology users.

[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, @Shiva210Jyoti!

Your PR has entered the 🚦 PR Review Pipeline.

🟢 GSSOC PR detected — your PR will be routed to an approved GSSOC mentor for Stage 2 review.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	🧑‍🏫 GSSOC Mentor	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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 37b31eca-2a20-4167-aa8c-4c211325cc05

📥 Commits

Reviewing files that changed from the base of the PR and between f12b223 and ddba5bd.

📒 Files selected for processing (1)

• modules/home/hero-code.tsx

---

Walkthrough

The PR adds a dynamic aria-label attribute to the copy-code button in the hero section of the homepage. The label switches between "Copy code" and "Copied to clipboard" based on the button's copied state, improving accessibility for screen reader users without altering copy behavior.

Changes

Copy Button Accessibility

Layer / File(s)	Summary
Dynamic aria-label for copy button modules/home/hero-code.tsx	The copy button element receives an aria-label prop that reflects both the button's purpose ("Copy code") and state change ("Copied to clipboard"), enabling screen readers to properly announce the button and its interaction feedback.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• piyushdotcomm/Editron#421: Both PRs add/update aria-label attributes for icon/button UI elements (hero-code.tsx copy-code button vs env-manager.tsx icon buttons), making the changes related at the same accessibility/code level.

Suggested labels

good first issue, gssoc:approved, type:bug, gssoc26, level:intermediate

Suggested reviewers

• piyushdotcomm

Poem

🐰 A button once silent, now speaks its truth clear,
Screen readers now hear: "Copy code!" without fear.
When clicked, it proclaims, "Copied—task done!"
Accessibility fixed, one label for fun. ✨

🚥 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 PR title clearly and specifically describes the main change: adding a dynamic aria-label to improve accessibility of the copy button in hero-code.tsx.
Description check	✅ Passed	The PR description is comprehensive and well-structured, covering summary, type of change, related issue, validation steps, and context. All template sections are completed.
Linked Issues check	✅ Passed	The code change directly addresses issue #463 by adding the dynamic aria-label to the copy button as specified, providing accessible names for both button states.
Out of Scope Changes check	✅ Passed	The PR contains only the targeted accessibility fix with no out-of-scope changes; only one file (modules/home/hero-code.tsx) was modified with a single, focused addition.

_{✏️ 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.}

[Shiva210Jyoti]

@piyushdotcomm could you please review this PR when you get a chance? I'm the assigned contributor for issue #463. Thank you!