🎨 Palette: スニペットコピーボタンのアクセシビリティ（aria-label）改善

[is0692vs]

💡 What: バッジスニペット（BadgeSnippet）コンポーネント内の各「Copy」ボタンに、対象のスニペット形式（Markdown, HTML, shields.io など）を示すコンテキストを含んだ aria-label を追加しました（例：aria-label="Copy Markdown"）。

🎯 Why: 複数の「Copy」ボタンが同じ画面上に並んでいる場合、視覚的には隣接するラベルで区別がついても、スクリーンリーダーのユーザーにとっては「Copy」としか読み上げられず、どの形式のスニペットをコピーしようとしているのか判別しづらいためです。

♿ Accessibility:

• WCAG 2.5.3 (Label in Name) の基準を満たすため、表示テキストである「Copy」という単語を含めつつ、文脈となる動的な値 ${snippet.label} を組み合わせることで、アクセシビリティを向上させています。

---

PR created automatically by Jules for task 6764395585767536628 started by @is0692vs

Summary by CodeRabbit

• Documentation

  • Added accessibility best practices for snippet copy buttons. Emphasizes the importance of providing descriptive accessible names when displaying multiple snippets to ensure clarity for all users.

• Bug Fixes

  • Improved screen reader accessibility by adding descriptive accessible labels to snippet copy buttons, enabling users to clearly identify and distinguish between different snippet types.

Greptile Summary

各 Copy ボタンに aria-label={Copy ${snippet.label}} を追加し、スクリーンリーダーユーザーが複数のスニペット形式（Markdown / HTML / shields.io）を区別できるようにしたアクセシビリティ改善 PR です。

• badge-snippet.tsx: ボタンの aria-label に snippet.label を組み込み、WCAG 2.5.3「Label in Name」に準拠した形で実装。
• .Jules/palette.md: 同一ページに並ぶアクションボタンへのコンテキスト付き aria-label 付与ルールをチームの学習メモに追記。

Confidence Score: 4/5

変更は Copy ボタンへの aria-label 追加のみで、既存のロジックや UI には影響しません。安全にマージできます。

変更は1行の属性追加で副作用はなく正確ですが、aria-label の正しさを検証するテストが追従していないため、将来的なラベル変更時に回帰を見逃すリスクが残っています。チーム自身の学習メモにもテスト更新を義務付けるルールが記されており、その点だけ対応が漏れています。

badge-snippet.test.tsx の copies selected snippet via clipboard テストが querySelector("button") による DOM 直接参照のままで、aria-label の正しさを検証していません。

Important Files Changed

Filename	Overview
apps/web/src/app/papers/[id]/badge-snippet.tsx	aria-label={Copy ${snippet.label}} を各 Copy ボタンに追加。WCAG 2.5.3 準拠の正しい実装。
.Jules/palette.md	同一アクションボタンが複数並ぶ場合の aria-label 付与ルールを学習メモに追加。

Sequence Diagram

sequenceDiagram
    participant SR as スクリーンリーダー
    participant Btn as Copy ボタン(aria-label="Copy Markdown")
    participant CB as Clipboard API

    SR->>Btn: フォーカス・読み上げ
    Note over SR,Btn: "Copy Markdown" と読み上げ（改善後）
    SR->>Btn: クリック
    Btn->>CB: navigator.clipboard.writeText(snippet.value)
    CB-->>Btn: 成功
    Btn-->>SR: toast "コピーしました"

Loading

_{Reviews (1): Last reviewed commit: "feat(web): add context to badge snippet ..." | Re-trigger Greptile}

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
open-shelf	Ignored		Jun 14, 2026 2:56pm

[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 →

[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

Run ID: 857f3fcb-0e80-44df-9076-0e1b6bf919b4

📥 Commits

Reviewing files that changed from the base of the PR and between a35977c and ede42a6.

📒 Files selected for processing (2)

• .Jules/palette.md
• apps/web/src/app/papers/[id]/badge-snippet.tsx

---

📝 Walkthrough

Walkthrough

The BadgeSnippet component's copy button gains an aria-label derived from the snippet's label (e.g., "Copy Markdown"), ensuring screen readers can distinguish between multiple copy buttons. A matching accessibility guideline entry is appended to .Jules/palette.md.

Changes

Snippet Copy Button Accessibility

Layer / File(s)	Summary
aria-label on copy button and palette guideline apps/web/src/app/papers/[id]/badge-snippet.tsx, .Jules/palette.md	Copy button in BadgeSnippet now sets aria-label from the snippet's label; the design palette records the guideline for giving context-aware labels to co-located copy buttons.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested labels

enhancement, javascript

Poem

🐇 Hop, hop — the button speaks its name,
"Copy Markdown!" it proudly proclaims.
No more mystery for ears that can't see,
Each snippet now labeled, clear as can be.
The palette records it for all rabbits to share,
Accessibility blooms — a breath of fresh air! 🌸

🚥 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
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the main change: adding aria-label attributes to snippet copy buttons for improved accessibility, which matches the PR objectives and file changes.
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.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-badge-snippet-copy-aria-label-6764395585767536628

---

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.}

[github-actions]

このリポジトリでは staging 先行フローを採用しています。PR のターゲットを staging に変更しました。staging で動作確認後、staging → main の PR を作成してください。

[gemini-code-assist]

Code Review

This pull request documents a new learning entry regarding accessible names for snippet copy buttons in .Jules/palette.md and implements this practice in badge-snippet.tsx by adding a descriptive aria-label to the copy button. There are no review comments to address.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!