🎨 Palette: Dynamic Form Validation Accessibility#1005
Conversation
Release: staging -> main (2026-06-17 02:44)
Added `aria-describedby` to the slug input, linked it to an `id="slug-status"` element, and added `aria-live="polite"` so screen readers announce validation states. Added `role="alert"` to the error message container. 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 ARIA accessibility attributes to the slug validation UI in ChangesDynamic Form Validation Accessibility
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 のターゲットを |
![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 form validation accessibility on the new collection page by adding aria-describedby and aria-live="polite" to the slug input and its status message, and role="alert" to the error message. It also documents these accessibility practices in .Jules/palette.md. The reviewer suggests further enhancing accessibility by dynamically applying the aria-invalid attribute to the slug input field when the slug is invalid or already taken.
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.
| maxLength={40} | ||
| aria-describedby="slug-status" | ||
| className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900" |
There was a problem hiding this comment.
スラッグのバリデーション状態（invalid または taken）に応じて、入力フィールドに aria-invalid 属性を動的に付与することをおすすめします。
これにより、スクリーンリーダーなどの支援技術が、入力フィールドが現在エラー状態であることをユーザーに即座に伝えることができるようになり、アクセシビリティがさらに向上します。
maxLength={40}
aria-describedby="slug-status"
aria-invalid={slugStatus === "invalid" || slugStatus === "taken" ? "true" : undefined}
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900"
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}
| aria-describedby="slug-status" | ||
| className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900" |
There was a problem hiding this comment.
aria-invalid が未設定のため、スラッグが「使用済み」または「無効」な状態でも入力フィールドがエラー状態であることをスクリーンリーダーに伝えられていません。aria-describedby でステータスメッセージは読み上げられますが、aria-invalid="true" がないと一部のスクリーンリーダーはフィールドがエラー状態であることを明示的にアナウンスしません（WCAG 1.3.1 / 4.1.2）。
| aria-describedby="slug-status" | |
| className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900" | |
| aria-describedby="slug-status" | |
| aria-invalid={slugStatus === "taken" || slugStatus === "invalid"} | |
| className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900" |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/src/app/collections/new/page.tsx
Line: 293-294
Comment:
`aria-invalid` が未設定のため、スラッグが「使用済み」または「無効」な状態でも入力フィールドがエラー状態であることをスクリーンリーダーに伝えられていません。`aria-describedby` でステータスメッセージは読み上げられますが、`aria-invalid="true"` がないと一部のスクリーンリーダーはフィールドがエラー状態であることを明示的にアナウンスしません（WCAG 1.3.1 / 4.1.2）。
```suggestion
aria-describedby="slug-status"
aria-invalid={slugStatus === "taken" || slugStatus === "invalid"}
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900"
```
How can I resolve this? If you propose a fix, please make it concise.1 participant
💡 What: コレクション作成フォームにおいて、スラッグの動的バリデーション結果をスクリーンリーダーに通知するための
aria-live="polite"と、フォーム送信エラーを即座に通知するためのrole="alert"を追加しました。🎯 Why: スラッグが使用可能かどうか（「確認中...」「✓ 使用可能」など）や、フォーム送信時のエラーが視覚的にしか伝わっていなかったため、支援技術ユーザーにも適切に状態変化を伝えるため。
♿ Accessibility:
aria-describedby="slug-status"を追加id="slug-status"とaria-live="polite"を追加role="alert"を追加PR created automatically by Jules for task 11488140522204002012 started by @is0692vs
Summary by CodeRabbit
Documentation
Refactor
Greptile Summary
コレクション作成フォームのスラッグ検証ステータスとフォーム送信エラーに対して、支援技術向けのアクセシビリティ属性を追加するPRです。
aria-describedby="slug-status"を追加し、ステータス<p>にid="slug-status"とaria-live="polite"を付与。ステータス要素は常にDOMに存在するためaria-liveが正しく機能します。role="alert"を付与。マウント時にスクリーンリーダーへ即座にアナウンスされます。Confidence Score: 4/5
アクセシビリティ属性の追加のみで、機能ロジックへの変更はなく安全にマージできます。
変更はスラッグ入力フィールドと送信エラー表示への aria-* 属性付与のみです。aria-live の対象要素が常にDOMに存在する設計になっており実装方針は正しいですが、スラッグが「使用済み」または「無効」な場合に aria-invalid が付与されていないため、スクリーンリーダーへのエラー状態通知が完全ではありません。
apps/web/src/app/collections/new/page.tsx — aria-invalid の追加を検討する価値があります。
Important Files Changed
Sequence Diagram
%%{init: {'theme': 'neutral'}}%% sequenceDiagram participant User as ユーザー participant Input as スラッグ入力 participant Status as aria-live polite 要素 participant SR as スクリーンリーダー participant ErrEl as role=alert 要素 User->>Input: 文字入力 Input->>Status: "slugStatus=checking" Status-->>SR: polite で読み上げ Status->>Status: "slugStatus=available" Status-->>SR: polite で読み上げ User->>Input: フォーム送信 Input->>ErrEl: error が truthy になりDOM追加 ErrEl-->>SR: alert で即座に読み上げ%%{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"}}}%% sequenceDiagram participant User as ユーザー participant Input as スラッグ入力 participant Status as aria-live polite 要素 participant SR as スクリーンリーダー participant ErrEl as role=alert 要素 User->>Input: 文字入力 Input->>Status: "slugStatus=checking" Status-->>SR: polite で読み上げ Status->>Status: "slugStatus=available" Status-->>SR: polite で読み上げ User->>Input: フォーム送信 Input->>ErrEl: error が truthy になりDOM追加 ErrEl-->>SR: alert で即座に読み上げPrompt To Fix All With AI
Reviews (1): Last reviewed commit: "feat: add accessible attributes to dynam..." | Re-trigger Greptile