fix(tab-button): fix focus when tabbing into tab button

core/src/components/tab-bar/tab-bar.ios.scss

@@ -28,7 +28,6 @@
   background: #{current-color(base, $tab-bar-ios-translucent-background-color-alpha)};
 }
 
-// iOS Translucent Tab bar button
-:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
-  background: transparent;
+:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
+  background: rgba($background-color-rgb, .6);
 }

core/src/components/tab-bar/tab-bar.md.scss

@@ -11,8 +11,4 @@
   --color-selected: #{$tabbar-md-color-activated};
 
   height: 56px;
-}
-
-:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
-  background: transparent;
 }

core/src/components/tab-bar/tab-bar.scss

@@ -33,19 +33,32 @@
   box-sizing: content-box !important;
 }
 
+:host(.ion-color) ::slotted(ion-tab-button) {
+  --background-focused: #{current-color(shade)};
+  --color-selected: #{current-color(contrast)};
+}
+
+:host(.ion-color) ::slotted(.tab-selected) {
+  color: #{current-color(contrast)};;
+}
+
 :host(.ion-color),
 :host(.ion-color) ::slotted(ion-tab-button) {
-  background: #{current-color(base)};
   color: #{current-color(contrast, .7)};
 }
 
+:host(.ion-color),
 :host(.ion-color) ::slotted(ion-tab-button) {
-  --background-focused: #{current-color(shade)};
-  --color-selected: #{current-color(contrast)};
+  background: #{current-color(base)};
 }
 
-:host(.ion-color) ::slotted(.tab-selected) {
-  color: #{current-color(contrast)};;
+:host(.ion-color) ::slotted(ion-tab-button.ion-focused),
+:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
+  background: var(--background-focused)
+}
+
+:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
+  background: transparent;
 }
 
 :host([slot="top"]) {
@@ -58,4 +71,4 @@
 :host(.tab-bar-hidden) {
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
-}
+}

core/src/components/tab-bar/test/custom/e2e.ts

@@ -5,6 +5,18 @@ test('tab-bar: custom', async () => {
     url: '/src/components/tab-bar/test/custom?ionic:_testing=true'
   });
 
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+  const screenshotCompares = [];
+
+  const tabBar = await page.find('ion-tab-bar');
+  await tabBar.waitForVisible();
+
+  screenshotCompares.push(await page.compareScreenshot('tab-bar: custom default'));
+
+  await page.keyboard.press('Tab');
+
+  screenshotCompares.push(await page.compareScreenshot('tab-bar: custom tabbed'));
+  await page.waitFor(10000);
+  for (const screenshotCompare of screenshotCompares) {
+    expect(screenshotCompare).toMatchScreenshot();
+  }
 });

core/src/components/tab-bar/test/custom/index.html

@@ -16,6 +16,12 @@
     <ion-content>
       <!-- Default -->
       <ion-tab-bar selected-tab="1">
+
+        <ion-tab-button tab="1" disabled>
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
         <ion-tab-button tab="1">
           <ion-icon name="clock"></ion-icon>
           <ion-label>Recents</ion-label>