🎨 Palette: Badge Snippet コピーボタンのアクセシビリティ向上#989
Conversation
Add a descriptive aria-label to the Copy buttons in the BadgeSnippet component. This resolves an accessibility issue where multiple identical "Copy" buttons could not be distinguished by screen readers. The aria-label includes the snippet context while retaining the visible "Copy" text, complying with WCAG 2.5.3 (Label in Name). Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
📝 WalkthroughWalkthroughThe PR adds an accessibility label to the badge snippet copy button in the papers detail page. A new guidance entry documents the WCAG requirement, the component implementation adds the ChangesBadge snippet accessibility
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed due to a network error. 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. Comment |
|
このリポジトリでは staging 先行フローを採用しています。PR のターゲットを |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds an aria-label to the badge snippet copy button to improve accessibility and updates the corresponding test to query the button by its accessible name. It also documents this change in the palette learning log. The reviewer suggested a valuable improvement to place the visual text 'Copy' at the beginning of the aria-label to better align with WCAG 2.5.3 (Label in Name) best practices for voice input users, along with the corresponding test update.
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.
| type="button" | ||
| className="rounded bg-blue-600 px-2 py-1 text-white hover:bg-blue-500" | ||
| onClick={() => copySnippet(snippet.value)} | ||
| aria-label={`${snippet.label} スニペットを Copy`} |
There was a problem hiding this comment.
WCAG 2.5.3 (Label in Name) のベストプラクティスでは、音声入力ユーザーがボタンを特定しやすくするために、視覚的なテキスト（ここでは「Copy」）をアクセシブルな名前（aria-label）の先頭に配置することが推奨されています。
現在の aria-label は「Copy」が末尾にあるため、音声操作で「Copy」と発話した際にマッチしづらくなる可能性があります。以下のように「Copy」を先頭に配置する形式への変更を検討してください。
※この変更を行う場合、テストコード（badge-snippet.test.tsx）の期待値も合わせて更新する必要があります。
| aria-label={`${snippet.label} スニペットを Copy`} | |
| aria-label={"Copy " + snippet.label + " スニペット"} |
References
- When adding 'aria-label' to interactive elements such as buttons or select boxes within a list of items, ensure the label dynamically includes the specific item's name or identifier to provide necessary context for screen reader users.
| const copyButton = screen.getByRole("button", { | ||
| name: "Markdown スニペットを Copy", | ||
| }); |
There was a problem hiding this comment.
badge-snippet.tsx 側で aria-label の「Copy」を先頭に配置する改善を行う場合、テストコードのクエリもそれに合わせて更新する必要があります。
| const copyButton = screen.getByRole("button", { | |
| name: "Markdown スニペットを Copy", | |
| }); | |
| const copyButton = screen.getByRole("button", { | |
| name: "Copy Markdown スニペット", | |
| }); |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| const copyButton = screen.getByRole("button", { | ||
| name: "Markdown スニペットを Copy", | ||
| }); | ||
| fireEvent.click(copyButton); |
There was a problem hiding this comment.
"Markdown スニペットを Copy" のボタンだけを getByRole で取得していますが、"HTML スニペットを Copy" と "shields.io スニペットを Copy" の aria-label はテストで確認されていません。今後 snippet.label のフォーマットが変わった場合に、他のボタンのアクセシブルネームが壊れても気づけない可能性があります。renders preview and all snippet formats テスト内で getAllByRole("button", { name: /スニペットを Copy$/ }) で3件あることを確認するか、各ボタンの aria-label を個別にアサートするのが望ましいです。
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/src/app/papers/[id]/__tests__/badge-snippet.test.tsx
Line: 67-70
Comment:
**HTML・shields.io ボタンの aria-label が未検証**
`"Markdown スニペットを Copy"` のボタンだけを `getByRole` で取得していますが、`"HTML スニペットを Copy"` と `"shields.io スニペットを Copy"` の aria-label はテストで確認されていません。今後 `snippet.label` のフォーマットが変わった場合に、他のボタンのアクセシブルネームが壊れても気づけない可能性があります。`renders preview and all snippet formats` テスト内で `getAllByRole("button", { name: /スニペットを Copy$/ })` で3件あることを確認するか、各ボタンの aria-label を個別にアサートするのが望ましいです。
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| **Learning:** フィードボタン（FeedButton）などのアイコン・記号のみのUIにおいて、クリップボードへのコピーや新規タブで開くといったアクションを実行するボタン/リンクには、ユーザーが目的を把握できるように明確な aria-label を設定することが重要です。二重読み上げを防止するため、title 属性との併用は避けるべきです。 | ||
| **Action:** 今後、アイコンボタンやラベルが不足しているインタラクティブ要素を実装・改善する際は、必ず aria-label に詳細な説明を含めるようにします。アクセシリティ向上のため、title 属性は原則として併用しません。また、アクセシブルな名前を変更した場合は、関連する単体テスト（getByRole などのクエリ）も必ず追従して修正します。 | ||
|
|
||
| ## 2025-06-12 - Badge Snippet Copy Button Accessible Name |
There was a problem hiding this comment.
2025-06-12 になっていますが、正しくは 2026-06-12 です。
| ## 2025-06-12 - Badge Snippet Copy Button Accessible Name | |
| ## 2026-06-12 - Badge Snippet Copy Button Accessible Name |
Prompt To Fix With AI
This is a comment left during a code review.
Path: .Jules/palette.md
Line: 30
Comment:
ラーニングエントリの日付が `2025-06-12` になっていますが、正しくは `2026-06-12` です。
```suggestion
## 2026-06-12 - Badge Snippet Copy Button Accessible Name
```
How can I resolve this? If you propose a fix, please make it concise.![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.Jules/palette.md:
- Line 30: Update the date in the Markdown heading "## 2025-06-12 - Badge
Snippet Copy Button Accessible Name" to the correct year 2026 so it reads "##
2026-06-12 - Badge Snippet Copy Button Accessible Name"; ensure the corrected
heading remains in the same section order with other 2026 entries.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 5a7002c4-2ad8-4311-917a-38ec6514084b
📒 Files selected for processing (3)
.Jules/palette.mdapps/web/src/app/papers/[id]/__tests__/badge-snippet.test.tsxapps/web/src/app/papers/[id]/badge-snippet.tsx
| **Learning:** フィードボタン（FeedButton）などのアイコン・記号のみのUIにおいて、クリップボードへのコピーや新規タブで開くといったアクションを実行するボタン/リンクには、ユーザーが目的を把握できるように明確な aria-label を設定することが重要です。二重読み上げを防止するため、title 属性との併用は避けるべきです。 | ||
| **Action:** 今後、アイコンボタンやラベルが不足しているインタラクティブ要素を実装・改善する際は、必ず aria-label に詳細な説明を含めるようにします。アクセシリティ向上のため、title 属性は原則として併用しません。また、アクセシブルな名前を変更した場合は、関連する単体テスト（getByRole などのクエリ）も必ず追従して修正します。 | ||
|
|
||
| ## 2025-06-12 - Badge Snippet Copy Button Accessible Name |
There was a problem hiding this comment.
Fix the year in the date heading.
The entry is dated "2025-06-12" but appears after entries from May 2026 (lines 22, 26) and the PR was created on 2026-06-12. The year should be 2026, not 2025.
📅 Proposed fix
-## 2025-06-12 - Badge Snippet Copy Button Accessible Name
+## 2026-06-12 - Badge Snippet Copy Button Accessible Name📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ## 2025-06-12 - Badge Snippet Copy Button Accessible Name | |
| ## 2026-06-12 - Badge Snippet Copy Button Accessible Name |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.Jules/palette.md at line 30, Update the date in the Markdown heading "##
2025-06-12 - Badge Snippet Copy Button Accessible Name" to the correct year 2026
so it reads "## 2026-06-12 - Badge Snippet Copy Button Accessible Name"; ensure
the corrected heading remains in the same section order with other 2026 entries.
1 participant
💡 What: バッジスニペットの「Copy」ボタンに aria-label を追加
🎯 Why: 複数のスニペット（Markdown, HTML, shields.io）がある際、スクリーンリーダーでどのコードをコピーするボタンか明確に判別できるようにするため
♿ Accessibility: WCAG 2.5.3（Label in Name）に準拠し、視覚的テキスト「Copy」を含めつつ、コンテキスト（例：「Markdown スニペットを Copy」）を提供するように改善しました。合わせてアクセシビリティクエリ（
getByRole）を使ったテストの改修も行いました。PR created automatically by Jules for task 17134872365151810497 started by @is0692vs
Summary by CodeRabbit
Bug Fixes
Tests
Greptile Summary
バッジスニペットの「Copy」ボタンに
aria-labelを追加し、スクリーンリーダーがどのスニペット（Markdown / HTML / shields.io）に対するボタンかを識別できるようにした変更です。WCAG 2.5.3（Label in Name）に準拠するよう、視覚的テキスト "Copy" も aria-label に含まれています。badge-snippet.tsx: 各 Copy ボタンにaria-labelを追加badge-snippet.test.tsx: DOM 直接操作からgetByRoleを使うアクセシブルなクエリに刷新.Jules/palette.md: 今回の知見をラーニングとして記録（ただし日付が 2025-06-12 と誤記）Confidence Score: 4/5
コンポーネント本体の変更は一行のみで動作への影響はなく、マージして問題ありません。
コンポーネント側の変更は aria-label を追加するだけで、既存ロジックには触れていません。テストは DOM 操作から getByRole へ改善されていますが、HTML と shields.io ボタンの aria-label が検証されておらず、将来的に壊れても検知できない状態です。
badge-snippet.test.tsx — HTML と shields.io ボタンの aria-label アサーションが不足しています。
Important Files Changed
Prompt To Fix All With AI
Reviews (1): Last reviewed commit: "feat(a11y): add accessible name to badge..." | Re-trigger Greptile