From 51f75bcaf48378e1d7b497bf5bf71b0da38179d8 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sun, 10 May 2026 14:49:07 +0100
Subject: [PATCH] Announce more error banners to screen readers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Continuing the aria-live pass started by df56a1f14 for login +
change-password errors. Add `role="alert"` + `aria-live="assertive"`
to:

  - Discovery notes saveError: when "Save notes" fails the user
    sees a red message — should be announced.
  - Suggest Profile Modal error: API failures returning suggestion
    data should announce so the user knows what failed.
  - Audit Log panel error: load failures or filter errors render a
    red banner — should announce.

All three are post-action error feedback (the user just clicked Save
or applied a filter), the highest-priority class for assertive
announcement.
---
 frontend-modern/src/components/Discovery/DiscoveryTab.tsx | 8 +++++++-
 frontend-modern/src/components/Settings/AuditLogPanel.tsx | 6 +++++-
 .../src/components/Settings/SuggestProfileModal.tsx       | 6 +++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend-modern/src/components/Discovery/DiscoveryTab.tsx b/frontend-modern/src/components/Discovery/DiscoveryTab.tsx
index 4021cd173..d4c6f54c2 100644
--- a/frontend-modern/src/components/Discovery/DiscoveryTab.tsx
+++ b/frontend-modern/src/components/Discovery/DiscoveryTab.tsx
@@ -759,7 +759,13 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                     class="w-full h-24 px-2 py-1.5 text-xs border border-border rounded bg-surface text-base-content focus:outline-none focus:ring-1 focus:ring-blue-500"
                   />
                   <Show when={saveError()}>
-                    <p class="text-xs text-red-600 dark:text-red-400">{saveError()}</p>
+                    <p
+                      role="alert"
+                      aria-live="assertive"
+                      class="text-xs text-red-600 dark:text-red-400"
+                    >
+                      {saveError()}
+                    </p>
                   </Show>
                   <div class="flex gap-2">
                     <button
diff --git a/frontend-modern/src/components/Settings/AuditLogPanel.tsx b/frontend-modern/src/components/Settings/AuditLogPanel.tsx
index b97de0537..2975c0d7b 100644
--- a/frontend-modern/src/components/Settings/AuditLogPanel.tsx
+++ b/frontend-modern/src/components/Settings/AuditLogPanel.tsx
@@ -350,7 +350,11 @@ export default function AuditLogPanel() {
       </Show>
 
       <Show when={error()}>
-        <div class="p-4 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 rounded-md text-red-700 dark:text-red-300">
+        <div
+          role="alert"
+          aria-live="assertive"
+          class="p-4 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 rounded-md text-red-700 dark:text-red-300"
+        >
           {error()}
         </div>
       </Show>
diff --git a/frontend-modern/src/components/Settings/SuggestProfileModal.tsx b/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
index 5c3cc0a38..2f3f5d7b2 100644
--- a/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
+++ b/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
@@ -296,7 +296,11 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
 
           {/* Error Message */}
           <Show when={error()}>
-            <div class="flex items-start gap-2 p-3 rounded-md bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800">
+            <div
+              role="alert"
+              aria-live="assertive"
+              class="flex items-start gap-2 p-3 rounded-md bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800"
+            >
               <AlertCircle class="w-4 h-4 text-red-600 dark:text-red-400 mt-0.5 shrink-0" />
               <p class="text-sm text-red-700 dark:text-red-300">{error()}</p>
             </div>