🎨 Palette: 動的なフォーム検証ステータスのアクセシビリティ改善#985
Conversation
コレクションと組織の作成ページにおける `slug` の重複チェック（動的検証）の結果がスクリーンリーダーで適切に読み上げられるように修正しました。 - `slug` 入力欄に `aria-describedby` を追加 - ステータスメッセージのコンテナに `aria-live="polite"` と `aria-atomic="true"` を追加 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. |
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? |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
📝 WalkthroughWalkthroughThis PR enhances form validation accessibility by adding ARIA live regions to slug status messages in two collection/organization creation pages and documenting the pattern in project guidance. The slug input fields are linked to their status messages via ChangesForm Validation Status Accessibility
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related issues
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)
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 のターゲットを |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![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: The date in the guidance entry header "## 2024-06-10 -
フォーム検証ステータスのアクセシビリティ向上" is incorrect; update the year to 2026 so the header
reads "## 2026-06-10 - フォーム検証ステータスのアクセシビリティ向上" by editing that markdown header
in .Jules/palette.md.
🪄 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: dfc4fb37-a801-418c-82ca-08903844d161
📒 Files selected for processing (3)
.Jules/palette.mdapps/web/src/app/collections/new/page.tsxapps/web/src/app/orgs/new/page.tsx
| **Learning:** フィードボタン（FeedButton）などのアイコン・記号のみのUIにおいて、クリップボードへのコピーや新規タブで開くといったアクションを実行するボタン/リンクには、ユーザーが目的を把握できるように明確な aria-label を設定することが重要です。二重読み上げを防止するため、title 属性との併用は避けるべきです。 | ||
| **Action:** 今後、アイコンボタンやラベルが不足しているインタラクティブ要素を実装・改善する際は、必ず aria-label に詳細な説明を含めるようにします。アクセシリティ向上のため、title 属性は原則として併用しません。また、アクセシブルな名前を変更した場合は、関連する単体テスト（getByRole などのクエリ）も必ず追従して修正します。 | ||
|
|
||
| ## 2024-06-10 - フォーム検証ステータスのアクセシビリティ向上 |
There was a problem hiding this comment.
Correct the date in the guidance entry.
The date shows "2024-06-10" but this PR was created on 2026-06-10. The year should be 2026 to accurately reflect when this guidance was added.
📅 Proposed fix
-## 2024-06-10 - フォーム検証ステータスのアクセシビリティ向上
+## 2026-06-10 - フォーム検証ステータスのアクセシビリティ向上📝 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.
| ## 2024-06-10 - フォーム検証ステータスのアクセシビリティ向上 | |
| ## 2026-06-10 - フォーム検証ステータスのアクセシビリティ向上 |
🤖 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, The date in the guidance entry header "##
2024-06-10 - フォーム検証ステータスのアクセシビリティ向上" is incorrect; update the year to 2026 so
the header reads "## 2026-06-10 - フォーム検証ステータスのアクセシビリティ向上" by editing that
markdown header in .Jules/palette.md.
![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 improves the accessibility of form validation statuses on the collection and organization creation pages by adding aria-describedby, aria-live="polite", and aria-atomic="true" attributes, and documents this practice in .Jules/palette.md. Feedback suggests dynamically changing the text color of the validation status in the collection creation page based on the status (e.g., green for available, red for taken) to improve visual feedback and maintain consistency.
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.
| <p | ||
| id="slug-status" | ||
| aria-live="polite" | ||
| aria-atomic="true" | ||
| className="text-xs mt-1 text-gray-500" | ||
| > |
There was a problem hiding this comment.
検証ステータス（「使用可能」「使用済み」「無効」など）のテキスト色が常に text-gray-500（灰色）のままになっています。
ユーザーがステータス（成功・エラーなど）を視覚的に直感的に識別できるように、ステータスに応じて動的にテキスト色を変更し、さらにダークモード（dark:）にも対応させることを推奨します。これにより、組織作成ページ（orgs/new/page.tsx）の表示とも一貫性が保たれます。
<p
id="slug-status"
aria-live="polite"
aria-atomic="true"
className={`text-xs mt-1 ${
slugStatus === "available"
? "text-green-600 dark:text-green-400"
: slugStatus === "taken" || slugStatus === "invalid"
? "text-red-600 dark:text-red-400"
: "text-gray-500 dark:text-gray-400"
}`}
>
1 participant
💡 What:
コレクション作成ページ (
apps/web/src/app/collections/new/page.tsx) と組織作成ページ (apps/web/src/app/orgs/new/page.tsx) におけるslugの重複チェックステータス表示をアクセシブルにしました。🎯 Why:
これまで、
slugを入力した際の動的な検証結果（「確認中...」「✓ 使用可能」「✗ 使用済み」など）は視覚的にしか表示されておらず、スクリーンリーダーを利用している視覚障害のあるユーザーには、入力内容が妥当かどうかリアルタイムに伝わらない状態でした。♿ Accessibility:
slugの入力欄にaria-describedbyを追加し、ステータス表示要素と関連付けました。aria-live="polite"とaria-atomic="true"を設定し、状態が変化するたびにスクリーンリーダーが内容を自動的に読み上げるようにしました。PR created automatically by Jules for task 369220659848914274 started by @is0692vs
Summary by CodeRabbit
Greptile Summary
コレクション作成ページと組織作成ページの
slug重複チェックステータス表示にアクセシビリティ属性を追加しました。スクリーンリーダーユーザーがリアルタイムの検証結果を把握できるようになっています。slug入力欄にaria-describedbyを追加し、ステータス表示要素と関連付けることで、フォーカス時に現在の状態が読み上げられるようにしました。aria-live=\"polite\"とaria-atomic=\"true\"を設定し、状態変化のたびにスクリーンリーダーが内容全体を自動読み上げするようにしました。.Jules/palette.mdに今回の学習内容を追記し、今後同様の実装で同じパターンが再利用できるよう記録しています。Confidence Score: 4/5
既存機能の視覚的な挙動に変更はなく、ARIA属性の追加のみのため安全にマージできます。
変更はすべてアクセシビリティ属性の追加のみで、既存のロジックやUIの見た目への影響はありません。
aria-describedby・aria-live・aria-atomicの組み合わせはフォーム検証ステータスの推奨パターンに沿っており、実装も両ページで一貫しています。✓/✗などの記号がスクリーンリーダーで想定外に読み上げられる可能性は残りますが、テキスト本体で意味は伝わるため動作上の問題はありません。特に注意が必要なファイルはありません。
Important Files Changed
<p>に id/aria-live/aria-atomic を付与。変更は正しく、idle状態で空要素になる挙動も問題なし。<div>に id/aria-live/aria-atomic を付与。パターンは正しく、idle時のnull返却もライブリージョンとして問題なし。Sequence Diagram
sequenceDiagram participant U as ユーザー participant I as slug入力欄(aria-describedby) participant S as ステータス要素(aria-live=polite) participant SR as スクリーンリーダー U->>I: フォーカス SR-->>U: 入力欄のラベル + aria-describedby の現在値を読み上げ U->>I: 文字を入力 I->>S: "slugStatus = checking" S-->>SR: ライブリージョン変化を検知 SR-->>U: 確認中... を読み上げ (polite) I->>S: "slugStatus = available" S-->>SR: ライブリージョン変化を検知 SR-->>U: 使用可能 を読み上げ (polite) Note over S,SR: aria-atomic=true により要素全体が一括で読み上げられるComments Outside Diff (1)
apps/web/src/app/collections/new/page.tsx, line 302-305 (link)✓や✗はスクリーンリーダーがそれぞれ「チェックマーク」「乗算記号」のように発音することがあります。テキスト自体（「使用可能」「使用済み」）は読み上げられるため致命的ではありませんが、aria-hidden="true"で記号を読み上げ対象から除外すると、よりクリーンなリーダー体験になります。同様の懸念がapps/web/src/app/orgs/new/page.tsxのslugStatusText()内のスパンにも存在します。Prompt To Fix With AI
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!
Prompt To Fix All With AI
Reviews (1): Last reviewed commit: "🎨 Palette: 動的なフォーム検証ステータスのアクセシビリティを改善" | Re-trigger Greptile