From c896f387d5a4f05553877fadd031369a3d6fda9d Mon Sep 17 00:00:00 2001
From: Sonny May <sonnymaywi@gmail.com>
Date: Fri, 6 Nov 2026 15:07:07 +0000
Subject: [PATCH] a11y: announce AI suggestion results and errors to screen
 readers

The AI Suggestions panel rendered errors, notes and results with no live
region, so assistive tech gave no feedback after pressing Suggest Fixes.
Add role=alert to errors, role=status to notes/results, and aria-busy on
the button while loading.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0171zWzoJqWxtrs2UuHiKJ5W
---
 frontend/src/components/AISuggestions.jsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AISuggestions.jsx b/frontend/src/components/AISuggestions.jsx
index 53afb7d..2a207e7 100644
--- a/frontend/src/components/AISuggestions.jsx
+++ b/frontend/src/components/AISuggestions.jsx
@@ -48,6 +48,7 @@ export default function AISuggestions({ ticketId }) {
         <button
           onClick={run}
           disabled={loading || !ticketId}
+          aria-busy={loading}
           className="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 text-sm disabled:opacity-50"
         >
           {loading ? "Thinking…" : "Suggest Fixes"}
@@ -55,21 +56,26 @@ export default function AISuggestions({ ticketId }) {
       </div>
 
       {error && (
-        <div className="text-sm text-red-600 bg-red-50 border border-red-100 rounded px-3 py-2 mt-2">
+        <div
+          role="alert"
+          className="text-sm text-red-600 bg-red-50 border border-red-100 rounded px-3 py-2 mt-2"
+        >
           {error}
         </div>
       )}
 
       {note && !error && (
-        <p className="text-sm text-gray-500 mt-2">{note}</p>
+        <p role="status" className="text-sm text-gray-500 mt-2">{note}</p>
       )}
 
       {matches && matches.length === 0 && !note && !error && (
-        <p className="text-sm text-gray-500 mt-2">No similar resolved tickets found yet.</p>
+        <p role="status" className="text-sm text-gray-500 mt-2">
+          No similar resolved tickets found yet.
+        </p>
       )}
 
       {matches && matches.length > 0 && (
-        <div className="mt-4 space-y-3">
+        <div role="status" aria-label="Suggested similar tickets" className="mt-4 space-y-3">
           {matches.map((m, i) => (
             <div
               key={m.ticket_id || i}