🎨 Palette: 組織スラッグ入力のアクセシビリティ向上#1106
Conversation
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
Next review available in: 25 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?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 reviews. How do review 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 refer docs for additional details. Review details⚙️ 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 |
|
このリポジトリでは 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 the accessibility of the organization slug validation on the organization creation page. It hides decorative checkmarks and cross marks from screen readers using aria-hidden="true", and links the input field to its validation status using aria-describedby and aria-live="polite". The review feedback correctly points out that because the text "使用可能" is now nested alongside another span, the exact text matcher screen.getByText("使用可能") in the tests will fail. It is recommended to use a regular expression like /使用可能/ to match the text correctly.
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.
| }); | ||
|
|
||
| expect(screen.getByText("✓ 使用可能")).toBeInTheDocument(); | ||
| expect(screen.getByText("使用可能")).toBeInTheDocument(); |
There was a problem hiding this comment.
HTML構造が <span><span aria-hidden="true">✓ </span>使用可能</span> に変更されたため、screen.getByText("使用可能") は完全一致（exact: true）で要素を見つけることができず、テストが失敗します。テキストが子要素に分割されている場合でも正しくマッチするように、正規表現 /使用可能/ を使用することをお勧めします。
| expect(screen.getByText("使用可能")).toBeInTheDocument(); | |
| expect(screen.getByText(/使用可能/)).toBeInTheDocument(); |
| }); | ||
|
|
||
| expect(screen.getByText("✓ 使用可能")).toBeInTheDocument(); | ||
| expect(screen.getByText("使用可能")).toBeInTheDocument(); |
There was a problem hiding this comment.
HTML構造が <span><span aria-hidden="true">✓ </span>使用可能</span> に変更されたため、screen.getByText("使用可能") は完全一致（exact: true）で要素を見つけることができず、テストが失敗します。テキストが子要素に分割されている場合でも正しくマッチするように、正規表現 /使用可能/ を使用することをお勧めします。
| expect(screen.getByText("使用可能")).toBeInTheDocument(); | |
| expect(screen.getByText(/使用可能/)).toBeInTheDocument(); |
| }); | ||
|
|
||
| expect(screen.getByText("✓ 使用可能")).toBeInTheDocument(); | ||
| expect(screen.getByText("使用可能")).toBeInTheDocument(); |
There was a problem hiding this comment.
HTML構造が <span><span aria-hidden="true">✓ </span>使用可能</span> に変更されたため、screen.getByText("使用可能") は完全一致（exact: true）で要素を見つけることができず、テストが失敗します。テキストが子要素に分割されている場合でも正しくマッチするように、正規表現 /使用可能/ を使用することをお勧めします。
| expect(screen.getByText("使用可能")).toBeInTheDocument(); | |
| expect(screen.getByText(/使用可能/)).toBeInTheDocument(); |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| /> | ||
| </div> | ||
| <div className="mt-1">{slugStatusText()}</div> | ||
| <div id="org-slug-status" aria-live="polite" className="mt-1"> |
There was a problem hiding this comment.
aria-live="polite" 単体では、スクリーンリーダーの実装によってはライブリージョン内の変更箇所だけを読み上げる場合があります。aria-atomic="true" を追加すると、状態が切り替わるたびにリージョン全体（「使用可能」「使用済み」など）を丸ごと読み上げることが保証され、NVDA・JAWS・VoiceOver 間での挙動の揺れを防げます。
| <div id="org-slug-status" aria-live="polite" className="mt-1"> | |
| <div id="org-slug-status" aria-live="polite" aria-atomic="true" className="mt-1"> |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/src/app/orgs/new/page.tsx
Line: 199
Comment:
`aria-live="polite"` 単体では、スクリーンリーダーの実装によってはライブリージョン内の変更箇所だけを読み上げる場合があります。`aria-atomic="true"` を追加すると、状態が切り替わるたびにリージョン全体（「使用可能」「使用済み」など）を丸ごと読み上げることが保証され、NVDA・JAWS・VoiceOver 間での挙動の揺れを防げます。
```suggestion
<div id="org-slug-status" aria-live="polite" aria-atomic="true" className="mt-1">
```
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!
Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
|
Closing this old conflicting 4/5 branch rather than resolving generated documentation, test, and page conflicts for a small accessibility attribute change. |
了解しました。このPRがクローズされることを確認し、このタスクでの作業を終了します。 |
1 participant
💡 What: 組織作成ページのスラッグ入力フィールドに
aria-describedbyとaria-live="polite"を追加し、バリデーション状況（「使用可能」「使用済み」の状態）をスクリーンリーダーが動的に読み上げるようにしました。また、装飾的な「✓」と「✗」の記号をaria-hidden="true"で囲みました。🎯 Why: 入力チェックの結果がスクリーンリーダーユーザーに伝わらず、フォームの進行が困難になる問題を解決するため。
♿ Accessibility: 動的バリデーションの読み上げサポート (
aria-live) と、ノイズとなる不要な記号読み上げの防止 (aria-hidden) を行いました。PR created automatically by Jules for task 14524697182267444360 started by @is0692vs
Greptile Summary
組織作成ページのスラッグ入力フィールドに
aria-describedby/aria-live="polite"を追加し、動的バリデーション結果をスクリーンリーダーが読み上げられるようにしたアクセシビリティ改善 PR です。既存テストもaria-hiddenでラップされた記号を除いた文字列に正しく更新されています。page.tsx:✓/✗を<span aria-hidden="true">でラップし、ステータスdivにid="org-slug-status"とaria-live="polite"を、inputにaria-describedby="org-slug-status"を追加。orgs-new.test.tsx:getByText("✓ 使用可能")をgetByText("使用可能")へ変更。Testing Library は直接の子テキストノードのみを比較するため、この変更は正しく動作する。.Jules/palette.md: 今回の学びをパターンドキュメントに追記。Confidence Score: 4/5
アクセシビリティ属性の追加とテスト更新のみで、既存ロジックへの影響はなく安全にマージできます。
aria-live="polite" に aria-atomic="true" が付いていないため、スクリーンリーダーによってはリージョン全体ではなく変更差分だけを読み上げる実装差が出る可能性がありますが、機能的なデグレードは生じません。コアロジック・テスト・UIに問題はありません。
apps/web/src/app/orgs/new/page.tsx の div#org-slug-status に aria-atomic="true" を追加するかどうか確認してください。
Important Files Changed
Sequence Diagram
%%{init: {'theme': 'neutral'}}%% sequenceDiagram actor SR as スクリーンリーダー participant Input as input#org-slug participant LiveRegion as div#org-slug-status participant Page as NewOrgPage SR->>Input: フォーカス取得 Input-->>SR: ラベル「スラッグ」を読み上げ SR->>LiveRegion: aria-describedby 経由で説明を読み上げ Input->>Page: ユーザー入力 (onChange) Page->>Page: debounce 400ms Page->>LiveRegion: 「確認中...」を設定 LiveRegion-->>SR: polite モードで通知 Page->>Page: apiFetch(/api/orgs/:slug) alt 404 (使用可能) Page->>LiveRegion: span[aria-hidden]✓ + 使用可能 LiveRegion-->>SR: 「使用可能」を読み上げ else 200 (使用済み) Page->>LiveRegion: span[aria-hidden]✗ + 使用済み LiveRegion-->>SR: 「使用済み」を読み上げ end%%{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 actor SR as スクリーンリーダー participant Input as input#org-slug participant LiveRegion as div#org-slug-status participant Page as NewOrgPage SR->>Input: フォーカス取得 Input-->>SR: ラベル「スラッグ」を読み上げ SR->>LiveRegion: aria-describedby 経由で説明を読み上げ Input->>Page: ユーザー入力 (onChange) Page->>Page: debounce 400ms Page->>LiveRegion: 「確認中...」を設定 LiveRegion-->>SR: polite モードで通知 Page->>Page: apiFetch(/api/orgs/:slug) alt 404 (使用可能) Page->>LiveRegion: span[aria-hidden]✓ + 使用可能 LiveRegion-->>SR: 「使用可能」を読み上げ else 200 (使用済み) Page->>LiveRegion: span[aria-hidden]✗ + 使用済み LiveRegion-->>SR: 「使用済み」を読み上げ endPrompt To Fix All With AI
Reviews (1): Last reviewed commit: "feat: 組織スラッグ入力のアクセシビリティ向上" | Re-trigger Greptile
Context used: