fix: add missing aria-label to copy button in hero-code.tsx

[narutamaaurum]

Fixes #463 - Missing aria-label on copy button in hero-code.tsx

The copy button in the homepage hero code demo contained only icon children with no attribute. Screen readers announced it as an unlabeled interactive element ('button' with no name).

This fix adds a dynamic that communicates both the action and the state:

• when ready to copy
• after clicking

This matches the pattern already used in other components (issues #283, #281, #279).

Summary by CodeRabbit

• Bug Fixes
  • Enhanced accessibility for the code copy button with a dynamic aria-label that updates between "Copy code" and "Copied to clipboard" based on the current state. This provides better feedback to screen reader users and improves the overall experience for anyone using assistive technologies.

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

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]

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: e35d0456-532c-42fc-bc60-d910a6dc6a29

📥 Commits

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

📒 Files selected for processing (1)

• modules/home/hero-code.tsx

---

Walkthrough

The copy button in the homepage hero code demo now includes a dynamic aria-label attribute that announces "Copy code" when focused and switches to "Copied to clipboard" after a successful copy, making the button accessible to screen readers and communicating state changes without additional ARIA.

Changes

Copy button accessibility

Layer / File(s)	Summary
Dynamic aria-label for copy state modules/home/hero-code.tsx	The copy button adds an aria-label attribute tied to the copied state, switching between "Copy code" and "Copied to clipboard" to announce both the button's purpose and its state change to screen readers.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• piyushdotcomm/Editron#314: Updates copy/action buttons with dynamic aria-label attributes to improve accessibility in React components.
• piyushdotcomm/Editron#15: Adds aria-label attributes to icon-only controls in other components to improve accessibility.

Suggested labels

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

Suggested reviewers

• piyushdotcomm

Poem

🐰 A button that whispers its tale,
Now labels shine clear without fail,
Copy! Copied! States that ring true,
Screen readers sing songs just for you,
Accessibility hops in the light. ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

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.
Description check	❓ Inconclusive	The description explains what changed (added dynamic aria-label) and why (accessibility for screen readers), but doesn't follow the provided template structure with sections.	Consider following the repository's PR description template by adding sections like 'Type of change', 'Validation', and 'Checklist' to ensure consistency with repository standards.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding a missing aria-label to the copy button in hero-code.tsx to improve accessibility.
Linked Issues check	✅ Passed	The code change directly addresses issue #463 by adding the dynamic aria-label that switches between 'Copy code' and 'Copied to clipboard' as specified in the issue requirements.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to adding an aria-label attribute to the copy button, directly addressing the linked issue #463 with no extraneous modifications.

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