fix(tab-button): apply correct focused background color in dark palette

Author: gnbm

core/src/components/tabs/test/a11y/tab-button-dark-focused.e2e.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Verifies that the focused state on tab buttons
+ * uses a dark-appropriate background in the dark palette,
+ * not the light-mode fallback (#e0e0e0)
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tabs: focused state in dark palette'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/tabs/test/basic?ionic:palette=dark', config);
+
+      const tabButton = page.locator('.e2eTabOneButton');
+      await tabButton.evaluate((el: HTMLElement) => {
+        // focus-visible.ts only adds ion-focused in keyboard mode; trigger it first
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+        // the host has no tabindex; focus the actual <a> inside shadow DOM
+        (el.shadowRoot?.querySelector('a') as HTMLElement)?.focus();
+      });
+      await page.waitForChanges();
+    });
+
+    test('should not have visual regressions for focused tab button', async ({ page }) => {
+      await expect(page.locator('.e2eTabOneButton')).toHaveClass(/ion-focused/);
+      await expect(page.locator('ion-tab-bar')).toHaveScreenshot(screenshot('tab-bar-focused-dark'));
+    });
+
+    test('focused tab button should not use light-mode fallback color', async ({ page }) => {
+      const bgColor = await page.locator('.e2eTabOneButton').evaluate((el: HTMLElement) =>
+        window.getComputedStyle(el, '::after').backgroundColor
+      );
+      // #e0e0e0 (rgb(224, 224, 224)) is the light-mode fallback from get-color-shade(#fff)
+      expect(bgColor).not.toBe('rgb(224, 224, 224)');
+    });
+  });
+});

core/src/css/palettes/dark.scss

@@ -126,6 +126,7 @@ $colors:  (
     --ion-text-color-step-900: #1a1a1a;
     --ion-text-color-step-950: #0d0d0d;
     --ion-item-background: #000000;
+    --ion-tab-bar-background-focused: #0b0b0b;
     --ion-card-background: #1c1c1d;
   }
 
@@ -183,6 +184,7 @@ $colors:  (
     --ion-item-background: #1e1e1e;
     --ion-toolbar-background: #1f1f1f;
     --ion-tab-bar-background: #1f1f1f;
+    --ion-tab-bar-background-focused: #1b1b1b;
     --ion-card-background: #1e1e1e;
   }
 }

core/src/css/palettes/high-contrast-dark.scss

@@ -119,6 +119,7 @@ $lightest-text-color: $text-color;
     --ion-text-color-rgb: #{color-to-rgb-list($text-color)};
     --ion-item-background: #000000;
     --ion-card-background: #1c1c1d;
+    --ion-tab-bar-background-focused: #0b0b0b;
 
     /// Only the item borders should increase in contrast
     /// Borders for elements like toolbars should remain the same
@@ -185,6 +186,7 @@ $lightest-text-color: $text-color;
     --ion-item-background: #1e1e1e;
     --ion-toolbar-background: #1f1f1f;
     --ion-tab-bar-background: #1f1f1f;
+    --ion-tab-bar-background-focused: #0b0b0b;
     --ion-card-background: #1e1e1e;
 
     /// Only the item borders should increase in contrast