From 160bc594f516bfadb754d47ce102a02cbde12fcd Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Thu, 11 May 2023 09:00:55 -0400
Subject: [PATCH] fix(shared): allow "disabled" first to return to "tabindex=0"
 in "focusable"

---
 packages/button/src/ButtonBase.ts   |  2 +-
 packages/button/test/button.test.ts | 23 +++++++++++++++++++++++
 packages/swatch/src/Swatch.ts       |  2 +-
 packages/tags/src/Tag.ts            |  7 +------
 tools/shared/src/focusable.ts       |  2 +-
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts
index 4bd258349f..e5584cb6df 100644
--- a/packages/button/src/ButtonBase.ts
+++ b/packages/button/src/ButtonBase.ts
@@ -208,7 +208,7 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     protected override firstUpdated(changed: PropertyValues): void {
         super.firstUpdated(changed);
         if (!this.hasAttribute('tabindex')) {
-            this.tabIndex = 0;
+            this.setAttribute('tabindex', '0');
         }
         this.manageAnchor();
         this.addEventListener('keydown', this.handleKeydown);
diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts
index 4b8593b17a..c8dbe1a83e 100644
--- a/packages/button/test/button.test.ts
+++ b/packages/button/test/button.test.ts
@@ -226,6 +226,29 @@ describe('Button', () => {
         await elementUpdated(el);
         expect(clickSpy.calledOnce).to.be.true;
     });
+    it('`disabled` manages `tabindex`', async () => {
+        const el = await fixture<Button>(
+            html`
+                <sp-button disabled>Button</sp-button>
+            `
+        );
+
+        await elementUpdated(el);
+        expect(el.tabIndex).to.equal(-1);
+        expect(el.getAttribute('tabindex')).to.equal('-1');
+
+        el.disabled = false;
+        await elementUpdated(el);
+
+        expect(el.tabIndex).to.equal(0);
+        expect(el.getAttribute('tabindex')).to.equal('0');
+
+        el.disabled = true;
+        await elementUpdated(el);
+
+        expect(el.tabIndex).to.equal(-1);
+        expect(el.getAttribute('tabindex')).to.equal('-1');
+    });
     it('manages `aria-disabled`', async () => {
         const el = await fixture<Button>(
             html`
diff --git a/packages/swatch/src/Swatch.ts b/packages/swatch/src/Swatch.ts
index efc5584949..ba8baf9899 100644
--- a/packages/swatch/src/Swatch.ts
+++ b/packages/swatch/src/Swatch.ts
@@ -237,7 +237,7 @@ export class Swatch extends SizedMixin(Focusable, {
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('keypress', this.handleKeypress);
         if (!this.hasAttribute('tabindex')) {
-            this.tabIndex = 0;
+            this.setAttribute('tabindex', '0');
         }
     }
 }
diff --git a/packages/tags/src/Tag.ts b/packages/tags/src/Tag.ts
index 93c9a463cc..362b24b97c 100644
--- a/packages/tags/src/Tag.ts
+++ b/packages/tags/src/Tag.ts
@@ -137,12 +137,7 @@ export class Tag extends SizedMixin(SpectrumElement, {
             this.setAttribute('role', 'listitem');
         }
         if (this.deletable) {
-            this.setAttribute(
-                'tabindex',
-                !this.disabled && this.matches(':first-of-type:not([disabled])')
-                    ? '0'
-                    : '-1'
-            );
+            this.setAttribute('tabindex', '0');
         }
     }
 
diff --git a/tools/shared/src/focusable.ts b/tools/shared/src/focusable.ts
index c08725da00..bc2a4d85ff 100644
--- a/tools/shared/src/focusable.ts
+++ b/tools/shared/src/focusable.ts
@@ -123,7 +123,7 @@ export class Focusable extends FocusVisiblePolyfillMixin(SpectrumElement) {
         }
         this.manageFocusElementTabindex(tabIndex);
     }
-    private _tabIndex = -1;
+    private _tabIndex = 0;
 
     private onPointerdownManagementOfTabIndex(): void {
         if (this.tabIndex === -1) {