🎨 Palette: タグ入力サジェストのローディング読み上げを改善#983
Conversation
- Ensure `aria-live` region is persistently mounted in the DOM - Conditionally render loading text inside `aria-live` wrapper instead of conditionally mounting the wrapper itself - Add `aria-hidden="true"` to visual loading text to prevent redundant screen reader announcements 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 45 minutes and 54 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 We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. 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 (1)
📝 WalkthroughWalkthroughThis PR improves accessibility for dynamic loading states in the tag autocomplete component. It adds documentation guidance for implementing screen-reader-friendly loading indicators using persistent aria-live regions, then applies that pattern to ChangesScreen-reader accessibility for loading states
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes 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 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 dynamic loading states in the TagAutocompleteInput component. It introduces a persistent, visually hidden aria-live="polite" container to ensure screen readers announce the loading state correctly, and marks the visual loading text with aria-hidden="true" to prevent double announcements. Additionally, this accessibility pattern has been documented in .Jules/palette.md. There are no review comments, and I have no additional feedback to provide.
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.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
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 29: The header "## 2024-06-09 - 動的なローディング状態のアクセシビリティ改善" has the wrong
year; update the date in the header to "2026-06-09" so it reads "## 2026-06-09 -
動的なローディング状態のアクセシビリティ改善", ensuring the rest of the heading text and formatting
remain unchanged.
🪄 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: 6b521d62-17e5-474c-91c0-9fa88068b10c
📒 Files selected for processing (2)
.Jules/palette.mdapps/web/src/components/tag-autocomplete-input.tsx
…and resolve conflicts
1 participant
💡 What
TagAutocompleteInputコンポーネントにおける非同期ローディング状態（候補を取得中...）のアクセシビリティを改善しました。sr-onlyクラスを持つ永続的なaria-live="polite"コンテナを追加し、非同期取得中のみテキストを挿入するようにしました。<p>要素）にはaria-hidden="true"を追加し、スクリーンリーダーが同じメッセージを二重に読み上げないようにしました。🎯 Why
従来は、
aria-live属性を持つ要素（またはその親）自体がloading状態に応じて動的にDOMにマウント・アンマウントされていました。スクリーンリーダーはDOMに新しく追加された要素のaria-live属性を正しく検出できず、ローディング状態が読み上げられない問題がありました。永続的なコンテナを用意し、その中身だけを書き換えることで確実に読み上げられるようになります。♿ Accessibility
PR created automatically by Jules for task 9076758493013077869 started by @is0692vs
Summary by CodeRabbit
Release Notes
Greptile Summary
スクリーンリーダーがタグ候補の非同期取得中ローディング状態を正しく読み上げられるよう、
TagAutocompleteInputコンポーネントのアクセシビリティを改善しました。aria-live="polite"+sr-onlyコンテナをDOMに常駐させ、loading状態に応じてテキスト内容だけを切り替えることで、スクリーンリーダーへの確実なアナウンスを実現しています。<p>要素）にaria-hidden="true"を追加し、二重読み上げを防止しています。Confidence Score: 5/5
変更はアクセシビリティの小さな改善に限定されており、既存の機能ロジックには一切手を加えていないため、安全にマージできます。
コンポーネントの動作ロジックは変更されておらず、追加されたのは永続的な
aria-liveコンテナとaria-hidden属性のみです。.Jules/palette.mdの日付ズレは内部ドキュメントのみに影響する軽微な問題です。特に注意が必要なファイルはありません。
.Jules/palette.mdの日付修正は任意対応で問題ありません。Important Files Changed
aria-live="polite"コンテナを追加し、視覚的ローディング表示にaria-hidden="true"を付与。アクセシビリティ改善として適切な実装。2024-06-09となっており、実際の日付（2026-06-09）と2年ずれている。Sequence Diagram
sequenceDiagram participant User as ユーザー participant Input as input participant SRLive as aria-live div participant Visual as p aria-hidden User->>Input: テキスト入力（2文字以上） Note over Input: debounce 300ms後 setLoading=true Input->>SRLive: テキスト変更 "候補を取得中..." SRLive-->>User: 読み上げ "候補を取得中..." Input->>Visual: "loading=true でマウント" Note over Visual: aria-hidden=true のため読み上げなし Note over Input: APIレスポンス受信 Input->>SRLive: テキスト変更 "" Input->>Visual: "loading=false でアンマウント" Note over SRLive: 空文字なので読み上げなし Note over Input: open=true listbox表示Prompt To Fix All With AI
Reviews (1): Last reviewed commit: "a11y: improve dynamic loading notificati..." | Re-trigger Greptile