🎨 Palette: フォームのバリデーション・エラーメッセージのアクセシビリティ改善#1026
Conversation
Release: staging -> main (2026-06-24 15:53)
- Add `aria-describedby` and `aria-live="polite"` to dynamic slug validation status - Add `role="alert"` to form submission error messages - Target: Collection and Organization creation forms 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? |
|
Warning Review limit reached
More reviews will be available in 47 minutes and 40 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more credits in the billing tab to continue. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✨ Finishing Touches🧪 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 |
![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 the creation forms for collections and organizations by adding appropriate ARIA attributes (aria-describedby, aria-live="polite", and role="alert") to dynamic validation statuses and error messages, and documents these practices in .Jules/palette.md. The review feedback recommends keeping the role="alert" container elements permanently in the DOM rather than conditionally mounting them, ensuring that screen readers reliably detect and announce the error messages when they are populated.
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.
| </div> | ||
|
|
||
| {error && <p className="text-sm text-red-600">{error}</p>} | ||
| {error && <p role="alert" className="text-sm text-red-600">{error}</p>} |
There was a problem hiding this comment.
role="alert"（または aria-live）を持つ要素を {error &&
...} のように動的にマウント（DOMに挿入）すると、一部のスクリーンリーダーが要素の追加を検知できず、エラーメッセージが読み上げられない場合があります。
アクセシビリティを確実に向上させるためには、role="alert" を持つコンテナ要素を常に DOM 上に存在させておき、その中身（テキスト）のみを動的に更新することが推奨されます。
<p role="alert" className="text-sm text-red-600">
{error}
</p>
| </div> | ||
|
|
||
| {error && <p className="text-sm text-red-600">{error}</p>} | ||
| {error && <p role="alert" className="text-sm text-red-600">{error}</p>} |
There was a problem hiding this comment.
role="alert"（または aria-live）を持つ要素を {error &&
...} のように動的にマウントすると、一部のスクリーンリーダーでエラーメッセージの発生が正しくアナウンスされないことがあります。
コンテナとなる
要素は常に DOM にレンダリングしておき、エラーテキストのみを動的に流し込むように変更することで、より確実にスクリーンリーダーに通知することができます。
<p role="alert" className="text-sm text-red-600">
{error}
</p>
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}
| </div> | ||
|
|
||
| {error && <p className="text-sm text-red-600">{error}</p>} | ||
| {error && <p role="alert" className="text-sm text-red-600">{error}</p>} |
There was a problem hiding this comment.
role="alert" の要素を条件付きでDOMに挿入すると、VoiceOver（iOS/macOS）など一部のスクリーンリーダーは挿入タイミングの通知を取りこぼす場合があります。WAI-ARIAのベストプラクティスでは、ライブ領域はコンテンツが変化する前からDOMに存在させ、内容のみを更新する方式が推奨されています。error が空文字のときも要素を常にレンダリングすることで、すべてのスクリーンリーダーで確実に読み上げられます。
| {error && <p role="alert" className="text-sm text-red-600">{error}</p>} | |
| <p role="alert" aria-atomic="true" className="text-sm text-red-600">{error}</p> |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/src/app/collections/new/page.tsx
Line: 351
Comment:
`role="alert"` の要素を条件付きでDOMに挿入すると、VoiceOver（iOS/macOS）など一部のスクリーンリーダーは挿入タイミングの通知を取りこぼす場合があります。WAI-ARIAのベストプラクティスでは、ライブ領域はコンテンツが変化する前からDOMに存在させ、内容のみを更新する方式が推奨されています。`error` が空文字のときも要素を常にレンダリングすることで、すべてのスクリーンリーダーで確実に読み上げられます。
```suggestion
<p role="alert" aria-atomic="true" className="text-sm text-red-600">{error}</p>
```
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!
| </div> | ||
|
|
||
| {error && <p className="text-sm text-red-600">{error}</p>} | ||
| {error && <p role="alert" className="text-sm text-red-600">{error}</p>} |
There was a problem hiding this comment.
collections/new/page.tsx と同じ問題です。error が存在するときだけ <p role="alert"> をDOMに追加する条件付きレンダリングは、VoiceOverなどで通知が届かないリスクがあります。要素を常にDOMに置き、内容のみを切り替えることで信頼性が上がります。
| {error && <p role="alert" className="text-sm text-red-600">{error}</p>} | |
| <p role="alert" aria-atomic="true" className="text-sm text-red-600">{error}</p> |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/src/app/orgs/new/page.tsx
Line: 224
Comment:
`collections/new/page.tsx` と同じ問題です。`error` が存在するときだけ `<p role="alert">` をDOMに追加する条件付きレンダリングは、VoiceOverなどで通知が届かないリスクがあります。要素を常にDOMに置き、内容のみを切り替えることで信頼性が上がります。
```suggestion
<p role="alert" aria-atomic="true" className="text-sm text-red-600">{error}</p>
```
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:
aria-describedbyとaria-live="polite"を用いた動的な検証ステータスのアクセシビリティ改善、および送信エラーメッセージへのrole="alert"の追加を行いました。🎯 Why: 入力中に非同期で表示されるステータスメッセージ（「確認中...」「使用可能」など）がスクリーンリーダーによってスムーズに読み上げられるようになり、またエラー発生時には即座にユーザーへ通知されるようにするためです。
♿ Accessibility:
aria-describedbyで検証ステータスメッセージを紐付けました。aria-live="polite"を付与し、フォーカスを維持したまま変更を伝達できるようにしました。role="alert"を付与しました。PR created automatically by Jules for task 9217948501152220070 started by @is0692vs
Greptile Summary
スラッグ入力フィールドへの
aria-describedby付与、検証ステータスコンテナへのaria-live="polite"追加、送信エラーメッセージへのrole="alert"追加により、フォームのアクセシビリティを向上させるPRです。aria-live領域は常にDOMに存在するため設計は適切ですが、role="alert"の実装に改善の余地があります。aria-live="polite"を設定し、フォーカスを維持しながらスクリーンリーダーへ変更を伝達できるようにした。role="alert"を追加したが、条件付きレンダリング（{error && <p role="alert">...）のためVoiceOverなど一部スクリーンリーダーでDOM挿入タイミングの通知が届かない可能性がある。両ファイルで同様の問題が存在する。Confidence Score: 3/5
アクセシビリティの改善が目的のPRだが、
role="alert"の条件付きレンダリングにより一部スクリーンリーダーでエラー通知が届かない可能性があり、対処なしのマージは推奨しない。aria-live領域は常にDOMに存在させる設計で正しく機能するが、両フォームの送信エラー表示（{error && <p role="alert">...）は要素がDOMに新規挿入されるタイミングで通知を行う実装になっている。WAI-ARIAの仕様上、ライブ領域はコンテンツ変化前からDOMに存在させるべきであり、VoiceOver（iOS/macOS）では動的挿入の場合に読み上げが発生しないことが知られている。アクセシビリティ改善を目的とするPRにおいてこの不完全な実装が両ファイルに存在するため、修正を推奨する。両フォームページ（
apps/web/src/app/collections/new/page.tsxとapps/web/src/app/orgs/new/page.tsx）のエラーメッセージ実装を確認すること。Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[ユーザーがスラッグ入力] --> B{バリデーション} B -- 無効な形式 --> C[slugStatus = invalid] B -- 有効な形式 --> D[400ms デバウンス待機] D --> E[slugStatus = checking] E --> F[API呼び出し] F -- 使用可能 --> G[slugStatus = available] F -- 使用済み --> H[slugStatus = taken] F -- エラー --> I[slugStatus = idle] C --> J["aria-live='polite' 領域\n常にDOM上に存在\n→ スクリーンリーダーに通知"] G --> J H --> J E --> J K[フォーム送信] --> L{バリデーション OK?} L -- NG --> M["role='alert' 要素\n条件付きレンダリング\n⚠️ VoiceOverで通知漏れリスク"] L -- OK --> N[API POST /api/collections or /api/orgs] N -- エラー --> M N -- 成功 --> O[ページ遷移] style J fill:#d4edda,stroke:#28a745 style M fill:#fff3cd,stroke:#ffc107%%{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[ユーザーがスラッグ入力] --> B{バリデーション} B -- 無効な形式 --> C[slugStatus = invalid] B -- 有効な形式 --> D[400ms デバウンス待機] D --> E[slugStatus = checking] E --> F[API呼び出し] F -- 使用可能 --> G[slugStatus = available] F -- 使用済み --> H[slugStatus = taken] F -- エラー --> I[slugStatus = idle] C --> J["aria-live='polite' 領域\n常にDOM上に存在\n→ スクリーンリーダーに通知"] G --> J H --> J E --> J K[フォーム送信] --> L{バリデーション OK?} L -- NG --> M["role='alert' 要素\n条件付きレンダリング\n⚠️ VoiceOverで通知漏れリスク"] L -- OK --> N[API POST /api/collections or /api/orgs] N -- エラー --> M N -- 成功 --> O[ページ遷移] style J fill:#d4edda,stroke:#28a745 style M fill:#fff3cd,stroke:#ffc107Prompt To Fix All With AI
Reviews (1): Last reviewed commit: "feat(a11y): improve form validation and ..." | Re-trigger Greptile