fix: base-button, update aria label on updated event. This also updated attr on slotchange event

packages/button/src/ButtonBase.ts

@@ -220,18 +220,45 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
         }
     }
 
+    /**
+     * @label property is empty within changed propertyValues on slot change event.
+     * Need to check actualy @label property value instead.
+     */
+    protected updateAriaLabel(): void {
+        if (
+            'pending' in this &&
+            (this as { pending: boolean }).pending === true
+        ) {
+            return;
+        }
+
+        // check if label exists and is not empty
+        if (this.label && this.label !== '') {
+            // prevent update if the label is the same as the aria-label
+            if (this.label !== this.getAttribute('aria-label')) {
+                this.setAttribute('aria-label', this.label);
+            }
+        } else {
+            // if dev set aria-label instead of label, don't remove it, and throw warning
+            if (
+                !this.hasAttribute('label') &&
+                this.hasAttribute('aria-label')
+            ) {
+                console.warn(
+                    this,
+                    'DO NOT set aria-label attribute on sp-button, use label prop instead.'
+                );
+                return;
+            }
+            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 +270,8 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
             this.manageAnchor();
         }
 
+        this.updateAriaLabel();
+
         if (this.anchorElement) {
             // Ensure the anchor element is not focusable directly via tab
             this.anchorElement.tabIndex = -1;
@@ -256,14 +285,4 @@ 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 (this.label) {
-                this.setAttribute('aria-label', this.label);
-            } else {
-                this.removeAttribute('aria-label');
-            }
-        }
-    }
 }

packages/button/test/button.test.ts

@@ -40,6 +40,29 @@ describe('Button', () => {
                 <sp-button>Button</sp-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>
+        `);
+
+        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');
+    });
+
     describe('dev mode', () => {
         let consoleWarnStub!: ReturnType<typeof stub>;
         before(() => {
@@ -395,15 +418,12 @@ describe('Button', () => {
 
         it('manages aria-label from pending state', async () => {
             const el = await fixture<Button>(html`
-                <sp-button
-                    href="test_url"
-                    target="_blank"
-                    label="clickable"
-                    pending
-                >
+                <sp-button href="test_url" target="_blank" label="clickable">
                     Click me
                 </sp-button>
             `);
+
+            el.setAttribute('pending', '');
             await elementUpdated(el);
             expect(el.getAttribute('aria-label')).to.equal('Pending');