From f40a6cb933e397a7802ac366a4cc570dd713683d Mon Sep 17 00:00:00 2001
From: Christopher Pruijsen <christopher.pruijsen@gmail.com>
Date: Tue, 13 Oct 2026 20:32:31 +0100
Subject: [PATCH] fix(tab-button): restore keyboard focus

---
 core/src/components/tab-button/tab-button.tsx |  2 +-
 .../tab-button/test/a11y/index.html           |  5 +++
 .../tab-button/test/tab-button.spec.ts        | 43 +++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 core/src/components/tab-button/test/tab-button.spec.ts

diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index 7babc4573b5..4a2f7d11a41 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/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">
diff --git a/core/src/components/tab-button/test/a11y/index.html b/core/src/components/tab-button/test/a11y/index.html
index 1b0d809de01..0416575b2d1 100644
--- a/core/src/components/tab-button/test/a11y/index.html
+++ b/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>
diff --git a/core/src/components/tab-button/test/tab-button.spec.ts b/core/src/components/tab-button/test/tab-button.spec.ts
new file mode 100644
index 00000000000..da4fc625e47
--- /dev/null
+++ b/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');
+  });
+});