🎨 Palette: 動的バリデーションのアクセシビリティを改善 by is0692vs · Pull Request #1007 · Hiroki-org/OpenShelf

is0692vs · 2026-06-19T15:00:48Z

💡 What: slug や org-slug などの動的バリデーション結果（「確認中...」「✓ 使用可能」など）を表示するテキスト領域に aria-live="polite" と一意の id を追加し、入力フィールドに aria-describedby で紐付けました。この改善を collections/new および orgs/new ページの両方に適用しました。

🎯 Why: 以前は、ユーザーが文字を入力して使用可能かどうかのバリデーション結果が変わっても、スクリーンリーダーユーザーには音声によるフィードバックがなく、ステータスの変化を把握することが困難でした。今回紐付けを行ったことで、視覚的な変化だけでなく、音声でも動的に状態が通知されるようになり、アクセシビリティが向上しました。

♿ Accessibility:

aria-describedby と aria-live="polite" の組み合わせにより、フォーカスを外すことなくステータス変化をスクリーンリーダーで把握可能になりました。
アラートではなく状態の更新であるため、polite を使用して他の読み上げを妨げないように配慮しています。

PR created automatically by Jules for task 9055284268182766155 started by @is0692vs

Greptile Summary

スクリーンリーダーユーザーが slug のリアルタイムバリデーション結果（確認中・使用可能・使用済みなど）を入力中に音声で把握できるよう、collections/new および orgs/new の両ページにアクセシビリティ属性を追加しました。

slug / org-slug 入力フィールドに aria-describedby を付与し、ステータス表示要素と紐付け。
ステータス表示要素に id と aria-live=\"polite\" を追加し、内容が変化した際にスクリーンリーダーが自動的に変更を読み上げるよう対応。
.Jules/palette.md に今回の改善から得られた学習記録を追記。

Confidence Score: 5/5

アクセシビリティ属性のみを追加する変更で、既存の機能ロジックへの影響はありません。

変更は aria-describedby・id・aria-live 属性の追加のみで、JavaScript ロジックや API 呼び出し、状態管理には一切触れていません。両ページで対称的かつ一貫した実装になっており、スクリーンリーダー向けの挙動改善として適切です。

特に注意が必要なファイルはありません。

Important Files Changed

Filename	Overview
apps/web/src/app/collections/new/page.tsx	`slug` 入力に aria-describedby を追加し、ステータス p 要素に id と aria-live を付与。
apps/web/src/app/orgs/new/page.tsx	`org-slug` 入力に aria-describedby を追加し、ステータス div に id と aria-live を付与。
.Jules/palette.md	動的バリデーションのアクセシビリティ改善に関する学習記録を追記。

Comments Outside Diff (1)

apps/web/src/app/collections/new/page.tsx, line 296-301 (link)

aria-atomic が未指定です。

aria-live="polite" 単体では、一部のスクリーンリーダーがリージョン内の「変化した部分だけ」を読み上げる場合があります。ステータスが切り替わると要素全体のテキストが差し替わるため実害は少ないですが、aria-atomic="true" を明示することで「必ず領域全体を1ユニットとして読み上げる」挙動が保証され、実装の意図がより明確になります。なお role="status" は aria-live="polite" aria-atomic="true" を暗黙的に持つため、こちらへの置き換えも選択肢です（orgs/new の <div> も同様）。

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/web/src/app/collections/new/page.tsx
Line: 296-301

Comment:
`aria-atomic` が未指定です。

`aria-live="polite"` 単体では、一部のスクリーンリーダーがリージョン内の「変化した部分だけ」を読み上げる場合があります。ステータスが切り替わると要素全体のテキストが差し替わるため実害は少ないですが、`aria-atomic="true"` を明示することで「必ず領域全体を1ユニットとして読み上げる」挙動が保証され、実装の意図がより明確になります。なお `role="status"` は `aria-live="polite" aria-atomic="true"` を暗黙的に持つため、こちらへの置き換えも選択肢です（`orgs/new` の `<div>` も同様）。

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!

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
apps/web/src/app/collections/new/page.tsx:296-301
`aria-atomic` が未指定です。

`aria-live="polite"` 単体では、一部のスクリーンリーダーがリージョン内の「変化した部分だけ」を読み上げる場合があります。ステータスが切り替わると要素全体のテキストが差し替わるため実害は少ないですが、`aria-atomic="true"` を明示することで「必ず領域全体を1ユニットとして読み上げる」挙動が保証され、実装の意図がより明確になります。なお `role="status"` は `aria-live="polite" aria-atomic="true"` を暗黙的に持つため、こちらへの置き換えも選択肢です（`orgs/new` の `<div>` も同様）。

_{Reviews (1): Last reviewed commit: "🎨 Palette: slug入力などの動的バリデーションのアクセシビリティを..." | Re-trigger Greptile}

Release: staging -> main (2026-06-17 02:44)

slug のリアルタイムなバリデーション結果（確認中、使用可能、使用済み等）をスクリーンリーダーが即座に読み上げるよう、以下の改善を実施しました。 - `<input>` 要素に `aria-describedby` を付与し、ステータス表示要素と紐付けました。 - ステータス表示要素に `id` と `aria-live="polite"` を付与しました。 - この変更を `collections/new` および `orgs/new` の両ページに適用しました。 - これらの学びを `.Jules/palette.md` にジャーナルとして記録しました。 Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>

google-labs-jules · 2026-06-19T15:00:49Z

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

vercel · 2026-06-19T15:00:51Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
open-shelf	Ignored		Jun 19, 2026 3:00pm

qodo-code-review · 2026-06-19T15:00:57Z

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

coderabbitai · 2026-06-19T15:00:59Z

Warning

Review limit reached

@is0692vs, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 44 minutes and 25 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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 refill rate.

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, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: eb75a7e2-14cc-4d4c-a9b2-0e58f474b10e

📥 Commits

Reviewing files that changed from the base of the PR and between 595a6b7 and 0657d1c.

📒 Files selected for processing (3)

.Jules/palette.md
apps/web/src/app/collections/new/page.tsx
apps/web/src/app/orgs/new/page.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch palette/dynamic-validation-a11y-9055284268182766155

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-06-19T15:01:06Z

このリポジトリでは staging 先行フローを採用しています。PR のターゲットを staging に変更しました。staging で動作確認後、staging → main の PR を作成してください。

gemini-code-assist

Code Review

This pull request improves the accessibility of dynamic validation status fields for slugs in both the collections and organizations creation pages by linking inputs to their status elements using aria-describedby and setting aria-live="polite" on the status elements. Additionally, a learning entry about this accessibility pattern was added to the palette documentation. The reviewer suggested adding aria-atomic="true" to the live regions to ensure screen readers announce the full status text reliably when it changes.

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.

gemini-code-assist · 2026-06-19T15:02:05Z

            className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900"
          />
-          <p className="text-xs mt-1 text-gray-500">
+          <p id="slug-status" aria-live="polite" className="text-xs mt-1 text-gray-500">


動的にテキストが切り替わるライブリージョン（aria-live）において、状態の変化（「確認中...」から「✓ 使用可能」など）をスクリーンリーダーがより確実に、かつ一貫して全体を読み上げられるようにするために、aria-atomic="true" を追加することをおすすめします。これにより、一部のスクリーンリーダーでの読み上げ漏れを防ぐことができます。

Suggested change

<p id="slug-status" aria-live="polite" className="text-xs mt-1 text-gray-500">

<p id="slug-status" aria-live="polite" aria-atomic="true" className="text-xs mt-1 text-gray-500">

gemini-code-assist · 2026-06-19T15:02:05Z

            />
          </div>
-          <div className="mt-1">{slugStatusText()}</div>
+          <div id="org-slug-status" aria-live="polite" className="mt-1">{slugStatusText()}</div>


aria-live="polite" を指定したコンテナ内で、slugStatusText() のように子要素（<span> など）が動的に差し替えられる場合、一部のスクリーンリーダーで変更の読み上げが正しくトリガーされない、または不安定になることがあります。aria-atomic="true" を追加することで、ライブリージョン内の変更時にコンテンツ全体が一体としてアナウンスされるようになり、スクリーンリーダーの互換性と信頼性が向上します。

Suggested change

<div id="org-slug-status" aria-live="polite" className="mt-1">{slugStatusText()}</div>

<div id="org-slug-status" aria-live="polite" aria-atomic="true" className="mt-1">{slugStatusText()}</div>

codecov · 2026-06-19T15:02:29Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

is0692vs and others added 2 commits June 18, 2026 14:18

Merge pull request #1003 from Hiroki-org/staging

595a6b7

Release: staging -> main (2026-06-17 02:44)

pull-request-size Bot added the size/XS label Jun 19, 2026

dosubot Bot added the enhancement New feature or request label Jun 19, 2026

github-actions Bot changed the base branch from main to staging June 19, 2026 15:01

gemini-code-assist Bot reviewed Jun 19, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

🎨 Palette: 動的バリデーションのアクセシビリティを改善#1007

🎨 Palette: 動的バリデーションのアクセシビリティを改善#1007
is0692vs wants to merge 2 commits into
stagingfrom
palette/dynamic-validation-a11y-9055284268182766155

is0692vs commented Jun 19, 2026 •

edited by greptile-apps Bot

Loading

Uh oh!

google-labs-jules Bot commented Jun 19, 2026

Uh oh!

vercel Bot commented Jun 19, 2026 •

edited

Loading

Uh oh!

qodo-code-review Bot commented Jun 19, 2026

Uh oh!

coderabbitai Bot commented Jun 19, 2026

Review limit reached

Uh oh!

github-actions Bot commented Jun 19, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Jun 19, 2026

Uh oh!

gemini-code-assist Bot Jun 19, 2026

Uh oh!

codecov Bot commented Jun 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	<p id="slug-status" aria-live="polite" className="text-xs mt-1 text-gray-500">
	<p id="slug-status" aria-live="polite" aria-atomic="true" className="text-xs mt-1 text-gray-500">

	<div id="org-slug-status" aria-live="polite" className="mt-1">{slugStatusText()}</div>
	<div id="org-slug-status" aria-live="polite" aria-atomic="true" className="mt-1">{slugStatusText()}</div>

Uh oh!

Conversation

is0692vs commented Jun 19, 2026 • edited by greptile-apps Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Comments Outside Diff (1)

Uh oh!

google-labs-jules Bot commented Jun 19, 2026

Uh oh!

vercel Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

qodo-code-review Bot commented Jun 19, 2026

Qodo reviews are paused for this user.

Uh oh!

coderabbitai Bot commented Jun 19, 2026

Review limit reached

Uh oh!

github-actions Bot commented Jun 19, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jun 19, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jun 19, 2026

Choose a reason for hiding this comment

Uh oh!

codecov Bot commented Jun 19, 2026

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

is0692vs commented Jun 19, 2026 •

edited by greptile-apps Bot

Loading

vercel Bot commented Jun 19, 2026 •

edited

Loading