Announce more error banners to screen readers

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.
This commit is contained in:
rcourtman
2026-05-10 14:49:07 +01:00
parent df56a1f14f
commit 51f75bcaf4
3 changed files with 17 additions and 3 deletions
@@ -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
@@ -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>
@@ -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>