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

[nyxsky404]

Summary

• Added aria-label attribute to the copy-to-clipboard button in the homepage hero code demo
• The label is dynamic: "Copy code" in default state, "Copied to clipboard" after clicking — communicating the state change to assistive technology

Type of change

• Bug fix

Related issue

Closes #463

Validation

• npm run lint
• npm test
• npm run build

Additional manual verification:

• Inspected the button in browser DevTools Accessibility panel — now shows accessible name "Copy code" / "Copied to clipboard" depending on state
• Confirmed no visual change to the UI; only the accessibility tree is affected
• Pre-existing useAI.test.ts failure is unrelated to this change (reproducible on unmodified main)

Screenshots or recordings

No visual change. The fix is only observable in the browser's Accessibility panel or with a screen reader. Before: button announced as unlabeled "button". After: announced as "Copy code, button".

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

---

Context: Three identical fixes were merged for other components via #283, #281, and #279. The homepage hero section was missed in those passes. This brings it to the same standard.

Summary by CodeRabbit

Release Notes

• New Features
  • Improved screen reader support for the copy button with dynamic state labels that reflect the current action status.

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

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: 97029a2e-7daa-494c-89f9-e471ec7cf7b8

📥 Commits

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

📒 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 that announces "Copy code" when inactive and "Copied to clipboard" after clicking, making the button's state and purpose accessible to screen readers.

Changes

Copy Button Accessibility

Layer / File(s)	Summary
Aria-label for copy button state modules/home/hero-code.tsx	The copy button receives a conditional aria-label that announces the button's purpose ("Copy code") and communicates state changes ("Copied to clipboard") to assistive technology.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• piyushdotcomm/Editron#15: Both are accessibility-focused changes that add aria-label attributes to icon-style UI controls for screen reader support.

Suggested labels

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

Suggested reviewers

• piyushdotcomm

Poem

🐰 A button once silent, now speaks with care,
Screen readers announce: "Copy code" in the air!
State changes whispered: "Clipboard, it's filled,"
The rabbit hops happily—accessibility willed! ✨

🚥 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 clearly and specifically describes the main change: adding an aria-label to the copy button for accessibility purposes in hero-code.tsx.
Description check	✅ Passed	The description comprehensively covers all required template sections with clear summaries, type of change, linked issue, validation steps, and checklist completion.
Linked Issues check	✅ Passed	The PR fully implements the fix specified in issue #463: adding a dynamic aria-label to the copy button that changes between 'Copy code' and 'Copied to clipboard' based on button state.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objective of adding aria-label accessibility attribute; no unrelated modifications or scope creep detected.

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