🎨 Palette: Markdownエディタのタブのアクセシビリティ改善#1006
Conversation
Release: staging -> main (2026-06-17 02:44)
WCAG 2.5.3 (Label in Name) に準拠するため、MarkdownEditorコンポーネントの「Write」および「Preview」タブに、コンテキストを補足する `aria-label` を追加しました。これにより、スクリーンリーダーユーザーがタブの役割を正確に把握できるようになります。関連するユニットテストも更新しました。 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? |
|
このリポジトリでは staging 先行フローを採用しています。PR のターゲットを |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughTwo ChangesMarkdown Editor Tab Accessible Names
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 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)
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 |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![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 aria-label attributes to the "Write" and "Preview" tabs in the Markdown editor to provide more context for screen readers, updates the corresponding unit tests, and documents this learning in .Jules/palette.md. The reviewer recommends removing these aria-label attributes because the parent tablist already provides sufficient context, and using aria-label can cause WCAG 2.5.3 (Label in Name) violations when the page is translated (as translation tools translate visible text but often leave aria-label unchanged). Consequently, the reviewer suggests reverting the test queries and updating or removing the learning entry in .Jules/palette.md.
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.
| id={`${id}-tab-write`} | ||
| type="button" | ||
| role="tab" | ||
| aria-label="Write: Edit Markdown" |
There was a problem hiding this comment.
タブ要素（role="tab"）に aria-label を追加してアクセシブルな名前を拡張していますが、親要素の tablist にすでに aria-label="Markdown editor mode" が指定されているため、スクリーンリーダーは「Markdown editor mode、Write、タブ」のようにコンテキストを伴って読み上げます。そのため、aria-label で表示テキストを上書きして拡張する必要性は低いです。また、aria-label を使用すると、ブラウザの翻訳機能（Google翻訳など）が適用された際に、表示テキスト（「Write」）は翻訳される一方で aria-label は翻訳されず、音声認識ユーザーが翻訳後のテキストで操作できなくなる（WCAG 2.5.3 Label in Name の不一致が発生する）リスクがあります。アクセシビリティと国際化（翻訳対応）の観点から、aria-label は追加せず、表示テキスト（「Write」および「Preview」）をそのままアクセシブルな名前として使用することを推奨します。
| id={`${id}-tab-preview`} | ||
| type="button" | ||
| role="tab" | ||
| aria-label="Preview: View Output" |
There was a problem hiding this comment.
こちらも同様に、親の tablist に aria-label="Markdown editor mode" があるため、aria-label による拡張は不要です。翻訳時の WCAG 2.5.3 準拠を維持するためにも、aria-label を削除し、表示テキスト「Preview」をそのまま使用することを推奨します。
|
|
||
| // Write tab is selected | ||
| const writeTab = screen.getByRole("tab", { name: "Write" }); | ||
| const writeTab = screen.getByRole("tab", { name: "Write: Edit Markdown" }); |
There was a problem hiding this comment.
コンポーネント側で aria-label を削除する場合、テスト内のクエリも元の "Write" に戻す必要があります。
| ## 2025-06-19 - Markdown Editor Tab Accessible Names | ||
| **Learning:** タブUI（例：Markdownエディタの「Write」と「Preview」）において、短い表示テキスト（「Write」や「Preview」）だけではスクリーンリーダーユーザーにとってコンテキストが不足する場合があります。しかし、`aria-label`を追加してコンテキストを補足する際（例：「Write: Edit Markdown」）、WCAG 2.5.3（Label in Name）に準拠するためには、画面に表示されているテキスト（「Write」）を`aria-label`の先頭に正確に含める必要があります。これにより、音声認識ユーザーも視覚的なテキストを使って正しく要素を操作できるようになります。 | ||
| **Action:** 今後、短いテキストラベルを持つタブやボタンに対して、より詳細なコンテキストを提供するために`aria-label`を追加する際は、必ず表示されているテキストを`aria-label`の文字列（理想的には先頭）に含めるようにします。また、アクセシブルな名前を変更した場合は、関連するユニットテスト（`getByRole`での名前の指定など）も必ず更新してテストの失敗を防ぎます。 |
There was a problem hiding this comment.
Markdownエディタのタブにおける aria-label の追加を差し戻す場合、この学習履歴（Learning/Action）も削除するか、あるいは「tablist に適切なラベルがある場合は、翻訳ツールとの互換性やシンプルさを優先して aria-label による上書きを避けるべきである」という内容に更新することをお勧めします。
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| **Learning:** アイコンやコピーなどの汎用的なアクションを実行するボタンが複数リストされている場合、スクリーンリーダーユーザーがどの項目のアクションかを識別できるように、`aria-label` に具体的なコンテキスト（例: `Copy ${snippet.label}`）を含めることが重要です。同時に、表示されているテキスト（この場合は 'Copy'）を `aria-label` に含めることで WCAG 2.5.3（Label in Name）に準拠します。 | ||
| **Action:** 今後、リスト内やコンテキストが不明瞭なボタン（特に同じテキストラベルを持つ複数のボタン）を実装・改善する際は、必ず `aria-label` に詳細な説明を含めるようにします。また、以前試みた「文字数カウンターの aria-live 属性の削除」は、スクリーンリーダーユーザーへのフィードバックを完全に奪うことになりアクセシビリティを低下させる（リグレッション）ため、行わないよう注意します。 | ||
|
|
||
| ## 2025-06-19 - Markdown Editor Tab Accessible Names |
There was a problem hiding this comment.
2025-06-19 になっていますが、正しくは 2026-06-19 と思われます。
| ## 2025-06-19 - Markdown Editor Tab Accessible Names | |
| ## 2026-06-19 - Markdown Editor Tab Accessible Names |
Prompt To Fix With AI
This is a comment left during a code review.
Path: .Jules/palette.md
Line: 29
Comment:
エントリーの日付が `2025-06-19` になっていますが、正しくは `2026-06-19` と思われます。
```suggestion
## 2026-06-19 - Markdown Editor Tab Accessible Names
```
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!
1 participant
💡 What
MarkdownEditorコンポーネントの「Write」および「Preview」タブボタンに、それぞれより詳細な
aria-label（"Write: Edit Markdown"と"Preview: View Output"）を追加しました。また、これに伴い単体テストのクエリを更新しました。🎯 Why
表示されている短いテキスト（「Write」「Preview」）だけでは、スクリーンリーダーを使用しているユーザーにとって何の書き込み/プレビューなのかコンテキストが不足する可能性がありました。詳細な説明を加えることでアクセシビリティを向上させます。また、追加した
aria-labelには画面に表示されているテキストをそのまま先頭に含めることで、WCAG 2.5.3 (Label in Name) に完全に準拠し、音声認識ソフトウェアを使用するユーザーの操作性を損なわないようにしています。📸 Before/After
（視覚的な変更はありません）
♿ Accessibility
[role="tab"]要素にコンテキスト豊かなaria-labelを追加しました。aria-labelの接頭辞を一致させました。PR created automatically by Jules for task 9871967087450396684 started by @is0692vs
Greptile Summary
このPRはMarkdownエディタのWriteタブとPreviewタブにaria-labelを追加するアクセシビリティ改善です。WCAG 2.5.3準拠・既存ARIAセマンティクスへの影響なし。唯一の指摘は
.Jules/palette.mdの学習ログ日付誤記（2025→2026年）のみ。Confidence Score: 4/5
変更はaria-label属性の追加とそれに伴うテスト更新のみで、既存の動作・スタイル・ARIAセマンティクスへの悪影響はありません。
コンポーネント本体とテストコードは正確で問題なく、.Jules/palette.mdの学習ログに誤った年（2025年）が記載されているという軽微な修正点が1件あります。
.Jules/palette.mdの日付表記を確認してください（2025-06-19 → 2026-06-19）。
Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A["タブボタン要素\n(role=tab)"] --> B{"アクセシブルネーム\n計算ルール"} B --> C["aria-label が存在する場合\n→ aria-label を優先"] C --> D1["Writeボタン\naria-label: 'Write: Edit Markdown'"] C --> D2["Previewボタン\naria-label: 'Preview: View Output'"] D1 --> E1["タブパネル (role=tabpanel)\naria-labelledby → tab-write\n=> アクセシブルネーム: 'Write: Edit Markdown'"] D2 --> E2["タブパネル (role=tabpanel)\naria-labelledby → tab-preview\n=> アクセシブルネーム: 'Preview: View Output'"] B --> F["WCAG 2.5.3 (Label in Name)\n表示テキストがaria-labelの先頭に含まれる ✓"]%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%% flowchart TD A["タブボタン要素\n(role=tab)"] --> B{"アクセシブルネーム\n計算ルール"} B --> C["aria-label が存在する場合\n→ aria-label を優先"] C --> D1["Writeボタン\naria-label: 'Write: Edit Markdown'"] C --> D2["Previewボタン\naria-label: 'Preview: View Output'"] D1 --> E1["タブパネル (role=tabpanel)\naria-labelledby → tab-write\n=> アクセシブルネーム: 'Write: Edit Markdown'"] D2 --> E2["タブパネル (role=tabpanel)\naria-labelledby → tab-preview\n=> アクセシブルネーム: 'Preview: View Output'"] B --> F["WCAG 2.5.3 (Label in Name)\n表示テキストがaria-labelの先頭に含まれる ✓"]Prompt To Fix All With AI
Reviews (1): Last reviewed commit: "feat(web): add accessible names to markd..." | Re-trigger Greptile
Summary by CodeRabbit