fix(shared): allow "disabled" first to return to "tabindex=0" in "foc…

…usable"
adobe · May 12, 2023 · 160bc59 · 160bc59
1 parent 04ccb39
commit 160bc59
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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) {