From dad67590cfbfd45d36f6b16265ea2fbd21d73542 Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Wed, 22 Jul 2026 15:18:19 -0700
Subject: [PATCH 01/12] Add button a11y requirements, decouple error message
 from live region

---
 .../src/components/button/button.a11y.md      |  8 +++++++
 resources/js/common/layouts/AuthBase.vue      |  2 +-
 .../auth/components/login/login-form.ts       | 22 ++++++++++++++-----
 3 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 packages/craftcms-ui/src/components/button/button.a11y.md

diff --git a/packages/craftcms-ui/src/components/button/button.a11y.md b/packages/craftcms-ui/src/components/button/button.a11y.md
new file mode 100644
index 00000000000..edc4836fda8
--- /dev/null
+++ b/packages/craftcms-ui/src/components/button/button.a11y.md
@@ -0,0 +1,8 @@
+# `craft-button` accessibility
+
+## Requirements
+
+- [x] Visible focus indicator via `:focus-visible` pseudo-class. This includes:
+  - An offset outline to maintain visibility against the button background color.
+  - An outline color that uses the adaptive color token (`--c-color-focus-outline`) for visibility in both light and dark modes.
+- [x] Named slots (are provided for  (SC 1.3.2: Meaningful Sequence)
\ No newline at end of file
diff --git a/resources/js/common/layouts/AuthBase.vue b/resources/js/common/layouts/AuthBase.vue
index c675589546f..97ab5cbb056 100644
--- a/resources/js/common/layouts/AuthBase.vue
+++ b/resources/js/common/layouts/AuthBase.vue
@@ -82,7 +82,7 @@
   .cp-login__powered-by {
     display: block;
     margin-block-start: calc(70rem / 16);
-    opacity: 0.92;;
+    opacity: 0.92;
     text-align: center;
 
     &:hover,
diff --git a/resources/js/modules/auth/components/login/login-form.ts b/resources/js/modules/auth/components/login/login-form.ts
index 3713c24794e..13718b1a773 100644
--- a/resources/js/modules/auth/components/login/login-form.ts
+++ b/resources/js/modules/auth/components/login/login-form.ts
@@ -73,7 +73,8 @@ export default class CraftLoginForm extends LitElement {
   @query('craft-input-password.login-password')
   private _passwordInput?: HTMLElement & {value: string};
   @query('.login-remember-me') private _rememberMeInput?: HTMLInputElement;
-
+  @query('.cp-visually-hidden[role="status"]')
+  private _liveRegion!: HTMLDivElement;
   override async connectedCallback() {
     super.connectedCallback();
 
@@ -207,10 +208,21 @@ export default class CraftLoginForm extends LitElement {
 
   #setError(message: string) {
     this._error = message.trim();
-    const live = this.shadowRoot?.querySelector(
-      '.cp-visually-hidden[role="status"]'
-    );
-    if (live) live.textContent = message;
+    this.#setLiveRegion(message);
+  }
+
+  #setLiveRegion(message: string) {
+    if (!this._liveRegion) return;
+
+    this._liveRegion.textContent = message.trim();
+
+    setTimeout(() => {
+      const textContent = this._liveRegion.textContent;
+
+      if (textContent === message) {
+        this._liveRegion.textContent = '';
+      }
+    }, 5000);
   }
 
   #handleSuccess(returnUrl: string) {

From cf224345eadc63da1f69ace4f2039d1b0f21d049 Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Thu, 23 Jul 2026 10:49:25 -0700
Subject: [PATCH 02/12] Add new component/composable for live region, use in
 AuthBase and both login and reset forms

---
 .../js/common/components/GlobalLiveRegion.vue | 17 +++++++++++
 .../composables/useAnnouncementStore.ts       | 28 +++++++++++++++++++
 resources/js/common/layouts/AuthBase.vue      |  2 ++
 .../auth/components/login/login-form.ts       | 22 +++------------
 .../components/login/login-reset-password.ts  | 10 ++++++-
 5 files changed, 60 insertions(+), 19 deletions(-)
 create mode 100644 resources/js/common/components/GlobalLiveRegion.vue
 create mode 100644 resources/js/common/composables/useAnnouncementStore.ts

diff --git a/resources/js/common/components/GlobalLiveRegion.vue b/resources/js/common/components/GlobalLiveRegion.vue
new file mode 100644
index 00000000000..ad96e20080e
--- /dev/null
+++ b/resources/js/common/components/GlobalLiveRegion.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import {useAnnouncementStore} from '@/common/composables/useAnnouncementStore';
+
+  const {announcement} = useAnnouncementStore();
+</script>
+
+<template>
+  <div
+    id="global-live-region"
+    class="sr-only"
+    role="status"
+  >
+    {{ announcement }}
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/resources/js/common/composables/useAnnouncementStore.ts b/resources/js/common/composables/useAnnouncementStore.ts
new file mode 100644
index 00000000000..ce55377b387
--- /dev/null
+++ b/resources/js/common/composables/useAnnouncementStore.ts
@@ -0,0 +1,28 @@
+import { ref } from 'vue';
+
+interface AnnouncerOptions {
+  timeout: number;
+}
+
+const announcement = ref<string | null>(null);
+const announcerTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+
+export function useAnnouncementStore(options: Partial<AnnouncerOptions> = {}) {
+  function announce(message: string | null) {
+    if (!message) {
+      return;
+    }
+
+    if (announcerTimeout.value !== null) {
+      clearTimeout(announcerTimeout.value);
+    }
+
+    announcement.value = message;
+
+    announcerTimeout.value = setTimeout(() => {
+      announcement.value = null;
+    }, options.timeout || 5000);
+  }
+
+  return {announcement, announce};
+}
diff --git a/resources/js/common/layouts/AuthBase.vue b/resources/js/common/layouts/AuthBase.vue
index 97ab5cbb056..a1bcb4f5e10 100644
--- a/resources/js/common/layouts/AuthBase.vue
+++ b/resources/js/common/layouts/AuthBase.vue
@@ -3,6 +3,7 @@
   import useCraftData from '@/common/composables/useCraftData';
   import craftCmsLogoUrl from '@public/images/craftcms.svg';
   import {t} from '@craftcms/ui';
+  import GlobalLiveRegion from '@/common/components/GlobalLiveRegion.vue';
 
   const props = withDefaults(
     defineProps<{
@@ -19,6 +20,7 @@
 <template>
   <Head :title="props.title"></Head>
   <main class="cp-login">
+    <GlobalLiveRegion />
     <div class="cp-login__wrapper grid gap-3 justify-items-center">
       <h1 class="flex justify-center">
         <img
diff --git a/resources/js/modules/auth/components/login/login-form.ts b/resources/js/modules/auth/components/login/login-form.ts
index 13718b1a773..68d928f5927 100644
--- a/resources/js/modules/auth/components/login/login-form.ts
+++ b/resources/js/modules/auth/components/login/login-form.ts
@@ -15,7 +15,7 @@ import componentStyles from './login-form.styles.js';
 import type {TwoFactorData} from './login-challenge.js';
 import './login-challenge.js';
 import './login-reset-password.js';
-
+import { useAnnouncementStore } from '@/common/composables/useAnnouncementStore';
 type View = 'login' | 'reset-password' | 'challenge';
 
 /**
@@ -73,8 +73,7 @@ export default class CraftLoginForm extends LitElement {
   @query('craft-input-password.login-password')
   private _passwordInput?: HTMLElement & {value: string};
   @query('.login-remember-me') private _rememberMeInput?: HTMLInputElement;
-  @query('.cp-visually-hidden[role="status"]')
-  private _liveRegion!: HTMLDivElement;
+
   override async connectedCallback() {
     super.connectedCallback();
 
@@ -207,22 +206,9 @@ export default class CraftLoginForm extends LitElement {
   }
 
   #setError(message: string) {
+    const { announce } = useAnnouncementStore();
     this._error = message.trim();
-    this.#setLiveRegion(message);
-  }
-
-  #setLiveRegion(message: string) {
-    if (!this._liveRegion) return;
-
-    this._liveRegion.textContent = message.trim();
-
-    setTimeout(() => {
-      const textContent = this._liveRegion.textContent;
-
-      if (textContent === message) {
-        this._liveRegion.textContent = '';
-      }
-    }, 5000);
+    announce(message);
   }
 
   #handleSuccess(returnUrl: string) {
diff --git a/resources/js/modules/auth/components/login/login-reset-password.ts b/resources/js/modules/auth/components/login/login-reset-password.ts
index 92c21b191e4..2b463865e89 100644
--- a/resources/js/modules/auth/components/login/login-reset-password.ts
+++ b/resources/js/modules/auth/components/login/login-reset-password.ts
@@ -2,6 +2,7 @@ import {html, LitElement, nothing} from 'lit';
 import {property, query, state} from 'lit/decorators.js';
 import {actionClient, t} from '@craftcms/ui';
 import componentStyles from './login-form.styles.js';
+import { useAnnouncementStore} from '@/common/composables/useAnnouncementStore';
 
 /**
  * @summary Password-reset request form. Fires `reset-back` when the user
@@ -35,6 +36,11 @@ export default class CraftLoginResetPassword extends LitElement {
     return this.useEmailAsUsername ? t('Email') : t('Username or Email');
   }
 
+  #setError(message: string) {
+    this._error = message.trim();
+    useAnnouncementStore().announce(message);
+  }
+
   async #onSubmit(event: Event) {
     event.preventDefault();
 
@@ -55,7 +61,9 @@ export default class CraftLoginResetPassword extends LitElement {
       dialog.appendChild(msg);
       document.body.appendChild(dialog);
     } catch (e: any) {
-      this._error = e?.response?.data?.message ?? t('A server error occurred.');
+      this.#setError(
+        e?.response?.data?.message ?? t('A server error occurred.')
+      );
     } finally {
       this._busy = false;
     }

From 688915f4c799a510e56507c9a909268d5761a7f2 Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Thu, 23 Jul 2026 11:48:27 -0700
Subject: [PATCH 03/12] Use previous composable but remove transition and
 conditional render

---
 .../js/common/components/GlobalLiveRegion.vue |  4 +--
 resources/js/common/components/LiveRegion.vue | 21 --------------
 .../composables/useAnnouncementStore.ts       | 28 -------------------
 resources/js/common/layouts/AppLayout.vue     |  4 +--
 .../auth/components/login/login-form.ts       |  4 +--
 .../components/login/login-reset-password.ts  |  4 +--
 6 files changed, 8 insertions(+), 57 deletions(-)
 delete mode 100644 resources/js/common/components/LiveRegion.vue
 delete mode 100644 resources/js/common/composables/useAnnouncementStore.ts

diff --git a/resources/js/common/components/GlobalLiveRegion.vue b/resources/js/common/components/GlobalLiveRegion.vue
index ad96e20080e..bf7167543a1 100644
--- a/resources/js/common/components/GlobalLiveRegion.vue
+++ b/resources/js/common/components/GlobalLiveRegion.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import {useAnnouncementStore} from '@/common/composables/useAnnouncementStore';
+  import {useAnnouncer} from '@/common/composables/useAnnouncer';
 
-  const {announcement} = useAnnouncementStore();
+  const {announcement} = useAnnouncer();
 </script>
 
 <template>
diff --git a/resources/js/common/components/LiveRegion.vue b/resources/js/common/components/LiveRegion.vue
deleted file mode 100644
index efab4e481d4..00000000000
--- a/resources/js/common/components/LiveRegion.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-  import {useAnnouncer} from '@/common/composables/useAnnouncer';
-  import TransitionFade from '@/common/components/TransitionFade.vue';
-
-  const {announcement} = useAnnouncer();
-</script>
-
-<template>
-  <TransitionFade>
-    <div
-      id="global-live-region"
-      class="sr-only"
-      role="status"
-      v-if="announcement"
-    >
-      {{ announcement }}
-    </div>
-  </TransitionFade>
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/resources/js/common/composables/useAnnouncementStore.ts b/resources/js/common/composables/useAnnouncementStore.ts
deleted file mode 100644
index ce55377b387..00000000000
--- a/resources/js/common/composables/useAnnouncementStore.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ref } from 'vue';
-
-interface AnnouncerOptions {
-  timeout: number;
-}
-
-const announcement = ref<string | null>(null);
-const announcerTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
-
-export function useAnnouncementStore(options: Partial<AnnouncerOptions> = {}) {
-  function announce(message: string | null) {
-    if (!message) {
-      return;
-    }
-
-    if (announcerTimeout.value !== null) {
-      clearTimeout(announcerTimeout.value);
-    }
-
-    announcement.value = message;
-
-    announcerTimeout.value = setTimeout(() => {
-      announcement.value = null;
-    }, options.timeout || 5000);
-  }
-
-  return {announcement, announce};
-}
diff --git a/resources/js/common/layouts/AppLayout.vue b/resources/js/common/layouts/AppLayout.vue
index 0a00cef18fd..d8afb1e65d7 100644
--- a/resources/js/common/layouts/AppLayout.vue
+++ b/resources/js/common/layouts/AppLayout.vue
@@ -9,7 +9,7 @@
   import FlashMessages from '@/common/components/FlashMessages.vue';
   import FormActions from '@/common/components/FormActions.vue';
   import LayoutSlotOutlet from '@/common/components/LayoutSlotOutlet.vue';
-  import LiveRegion from '@/common/components/LiveRegion.vue';
+  import GlobalLiveRegion from '@/common/components/GlobalLiveRegion.vue';
   import Pane from '@/common/components/Pane.vue';
   import SecondaryNav from '@/common/components/SecondaryNav.vue';
   import SystemInfo from '@/common/components/SystemInfo.vue';
@@ -194,7 +194,7 @@
 
 <template>
   <Head :title="pageTitle" />
-  <LiveRegion></LiveRegion>
+  <GlobalLiveRegion />
   <div class="cp">
     <header class="cp__header">
       <a
diff --git a/resources/js/modules/auth/components/login/login-form.ts b/resources/js/modules/auth/components/login/login-form.ts
index 68d928f5927..054b1e35934 100644
--- a/resources/js/modules/auth/components/login/login-form.ts
+++ b/resources/js/modules/auth/components/login/login-form.ts
@@ -15,7 +15,7 @@ import componentStyles from './login-form.styles.js';
 import type {TwoFactorData} from './login-challenge.js';
 import './login-challenge.js';
 import './login-reset-password.js';
-import { useAnnouncementStore } from '@/common/composables/useAnnouncementStore';
+import { useAnnouncer } from '@/common/composables/useAnnouncer';
 type View = 'login' | 'reset-password' | 'challenge';
 
 /**
@@ -206,7 +206,7 @@ export default class CraftLoginForm extends LitElement {
   }
 
   #setError(message: string) {
-    const { announce } = useAnnouncementStore();
+    const { announce } = useAnnouncer();
     this._error = message.trim();
     announce(message);
   }
diff --git a/resources/js/modules/auth/components/login/login-reset-password.ts b/resources/js/modules/auth/components/login/login-reset-password.ts
index 2b463865e89..ccc2d77b629 100644
--- a/resources/js/modules/auth/components/login/login-reset-password.ts
+++ b/resources/js/modules/auth/components/login/login-reset-password.ts
@@ -2,7 +2,7 @@ import {html, LitElement, nothing} from 'lit';
 import {property, query, state} from 'lit/decorators.js';
 import {actionClient, t} from '@craftcms/ui';
 import componentStyles from './login-form.styles.js';
-import { useAnnouncementStore} from '@/common/composables/useAnnouncementStore';
+import { useAnnouncer} from '@/common/composables/useAnnouncer';
 
 /**
  * @summary Password-reset request form. Fires `reset-back` when the user
@@ -38,7 +38,7 @@ export default class CraftLoginResetPassword extends LitElement {
 
   #setError(message: string) {
     this._error = message.trim();
-    useAnnouncementStore().announce(message);
+    useAnnouncer().announce(message);
   }
 
   async #onSubmit(event: Event) {

From 4d85e672c76b38bcb798f1570179e61591930f7c Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Thu, 23 Jul 2026 16:46:30 -0700
Subject: [PATCH 04/12] Remove unfinished requirement

---
 packages/craftcms-ui/src/components/button/button.a11y.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/craftcms-ui/src/components/button/button.a11y.md b/packages/craftcms-ui/src/components/button/button.a11y.md
index edc4836fda8..c4739609f3b 100644
--- a/packages/craftcms-ui/src/components/button/button.a11y.md
+++ b/packages/craftcms-ui/src/components/button/button.a11y.md
@@ -5,4 +5,3 @@
 - [x] Visible focus indicator via `:focus-visible` pseudo-class. This includes:
   - An offset outline to maintain visibility against the button background color.
   - An outline color that uses the adaptive color token (`--c-color-focus-outline`) for visibility in both light and dark modes.
-- [x] Named slots (are provided for  (SC 1.3.2: Meaningful Sequence)
\ No newline at end of file

From e2bf4df28b1d07caad7fe241796099d1098bcc84 Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Mon, 27 Jul 2026 08:41:44 -0700
Subject: [PATCH 05/12] Rename GlobalLiveRegion back to LiveRegion

---
 .../{GlobalLiveRegion.vue => LiveRegion.vue}           | 10 +++++-----
 resources/js/common/layouts/AppLayout.vue              |  4 ++--
 resources/js/common/layouts/AuthBase.vue               |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)
 rename resources/js/common/components/{GlobalLiveRegion.vue => LiveRegion.vue} (64%)

diff --git a/resources/js/common/components/GlobalLiveRegion.vue b/resources/js/common/components/LiveRegion.vue
similarity index 64%
rename from resources/js/common/components/GlobalLiveRegion.vue
rename to resources/js/common/components/LiveRegion.vue
index bf7167543a1..b3a3783742f 100644
--- a/resources/js/common/components/GlobalLiveRegion.vue
+++ b/resources/js/common/components/LiveRegion.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
+  /**
+   * A top-level live region that should only have one instance per layer.
+   *
+   */
   import {useAnnouncer} from '@/common/composables/useAnnouncer';
 
   const {announcement} = useAnnouncer();
 </script>
 
 <template>
-  <div
-    id="global-live-region"
-    class="sr-only"
-    role="status"
-  >
+  <div class="sr-only" role="status">
     {{ announcement }}
   </div>
 </template>
diff --git a/resources/js/common/layouts/AppLayout.vue b/resources/js/common/layouts/AppLayout.vue
index d8afb1e65d7..564ca55c45f 100644
--- a/resources/js/common/layouts/AppLayout.vue
+++ b/resources/js/common/layouts/AppLayout.vue
@@ -9,7 +9,7 @@
   import FlashMessages from '@/common/components/FlashMessages.vue';
   import FormActions from '@/common/components/FormActions.vue';
   import LayoutSlotOutlet from '@/common/components/LayoutSlotOutlet.vue';
-  import GlobalLiveRegion from '@/common/components/GlobalLiveRegion.vue';
+  import LiveRegion from '@/common/components/LiveRegion.vue';
   import Pane from '@/common/components/Pane.vue';
   import SecondaryNav from '@/common/components/SecondaryNav.vue';
   import SystemInfo from '@/common/components/SystemInfo.vue';
@@ -194,7 +194,7 @@
 
 <template>
   <Head :title="pageTitle" />
-  <GlobalLiveRegion />
+  <LiveRegion />
   <div class="cp">
     <header class="cp__header">
       <a
diff --git a/resources/js/common/layouts/AuthBase.vue b/resources/js/common/layouts/AuthBase.vue
index a1bcb4f5e10..e6dd9170525 100644
--- a/resources/js/common/layouts/AuthBase.vue
+++ b/resources/js/common/layouts/AuthBase.vue
@@ -3,7 +3,7 @@
   import useCraftData from '@/common/composables/useCraftData';
   import craftCmsLogoUrl from '@public/images/craftcms.svg';
   import {t} from '@craftcms/ui';
-  import GlobalLiveRegion from '@/common/components/GlobalLiveRegion.vue';
+  import LiveRegion from '@/common/components/LiveRegion.vue';
 
   const props = withDefaults(
     defineProps<{
@@ -20,7 +20,7 @@
 <template>
   <Head :title="props.title"></Head>
   <main class="cp-login">
-    <GlobalLiveRegion />
+    <LiveRegion />
     <div class="cp-login__wrapper grid gap-3 justify-items-center">
       <h1 class="flex justify-center">
         <img

From 5e9c5f758612bbe3d6a67269c6bf025f5f910ef0 Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Mon, 27 Jul 2026 09:46:00 -0700
Subject: [PATCH 06/12] Add a live region to the button component to handle
 loading message

---
 .../src/components/button/button.a11y.md      |  1 +
 .../src/components/button/button.ts           | 24 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/craftcms-ui/src/components/button/button.a11y.md b/packages/craftcms-ui/src/components/button/button.a11y.md
index c4739609f3b..9f051db19f3 100644
--- a/packages/craftcms-ui/src/components/button/button.a11y.md
+++ b/packages/craftcms-ui/src/components/button/button.a11y.md
@@ -5,3 +5,4 @@
 - [x] Visible focus indicator via `:focus-visible` pseudo-class. This includes:
   - An offset outline to maintain visibility against the button background color.
   - An outline color that uses the adaptive color token (`--c-color-focus-outline`) for visibility in both light and dark modes.
+- [x] A loading message is announced via a built-in live region when the loading spinner is toggled on
\ No newline at end of file
diff --git a/packages/craftcms-ui/src/components/button/button.ts b/packages/craftcms-ui/src/components/button/button.ts
index 856d022a2eb..23e0a3c3c09 100644
--- a/packages/craftcms-ui/src/components/button/button.ts
+++ b/packages/craftcms-ui/src/components/button/button.ts
@@ -1,6 +1,7 @@
 import {LionButtonSubmit} from '@lion/ui/button.js';
 import {html, nothing} from 'lit';
-import {property, state} from 'lit/decorators.js';
+import {property, state, query} from 'lit/decorators.js';
+import {t} from '@src/utilities/translate';
 import styles from './button.styles.js';
 import '../spinner/spinner.js';
 import '../icon/icon.js';
@@ -62,7 +63,23 @@ export default class CraftButton extends LionButtonSubmit {
     super.updated(changedProperties);
     if (changedProperties.has('href') || changedProperties.has('disabled')) {
       this.syncLinkHostState();
+    } else if (changedProperties.has('loading')) {
+      if (this.loading) {
+        this.announceLoading();
+      }
+    }
+  }
+
+  private announceLoading() {
+    this.liveRegion.textContent = t('Loading');
+
+    if (this.announcementTimer) {
+      clearTimeout(this.announcementTimer);
     }
+
+    this.announcementTimer = setTimeout(() => {
+      this.liveRegion.textContent = '';
+    }, 5000);
   }
 
   private syncLinkHostState() {
@@ -156,11 +173,15 @@ export default class CraftButton extends LionButtonSubmit {
   @property({attribute: 'icon-position'}) iconPosition: 'prefix' | 'suffix' =
     'prefix';
 
+  @query('[data-live-region]') liveRegion: HTMLElement;
+
   @state()
   private _hasAccessibilityError: boolean = false;
 
   private linkHostStateApplied = false;
 
+  private announcementTimer: ReturnType<typeof setTimeout> | null = null;
+
   private get isLink(): boolean {
     return !!this.href && !this.disabled;
   }
@@ -200,6 +221,7 @@ export default class CraftButton extends LionButtonSubmit {
       ${this.loading
         ? html`<craft-spinner part="spinner"></craft-spinner>`
         : nothing}
+      <span role="status" style="outline: 1px solid black; padding: 3px; background-color: turquoise;" data-live-region></span>
     `;
 
     if (this.isLink) {

From ecd1f7e85e2367610e2ad0203b4c8b52f90a801f Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Mon, 27 Jul 2026 10:06:21 -0700
Subject: [PATCH 07/12] Make loading message visually-hidden

---
 packages/craftcms-ui/src/components/button/button.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/craftcms-ui/src/components/button/button.ts b/packages/craftcms-ui/src/components/button/button.ts
index 23e0a3c3c09..d80ac5cb703 100644
--- a/packages/craftcms-ui/src/components/button/button.ts
+++ b/packages/craftcms-ui/src/components/button/button.ts
@@ -3,6 +3,7 @@ import {html, nothing} from 'lit';
 import {property, state, query} from 'lit/decorators.js';
 import {t} from '@src/utilities/translate';
 import styles from './button.styles.js';
+import visuallyHiddenStyles from '@src/styles/visually-hidden.styles.js';
 import '../spinner/spinner.js';
 import '../icon/icon.js';
 import {computeAccessibleName} from 'dom-accessibility-api';
@@ -45,7 +46,7 @@ export type ButtonAppearance =
  */
 export default class CraftButton extends LionButtonSubmit {
   static override get styles() {
-    return [...super.styles, variantsStyles, styles];
+    return [...super.styles, visuallyHiddenStyles, variantsStyles, styles];
   }
 
   override connectedCallback() {
@@ -221,7 +222,7 @@ export default class CraftButton extends LionButtonSubmit {
       ${this.loading
         ? html`<craft-spinner part="spinner"></craft-spinner>`
         : nothing}
-      <span role="status" style="outline: 1px solid black; padding: 3px; background-color: turquoise;" data-live-region></span>
+      <span class="cp-visually-hidden" role="status" data-live-region></span>
     `;
 
     if (this.isLink) {

From 3eb99ece715067a3f4c402606d99da99cdf4935f Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Mon, 27 Jul 2026 10:22:36 -0700
Subject: [PATCH 08/12] Match import spacing style

---
 resources/js/modules/auth/components/login/login-form.ts        | 2 +-
 .../js/modules/auth/components/login/login-reset-password.ts    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/modules/auth/components/login/login-form.ts b/resources/js/modules/auth/components/login/login-form.ts
index 054b1e35934..443028533a7 100644
--- a/resources/js/modules/auth/components/login/login-form.ts
+++ b/resources/js/modules/auth/components/login/login-form.ts
@@ -15,7 +15,7 @@ import componentStyles from './login-form.styles.js';
 import type {TwoFactorData} from './login-challenge.js';
 import './login-challenge.js';
 import './login-reset-password.js';
-import { useAnnouncer } from '@/common/composables/useAnnouncer';
+import {useAnnouncer} from '@/common/composables/useAnnouncer';
 type View = 'login' | 'reset-password' | 'challenge';
 
 /**
diff --git a/resources/js/modules/auth/components/login/login-reset-password.ts b/resources/js/modules/auth/components/login/login-reset-password.ts
index ccc2d77b629..aa54e349cbb 100644
--- a/resources/js/modules/auth/components/login/login-reset-password.ts
+++ b/resources/js/modules/auth/components/login/login-reset-password.ts
@@ -2,7 +2,7 @@ import {html, LitElement, nothing} from 'lit';
 import {property, query, state} from 'lit/decorators.js';
 import {actionClient, t} from '@craftcms/ui';
 import componentStyles from './login-form.styles.js';
-import { useAnnouncer} from '@/common/composables/useAnnouncer';
+import {useAnnouncer} from '@/common/composables/useAnnouncer';
 
 /**
  * @summary Password-reset request form. Fires `reset-back` when the user

From a4f18650da84ff29c9e8b24118dd2721cdb7a97a Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Mon, 27 Jul 2026 13:28:19 -0700
Subject: [PATCH 09/12] Move loading check to its own conditional block

---
 packages/craftcms-ui/src/components/button/button.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/craftcms-ui/src/components/button/button.ts b/packages/craftcms-ui/src/components/button/button.ts
index d80ac5cb703..be7225f4b8e 100644
--- a/packages/craftcms-ui/src/components/button/button.ts
+++ b/packages/craftcms-ui/src/components/button/button.ts
@@ -64,7 +64,9 @@ export default class CraftButton extends LionButtonSubmit {
     super.updated(changedProperties);
     if (changedProperties.has('href') || changedProperties.has('disabled')) {
       this.syncLinkHostState();
-    } else if (changedProperties.has('loading')) {
+    }
+
+    if (changedProperties.has('loading')) {
       if (this.loading) {
         this.announceLoading();
       }

From 00f0f4f683b5bd20cba5986c031da55ac2ce83a7 Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Mon, 27 Jul 2026 13:37:36 -0700
Subject: [PATCH 10/12] Trim both visual and SR-only message

---
 .../js/modules/auth/components/login/login-reset-password.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/modules/auth/components/login/login-reset-password.ts b/resources/js/modules/auth/components/login/login-reset-password.ts
index aa54e349cbb..83f35b43416 100644
--- a/resources/js/modules/auth/components/login/login-reset-password.ts
+++ b/resources/js/modules/auth/components/login/login-reset-password.ts
@@ -37,8 +37,9 @@ export default class CraftLoginResetPassword extends LitElement {
   }
 
   #setError(message: string) {
-    this._error = message.trim();
-    useAnnouncer().announce(message);
+    const trimmedMessage = message.trim();
+    this._error = trimmedMessage;
+    useAnnouncer().announce(trimmedMessage);
   }
 
   async #onSubmit(event: Event) {

From 5fa40c21b02d678f1a08c3e542f0ba3b5a376385 Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Mon, 27 Jul 2026 13:44:20 -0700
Subject: [PATCH 11/12] Use trimmed message for live region

---
 resources/js/modules/auth/components/login/login-form.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/modules/auth/components/login/login-form.ts b/resources/js/modules/auth/components/login/login-form.ts
index 443028533a7..01e5833eac3 100644
--- a/resources/js/modules/auth/components/login/login-form.ts
+++ b/resources/js/modules/auth/components/login/login-form.ts
@@ -208,7 +208,7 @@ export default class CraftLoginForm extends LitElement {
   #setError(message: string) {
     const { announce } = useAnnouncer();
     this._error = message.trim();
-    announce(message);
+    announce(this._error);
   }
 
   #handleSuccess(returnUrl: string) {

From 38087ac4ad7d3631079db75bac49f92adc2067f2 Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Mon, 27 Jul 2026 13:52:23 -0700
Subject: [PATCH 12/12] Remove timeout in disconnected callback

---
 packages/craftcms-ui/src/components/button/button.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/craftcms-ui/src/components/button/button.ts b/packages/craftcms-ui/src/components/button/button.ts
index be7225f4b8e..e9b65cc5685 100644
--- a/packages/craftcms-ui/src/components/button/button.ts
+++ b/packages/craftcms-ui/src/components/button/button.ts
@@ -60,6 +60,15 @@ export default class CraftButton extends LionButtonSubmit {
     this.syncLinkHostState();
   }
 
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this.announcementTimer) {
+      clearTimeout(this.announcementTimer);
+      this.announcementTimer = null;
+    }
+  }
+
   override updated(changedProperties: Map<string, unknown>) {
     super.updated(changedProperties);
     if (changedProperties.has('href') || changedProperties.has('disabled')) {