Skip to content

Add aria-label to copy page dropdown trigger#818

Open
MoonBrillante wants to merge 2 commits intoTanStack:mainfrom
MoonBrillante:fix-copy-page-dropdown-aria-label
Open

Add aria-label to copy page dropdown trigger#818
MoonBrillante wants to merge 2 commits intoTanStack:mainfrom
MoonBrillante:fix-copy-page-dropdown-aria-label

Conversation

@MoonBrillante
Copy link
Copy Markdown

@MoonBrillante MoonBrillante commented Apr 9, 2026

Summary

Adds an aria-label to the icon-only dropdown trigger next to the "Copy page" button so screen readers announce it more clearly.

Changes

  • add an aria-label to the dropdown trigger button
  • derive the aria-label from the label prop so it stays consistent when the label is overridden

Notes

I only changed this one component. I wasn't able to run the full local lint successfully because my local setup hit unrelated repository-wide issues, including a missing content-collections module and a Node version mismatch.

Related to #793

Summary by CodeRabbit

  • Bug Fixes
    • Enhanced accessibility of the copy page dropdown menu controls for assistive technology users.

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 9, 2026

👷 Deploy request for tanstack pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit e0a6ba0

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 9, 2026

📝 Walkthrough

Walkthrough

Added an aria-label attribute to the dropdown trigger Button in CopyPageDropdown, set dynamically to More ${label} options; no control flow, logic, or public API changes.

Changes

Cohort / File(s) Summary
Accessibility update
src/components/CopyPageDropdown.tsx
Added aria-label to the dropdown trigger button: More ${label} options (dynamic label value).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 I hopped in code with gentle hops,
Gave a button words so screen readers stop,
"More options" now politely said,
Guiding users as they tread,
A small change — big kindness on top. 🎈

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the main change: adding an aria-label to the copy page dropdown trigger button for accessibility.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ 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

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

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/components/CopyPageDropdown.tsx (1)

314-314: Consider deriving the trigger aria-label from the label prop for consistency.

Nice accessibility improvement. To avoid wording drift when label is overridden, build this string from label instead of hardcoding "Copy page".

♻️ Suggested tweak
-            aria-label="More Copy page options"
+            aria-label={`More ${label} options`}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/CopyPageDropdown.tsx` at line 314, The aria-label on the
dropdown trigger is hardcoded as "More Copy page options" which can drift from
the component's label prop; update the trigger to derive its aria-label from the
label prop (in the CopyPageDropdown component) by interpolating the label value
(e.g., `${label} options` or `More ${label} options`) so overriding the label
keeps the aria-label consistent; adjust any usages of the trigger element or
prop names in CopyPageDropdown to use this computed string.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/CopyPageDropdown.tsx`:
- Line 314: The aria-label on the dropdown trigger is hardcoded as "More Copy
page options" which can drift from the component's label prop; update the
trigger to derive its aria-label from the label prop (in the CopyPageDropdown
component) by interpolating the label value (e.g., `${label} options` or `More
${label} options`) so overriding the label keeps the aria-label consistent;
adjust any usages of the trigger element or prop names in CopyPageDropdown to
use this computed string.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 74c82027-7f12-4d1c-a0f2-96accf7a3a3e

📥 Commits

Reviewing files that changed from the base of the PR and between b02b195 and 5318d77.

📒 Files selected for processing (1)
  • src/components/CopyPageDropdown.tsx

@MoonBrillante
Copy link
Copy Markdown
Author

Addressed — the dropdown aria-label now derives from the label prop.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant