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

Both the login error banner and the change-password error banner
appeared silently from a screen reader's perspective — when an auth
failure or validation error came back, the visible message rendered
but no announcement fired.

Add `role="alert"` + `aria-live="assertive"` to both. The role+live
combination ensures the message text is announced as soon as it
appears, even if the user's focus is on the input field. Visual
behavior is unchanged.

This is the start of an aria-live pass — there are no live regions
anywhere in the codebase right now, and these two surfaces (login
failure, password-change failure) are the highest-priority places
to start because the user has just performed an action and needs
immediate feedback.
---
 frontend-modern/src/components/Login.tsx                    | 2 ++
 .../src/components/Settings/ChangePasswordModal.tsx         | 6 +++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend-modern/src/components/Login.tsx b/frontend-modern/src/components/Login.tsx
index 3a6faa850..7ab9f832e 100644
--- a/frontend-modern/src/components/Login.tsx
+++ b/frontend-modern/src/components/Login.tsx
@@ -529,6 +529,8 @@ const LoginForm: Component<{
 
             <Show when={error()}>
               <div
+                role="alert"
+                aria-live="assertive"
                 class={`rounded-md p-4 ${
                   error().includes('locked')
                     ? 'bg-orange-50 dark:bg-orange-900'
diff --git a/frontend-modern/src/components/Settings/ChangePasswordModal.tsx b/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
index ce635935b..5aead9777 100644
--- a/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
+++ b/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
@@ -174,7 +174,11 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
           </div>
 
           <Show when={error()}>
-            <div class="p-3 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 rounded-md">
+            <div
+              role="alert"
+              aria-live="assertive"
+              class="p-3 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 rounded-md"
+            >
               <p class="text-sm text-red-600 dark:text-red-400">{error()}</p>
             </div>
           </Show>