fix(tab-button): restore keyboard focus

core/src/components/tab-button/tab-button.tsx

@@ -172,7 +172,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
           role="tab"
           aria-selected={selected ? 'true' : null}
           aria-disabled={disabled ? 'true' : null}
-          tabindex={disabled ? '-1' : undefined}
+          tabindex={disabled ? '-1' : href === undefined || href === null ? '0' : undefined}
           {...inheritedAttributes}
         >
           <span class="button-inner">

core/src/components/tab-button/test/a11y/index.html

@@ -32,6 +32,11 @@ <h1>Tab Button</h1>
           <ion-badge aria-hidden="true" color="primary">6</ion-badge>
         </ion-tab-button>
 
+        <ion-tab-button tab="search">
+          <ion-label>Search</ion-label>
+          <ion-icon aria-hidden="true" name="search"></ion-icon>
+        </ion-tab-button>
+
         <ion-tab-button hidden>
           <ion-label>Hidden</ion-label>
           <ion-icon aria-hidden="true" name="alert"></ion-icon>

core/src/components/tab-button/test/tab-button.spec.ts

@@ -0,0 +1,43 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { TabButton } from '../tab-button';
+
+describe('tab-button: rendering', () => {
+  it('should render tabindex="0" on the native element when href is not defined', async () => {
+    const page = await newSpecPage({
+      components: [TabButton],
+      html: `<ion-tab-button tab="schedule"></ion-tab-button>`,
+    });
+
+    const nativeEl = page.body.querySelector('ion-tab-button')!.shadowRoot!.querySelector('a')!;
+
+    expect(nativeEl.getAttribute('tabindex')).toBe('0');
+  });
+
+  it('should update tabindex when href is removed', async () => {
+    const page = await newSpecPage({
+      components: [TabButton],
+      html: `<ion-tab-button tab="schedule" href="/schedule"></ion-tab-button>`,
+    });
+
+    const nativeEl = page.body.querySelector('ion-tab-button')!.shadowRoot!.querySelector('a')!;
+
+    expect(nativeEl.getAttribute('tabindex')).toBe(null);
+
+    page.root!.removeAttribute('href');
+    await page.waitForChanges();
+
+    expect(nativeEl.getAttribute('tabindex')).toBe('0');
+  });
+
+  it('should render tabindex="-1" on the native element when disabled', async () => {
+    const page = await newSpecPage({
+      components: [TabButton],
+      html: `<ion-tab-button tab="schedule" disabled="true"></ion-tab-button>`,
+    });
+
+    const nativeEl = page.body.querySelector('ion-tab-button')!.shadowRoot!.querySelector('a')!;
+
+    expect(nativeEl.getAttribute('tabindex')).toBe('-1');
+  });
+});