🎨 Palette: フォームのエラー/ステータスメッセージのアクセシビリティ向上

[is0692vs]

💡 What: フォーム送信時などに動的に表示されるエラーメッセージやステータスメッセージのコンテナに role="alert" 属性を追加しました。
🎯 Why: エラー発生時にスクリーンリーダーが即座にエラー内容を読み上げるようになり、視覚に障害のあるユーザーにとってフォームの操作性が向上するため。
♿ Accessibility: 動的なエラー通知におけるスクリーンリーダーのサポートが改善されました。

---

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

Greptile Summary

フォーム送信時に動的に表示されるエラーメッセージ・ステータスメッセージのコンテナに role="alert" を追加し、スクリーンリーダーによる即時読み上げを実現するアクセシビリティ改善PRです。

• collections/new/page.tsx と upload/page.tsx のエラー専用要素に role="alert" を追加。条件付きレンダリングと組み合わせることで、DOMへの挿入タイミングで確実に読み上げが発火します。
• settings/page.tsx ではエラー・成功の両メッセージに同一の role="alert" を適用していますが、成功通知には role="status" が ARIA 仕様上より適切です。

Confidence Score: 4/5

全体的に安全にマージ可能。settings/page.tsx の成功通知に role="alert" が使われている点は軽微な改善余地あり。

settings/page.tsx ではエラーと成功の両メッセージに role="alert" が使われており、成功通知にはより控えめな role="status" が適切です。アクセシビリティ上の動作に影響しますが、機能的な破損やデータ損失のリスクはありません。他の2ファイルの変更は問題なく、エラー専用コンテナへの role="alert" 追加として正しく実装されています。

apps/web/src/app/settings/page.tsx — messageType に応じた role の分岐が確認推奨。

Important Files Changed

Filename	Overview
.Jules/palette.md	今回の変更に対応する学習メモを追記。内容は正確で問題なし。
apps/web/src/app/collections/new/page.tsx	条件付きレンダリングのエラー表示 に role="alert" を追加。エラー専用であり適切。
apps/web/src/app/settings/page.tsx	role="alert" をエラー・成功メッセージ両方に適用。成功通知には role="status" が望ましい。
apps/web/src/app/upload/page.tsx	エラー専用の に role="alert" を追加。条件付きレンダリングと組み合わせて正しく機能する。

Sequence Diagram

sequenceDiagram
    participant User as ユーザー
    participant Form as フォーム (React)
    participant DOM as DOM
    participant SR as スクリーンリーダー

    User->>Form: フォーム送信
    Form->>Form: バリデーション / APIコール
    alt エラー発生
        Form->>DOM: "error要素を挿入 (role="alert")"
        DOM-->>SR: ARIA live region 通知 (assertive)
        SR-->>User: エラー内容を即時読み上げ
    else 成功 (settings/page.tsx)
        Form->>DOM: "message要素を挿入 (role="alert" → "status" が望ましい)"
        DOM-->>SR: ARIA live region 通知
        SR-->>User: 成功メッセージを読み上げ
    end

Loading

Comments Outside Diff (1)

1. apps/web/src/app/settings/page.tsx, line 174-185 (link)

   role="alert" は割り込み通知（assertive）として扱われるため、成功メッセージに使うとスクリーンリーダーが他の操作を中断して読み上げます。成功通知のような重要度の低いメッセージには role="status" を使い、エラーのみ role="alert" を使うのが ARIA の推奨パターンです。

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: apps/web/src/app/settings/page.tsx
   Line: 174-185
   
   Comment:
   `role="alert"` は割り込み通知（assertive）として扱われるため、成功メッセージに使うとスクリーンリーダーが他の操作を中断して読み上げます。成功通知のような重要度の低いメッセージには `role="status"` を使い、エラーのみ `role="alert"` を使うのが ARIA の推奨パターンです。
   
   
   
   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/settings/page.tsx:174-185
`role="alert"` は割り込み通知（assertive）として扱われるため、成功メッセージに使うとスクリーンリーダーが他の操作を中断して読み上げます。成功通知のような重要度の低いメッセージには `role="status"` を使い、エラーのみ `role="alert"` を使うのが ARIA の推奨パターンです。

```suggestion
          {message && (
            <p
              role={messageType === "error" ? "alert" : "status"}
              className={`rounded-xl px-3 py-2 text-sm ${
                messageType === "error"
                  ? "border border-red-200 bg-red-50 text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300"
                  : "border border-green-200 bg-green-50 text-green-700 dark:border-green-900/60 dark:bg-green-950/40 dark:text-green-300"
              }`}
            >
              {message}
            </p>
          )}
```

_{Reviews (1): Last reviewed commit: "feat: 条件付きで表示されるエラー/ステータスメッセージに role="al..." | Re-trigger Greptile}

[google-labs-jules]

👋 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]

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

1 Skipped Deployment

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

[qodo-code-review]

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]

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 57 minutes and 13 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.

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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 29b3b3b9-53d4-4e04-a1fb-461159086ad6

📥 Commits

Reviewing files that changed from the base of the PR and between a35977c and da43409.

📒 Files selected for processing (4)

• .Jules/palette.md
• apps/web/src/app/collections/new/page.tsx
• apps/web/src/app/settings/page.tsx
• apps/web/src/app/upload/page.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette/a11y-role-alert-error-messages-14652813530381811688

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

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

[gemini-code-assist]

Code Review

This pull request improves accessibility by adding role="alert" to conditional error and status message containers across several pages, and documents this practice in .Jules/palette.md. The feedback suggests dynamically switching between role="alert" for errors and role="status" for success or normal status messages to avoid disrupting screen readers, and updating the documentation to reflect this distinction.

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]

成功メッセージ（「保存しました」など）に対して role="alert" を使用すると、スクリーンリーダーの読み上げが強制的に中断され、ユーザー体験（UX）を損ねる可能性があります。

一般的に、エラーメッセージには role="alert"（aria-live="assertive" 相当）が適していますが、成功メッセージなどの通常のステータス更新には role="status"（aria-live="polite" 相当）を使用するのがベストプラクティスです。

messageType に応じて動的に role を切り替えることをお勧めします。

Suggested change

	role="alert"
	role={messageType === "error" ? "alert" : "status"}

[gemini-code-assist]

エラーメッセージと通常のステータスメッセージ（成功通知など）では、スクリーンリーダーの割り込み挙動を制御するために異なる role を使用することが推奨されます。

• エラーメッセージ: role="alert"（即座に割り込んで読み上げる）
• 通常のステータスメッセージ: role="status"（現在の読み上げが終わってから優しく読み上げる）

そのため、「ステータスメッセージ」全般に role="alert" を適用するのではなく、用途に応じて使い分ける旨をドキュメントに記載しておくと、今後の実装の参考としてより正確になります。

[codecov]

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!