From 3543797c11357576aa77769104bd0fc4865ea1e0 Mon Sep 17 00:00:00 2001
From: Ionut-Alexandru Mizga <mizgaionutalexandru@gmail.com>
Date: Tue, 12 Aug 2025 10:10:25 +0300
Subject: [PATCH 1/7] test(button): added aria-label tests for label and slot
 changes

---
 packages/button/test/button.test.ts | 39 +++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts
index da947febb52..deec74f9dad 100644
--- a/packages/button/test/button.test.ts
+++ b/packages/button/test/button.test.ts
@@ -423,6 +423,45 @@ describe('Button', () => {
             expect(el.getAttribute('aria-label')).to.equal('clickable');
         });
 
+        it('updates aria-label when label changes', async () => {
+            const el = await fixture<Button>(html`
+                <sp-button label="Initial Label">Button</sp-button>
+            `);
+
+            await elementUpdated(el);
+            expect(el.getAttribute('aria-label')).to.equal('Initial Label');
+
+            // Change the label
+            el.label = 'New Label';
+            await elementUpdated(el);
+
+            // The aria-label should also update
+            expect(el.getAttribute('aria-label')).to.equal('New Label');
+        });
+
+        it('preserves aria-label when slot content changes', async () => {
+            const el = await fixture<Button>(html`
+                <sp-button label="Test Label">Initial Content</sp-button>
+            `);
+
+            await elementUpdated(el);
+            expect(el.getAttribute('aria-label')).to.equal('Test Label');
+
+            // Change the slot content
+            el.textContent = 'Updated Content';
+            await elementUpdated(el);
+
+            // The aria-label should still be preserved
+            expect(el.getAttribute('aria-label')).to.equal('Test Label');
+
+            // Change slot content again
+            el.innerHTML = '<span>New Content</span>';
+            await elementUpdated(el);
+
+            // The aria-label should still be preserved
+            expect(el.getAttribute('aria-label')).to.equal('Test Label');
+        });
+
         it('manages aria-label set from outside', async () => {
             const el = await fixture<Button>(html`
                 <sp-button

From 47725c8d0616627c5bf89e8a90f429d613b88a7a Mon Sep 17 00:00:00 2001
From: Ionut-Alexandru Mizga <mizgaionutalexandru@gmail.com>
Date: Tue, 12 Aug 2025 10:39:14 +0300
Subject: [PATCH 2/7] fix(button): aria-label update when label updates

---
 packages/button/src/ButtonBase.ts | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts
index 196394b91c6..ea0fc204ceb 100644
--- a/packages/button/src/ButtonBase.ts
+++ b/packages/button/src/ButtonBase.ts
@@ -220,18 +220,28 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
         }
     }
 
+    private isPendingState(): boolean {
+        return (
+            'pending' in this && (this as { pending: boolean }).pending === true
+        );
+    }
+
+    private updateAriaLabel(): void {
+        if (this.isPendingState()) return;
+
+        if (this.label) {
+            this.setAttribute('aria-label', this.label);
+        } else {
+            this.removeAttribute('aria-label');
+        }
+    }
+
     protected override firstUpdated(changed: PropertyValues): void {
         super.firstUpdated(changed);
         if (!this.hasAttribute('tabindex')) {
             this.setAttribute('tabindex', '0');
         }
-        if (changed.has('label')) {
-            if (this.label) {
-                this.setAttribute('aria-label', this.label);
-            } else {
-                this.removeAttribute('aria-label');
-            }
-        }
+
         this.manageAnchor();
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('keypress', this.handleKeypress);
@@ -243,6 +253,10 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
             this.manageAnchor();
         }
 
+        if (changed.has('label')) {
+            this.updateAriaLabel();
+        }
+
         if (this.anchorElement) {
             // Ensure the anchor element is not focusable directly via tab
             this.anchorElement.tabIndex = -1;

From 421653f7eedbebe5e834801b1531e5cb0cd8d481 Mon Sep 17 00:00:00 2001
From: Ionut-Alexandru Mizga <mizgaionutalexandru@gmail.com>
Date: Tue, 12 Aug 2025 11:58:44 +0300
Subject: [PATCH 3/7] fix(button): narrow pending state gate to after
 controller update

---
 packages/button/src/ButtonBase.ts | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts
index ea0fc204ceb..bdf0b28b731 100644
--- a/packages/button/src/ButtonBase.ts
+++ b/packages/button/src/ButtonBase.ts
@@ -227,8 +227,6 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     }
 
     private updateAriaLabel(): void {
-        if (this.isPendingState()) return;
-
         if (this.label) {
             this.setAttribute('aria-label', this.label);
         } else {
@@ -253,7 +251,8 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
             this.manageAnchor();
         }
 
-        if (changed.has('label')) {
+        // Don't override PendingStateController's aria-label changes
+        if (changed.has('label') && !this.isPendingState()) {
             this.updateAriaLabel();
         }
 
@@ -273,11 +272,7 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     protected override update(changes: PropertyValues): void {
         super.update(changes);
         if (changes.has('label')) {
-            if (this.label) {
-                this.setAttribute('aria-label', this.label);
-            } else {
-                this.removeAttribute('aria-label');
-            }
+            this.updateAriaLabel();
         }
     }
 }

From 52489e7c4f570785d7a19cb0a4ff37df9170b133 Mon Sep 17 00:00:00 2001
From: Ionut-Alexandru Mizga <mizgaionutalexandru@gmail.com>
Date: Tue, 12 Aug 2025 14:29:06 +0300
Subject: [PATCH 4/7] chore: changeset

---
 .changeset/hot-clouds-burn.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hot-clouds-burn.md

diff --git a/.changeset/hot-clouds-burn.md b/.changeset/hot-clouds-burn.md
new file mode 100644
index 00000000000..cc3989007e7
--- /dev/null
+++ b/.changeset/hot-clouds-burn.md
@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/button': patch
+---
+
+**Fixed** aria-label updates when `label` property changes.

From 7ff73592cc2ea9d4e7d42b6d351a0428c1cf631c Mon Sep 17 00:00:00 2001
From: Ionut-Alexandru Mizga <mizgaionutalexandru@gmail.com>
Date: Wed, 13 Aug 2025 11:06:38 +0300
Subject: [PATCH 5/7] fix: update pendingState type check

---
 packages/button/src/ButtonBase.ts | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts
index bdf0b28b731..d5a4e98a35f 100644
--- a/packages/button/src/ButtonBase.ts
+++ b/packages/button/src/ButtonBase.ts
@@ -23,6 +23,10 @@ import {
 import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
+import {
+    type HostWithPendingState,
+    PendingStateController,
+} from '@spectrum-web-components/reactive-controllers/src/PendingState.js';
 import buttonStyles from './button-base.css.js';
 
 /**
@@ -220,12 +224,20 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
         }
     }
 
-    private isPendingState(): boolean {
+    /**
+     * Type guard to check if this instance implements HostWithPendingState.
+     */
+    private isHostWithPendingState(): this is this & HostWithPendingState {
         return (
-            'pending' in this && (this as { pending: boolean }).pending === true
+            'pendingStateController' in this &&
+            this.pendingStateController instanceof PendingStateController
         );
     }
 
+    private isPendingState(): boolean {
+        return this.isHostWithPendingState() && this.pending === true;
+    }
+
     private updateAriaLabel(): void {
         if (this.label) {
             this.setAttribute('aria-label', this.label);
@@ -251,7 +263,8 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
             this.manageAnchor();
         }
 
-        // Don't override PendingStateController's aria-label changes
+        // Do not update aria-label if component is in pending state,
+        // as PendingStateController may manage it for accessibility.
         if (changed.has('label') && !this.isPendingState()) {
             this.updateAriaLabel();
         }
@@ -269,9 +282,10 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
             this.anchorElement.addEventListener('focus', this.proxyFocus);
         }
     }
+
     protected override update(changes: PropertyValues): void {
         super.update(changes);
-        if (changes.has('label')) {
+        if (changes.has('label') && this.isPendingState()) {
             this.updateAriaLabel();
         }
     }

From e090f5b5c44f2778622848236fd91278d01bf2bb Mon Sep 17 00:00:00 2001
From: Ionut-Alexandru Mizga <mizgaionutalexandru@gmail.com>
Date: Wed, 3 Sep 2025 09:24:06 +0300
Subject: [PATCH 6/7] chore: changeset adjustments

---
 .changeset/hot-clouds-burn.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.changeset/hot-clouds-burn.md b/.changeset/hot-clouds-burn.md
index cc3989007e7..05c6dba47c6 100644
--- a/.changeset/hot-clouds-burn.md
+++ b/.changeset/hot-clouds-burn.md
@@ -3,3 +3,5 @@
 ---
 
 **Fixed** aria-label updates when `label` property changes.
+
+- Added pending state checks to prevent `aria-label` conflicts when `PendingStateController` is managing accessibility attributes

From 050997028fc37108b41b4afd36896e88d47acc56 Mon Sep 17 00:00:00 2001
From: Ionut-Alexandru Mizga <mizgaionutalexandru@gmail.com>
Date: Wed, 3 Sep 2025 09:24:23 +0300
Subject: [PATCH 7/7] test: changed title to sentence case

---
 packages/button/test/button.test.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts
index deec74f9dad..8a85512a798 100644
--- a/packages/button/test/button.test.ts
+++ b/packages/button/test/button.test.ts
@@ -425,11 +425,11 @@ describe('Button', () => {
 
         it('updates aria-label when label changes', async () => {
             const el = await fixture<Button>(html`
-                <sp-button label="Initial Label">Button</sp-button>
+                <sp-button label="Initial label">Button</sp-button>
             `);
 
             await elementUpdated(el);
-            expect(el.getAttribute('aria-label')).to.equal('Initial Label');
+            expect(el.getAttribute('aria-label')).to.equal('Initial label');
 
             // Change the label
             el.label = 'New Label';
@@ -441,25 +441,25 @@ describe('Button', () => {
 
         it('preserves aria-label when slot content changes', async () => {
             const el = await fixture<Button>(html`
-                <sp-button label="Test Label">Initial Content</sp-button>
+                <sp-button label="Test label">Initial Content</sp-button>
             `);
 
             await elementUpdated(el);
-            expect(el.getAttribute('aria-label')).to.equal('Test Label');
+            expect(el.getAttribute('aria-label')).to.equal('Test label');
 
             // Change the slot content
-            el.textContent = 'Updated Content';
+            el.textContent = 'Updated content';
             await elementUpdated(el);
 
             // The aria-label should still be preserved
-            expect(el.getAttribute('aria-label')).to.equal('Test Label');
+            expect(el.getAttribute('aria-label')).to.equal('Test label');
 
             // Change slot content again
-            el.innerHTML = '<span>New Content</span>';
+            el.innerHTML = '<span>New content</span>';
             await elementUpdated(el);
 
             // The aria-label should still be preserved
-            expect(el.getAttribute('aria-label')).to.equal('Test Label');
+            expect(el.getAttribute('aria-label')).to.equal('Test label');
         });
 
         it('manages aria-label set from outside', async () => {