From d788a8eac6ea8e60b1147be3d6119cd448a845db Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 May 2019 12:04:41 -0400
Subject: [PATCH] fix(tab-button): apply background-focused when tabbing into
 tab button (#17502)

fixes #17042
---
 core/src/components/tab-bar/tab-bar.ios.scss  |   5 +-
 core/src/components/tab-bar/tab-bar.md.scss   |   4 -
 core/src/components/tab-bar/tab-bar.scss      |  25 +-
 .../src/components/tab-bar/test/custom/e2e.ts |  16 +-
 .../components/tab-bar/test/custom/index.html |   6 +
 .../tab-bar/test/translucent/index.html       | 351 +++++++++---------
 .../tab-button/tab-button.ios.vars.scss       |   2 +-
 .../src/components/tab-button/tab-button.scss |   4 +-
 core/src/components/tab-button/tab-button.tsx |  19 +-
 9 files changed, 240 insertions(+), 192 deletions(-)

diff --git a/core/src/components/tab-bar/tab-bar.ios.scss b/core/src/components/tab-bar/tab-bar.ios.scss
index 6cf90179d2..006df07de4 100644
--- a/core/src/components/tab-bar/tab-bar.ios.scss
+++ b/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);
 }
\ No newline at end of file
diff --git a/core/src/components/tab-bar/tab-bar.md.scss b/core/src/components/tab-bar/tab-bar.md.scss
index 0a198f1678..4363520fad 100644
--- a/core/src/components/tab-bar/tab-bar.md.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.scss
index 05f6e76f6a..ee703639fb 100644
--- a/core/src/components/tab-bar/tab-bar.scss
+++ b/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;
-}
+}
\ No newline at end of file
diff --git a/core/src/components/tab-bar/test/custom/e2e.ts b/core/src/components/tab-bar/test/custom/e2e.ts
index 6ca6a6f4aa..0c3d211519 100644
--- a/core/src/components/tab-bar/test/custom/e2e.ts
+++ b/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();
+  }
 });
diff --git a/core/src/components/tab-bar/test/custom/index.html b/core/src/components/tab-bar/test/custom/index.html
index 3263a2b5d1..a6f0c0b707 100644
--- a/core/src/components/tab-bar/test/custom/index.html
+++ b/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>
diff --git a/core/src/components/tab-bar/test/translucent/index.html b/core/src/components/tab-bar/test/translucent/index.html
index 04dc027816..6915eb2dd3 100644
--- a/core/src/components/tab-bar/test/translucent/index.html
+++ b/core/src/components/tab-bar/test/translucent/index.html
@@ -12,182 +12,187 @@
 </head>
 
 <body>
+  <ion-app>
+    <ion-content>
+      <ion-tab-bar translucent selected-tab="1">
+
+        <ion-tab-button tab="1">
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="2">
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="3">
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+    
+      </ion-tab-bar>
+
+      <!-- Badges -->
+      <ion-tab-bar translucent selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Item One Max</ion-label>
+          <ion-badge color="danger"></ion-badge>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="2">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+          <ion-badge color="danger">88</ion-badge>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="4">
+          <ion-icon name="calendar"></ion-icon>
+          <ion-badge color="danger">888+</ion-badge>
+        </ion-tab-button>
+      </ion-tab-bar>
+    
+      <ion-tab-bar translucent selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="2" layout="icon-bottom">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Item One Max</ion-label>
+          <ion-badge color="danger"></ion-badge>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+          <ion-badge color="danger">88</ion-badge>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="4">
+          <ion-icon name="calendar"></ion-icon>
+          <ion-badge color="danger">888+</ion-badge>
+        </ion-tab-button>
+      </ion-tab-bar>
+    
+      <ion-tab-bar translucent selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="2">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
+    
+      <ion-tab-bar translucent selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="2" layout="icon-bottom">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Item One Max</ion-label>
+          <ion-badge color="danger">88</ion-badge>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="4">
+          <ion-icon name="calendar"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
+    
+      <!-- Custom Height -->
+      <ion-tab-bar translucent color="danger" selected-tab="3" class="custom-height">
+        <ion-tab-button tab="1">
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="2">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="4">
+          <ion-icon name="calendar"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
+    
+      <!-- Custom Height / Alignment -->
+      <ion-tab-bar translucent color="tertiary" selected-tab="3" class="custom-height custom-top">
+        <ion-tab-button tab="1">
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="2">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="4">
+          <ion-icon name="calendar"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
+    
+      <!-- Translucent -->
+      <ion-tab-bar translucent>
+        <ion-tab-button tab="1">
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="2">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="4">
+          <ion-icon name="calendar"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
+    
+      <!-- Translucent / Custom Color -->
+      <ion-tab-bar translucent class="custom-background">
+        <ion-tab-button tab="1">
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="2">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+        </ion-tab-button>
+    
+        <ion-tab-button tab="4">
+          <ion-icon name="calendar"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-content>
+  </ion-app>
   <!-- Default -->
-  <ion-tab-bar translucent selected-tab="1">
-
-    <ion-tab-button tab="1">
-      <ion-label>Recents</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="2">
-      <ion-label>Favorites</ion-label>
-      <ion-badge>6</ion-badge>
-    </ion-tab-button>
-
-    <ion-tab-button tab="3">
-      <ion-label>Settings</ion-label>
-    </ion-tab-button>
-
-  </ion-tab-bar>
-
-  <!-- Badges -->
-  <ion-tab-bar translucent selected-tab="1">
-    <ion-tab-button tab="1">
-      <ion-icon name="heart"></ion-icon>
-      <ion-label>Item One Max</ion-label>
-      <ion-badge color="danger"></ion-badge>
-    </ion-tab-button>
-
-    <ion-tab-button tab="2">
-      <ion-icon name="musical-note"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="3">
-      <ion-icon name="today"></ion-icon>
-      <ion-badge color="danger">88</ion-badge>
-    </ion-tab-button>
-
-    <ion-tab-button tab="4">
-      <ion-icon name="calendar"></ion-icon>
-      <ion-badge color="danger">888+</ion-badge>
-    </ion-tab-button>
-  </ion-tab-bar>
-
-  <ion-tab-bar translucent selected-tab="1">
-    <ion-tab-button tab="1">
-      <ion-icon name="musical-note"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="2" layout="icon-bottom">
-      <ion-icon name="heart"></ion-icon>
-      <ion-label>Item One Max</ion-label>
-      <ion-badge color="danger"></ion-badge>
-    </ion-tab-button>
-
-    <ion-tab-button tab="3">
-      <ion-icon name="today"></ion-icon>
-      <ion-badge color="danger">88</ion-badge>
-    </ion-tab-button>
-
-    <ion-tab-button tab="4">
-      <ion-icon name="calendar"></ion-icon>
-      <ion-badge color="danger">888+</ion-badge>
-    </ion-tab-button>
-  </ion-tab-bar>
-
-  <ion-tab-bar translucent selected-tab="1">
-    <ion-tab-button tab="1">
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="2">
-      <ion-icon name="musical-note"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="3">
-      <ion-icon name="today"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
-
-  <ion-tab-bar translucent selected-tab="1">
-    <ion-tab-button tab="1">
-      <ion-icon name="musical-note"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="2" layout="icon-bottom">
-      <ion-icon name="heart"></ion-icon>
-      <ion-label>Item One Max</ion-label>
-      <ion-badge color="danger">88</ion-badge>
-    </ion-tab-button>
-
-    <ion-tab-button tab="3">
-      <ion-icon name="today"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="4">
-      <ion-icon name="calendar"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
-
-  <!-- Custom Height -->
-  <ion-tab-bar translucent color="danger" selected-tab="3" class="custom-height">
-    <ion-tab-button tab="1">
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="2">
-      <ion-icon name="musical-note"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="3">
-      <ion-icon name="today"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="4">
-      <ion-icon name="calendar"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
-
-  <!-- Custom Height / Alignment -->
-  <ion-tab-bar translucent color="tertiary" selected-tab="3" class="custom-height custom-top">
-    <ion-tab-button tab="1">
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="2">
-      <ion-icon name="musical-note"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="3">
-      <ion-icon name="today"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="4">
-      <ion-icon name="calendar"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
-
-  <!-- Translucent -->
-  <ion-tab-bar translucent>
-    <ion-tab-button tab="1">
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="2">
-      <ion-icon name="musical-note"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="3">
-      <ion-icon name="today"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="4">
-      <ion-icon name="calendar"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
-
-  <!-- Translucent / Custom Color -->
-  <ion-tab-bar translucent class="custom-background">
-    <ion-tab-button tab="1">
-      <ion-icon name="heart"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="2">
-      <ion-icon name="musical-note"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="3">
-      <ion-icon name="today"></ion-icon>
-    </ion-tab-button>
-
-    <ion-tab-button tab="4">
-      <ion-icon name="calendar"></ion-icon>
-    </ion-tab-button>
-  </ion-tab-bar>
+  
 
   <style>
-    body {
-      background: linear-gradient(
+    ion-content {
+      --background: linear-gradient(
         to right, orange , yellow, green, cyan, blue, violet
       );
     }
diff --git a/core/src/components/tab-button/tab-button.ios.vars.scss b/core/src/components/tab-button/tab-button.ios.vars.scss
index b1c113f38b..1e1df6d540 100644
--- a/core/src/components/tab-button/tab-button.ios.vars.scss
+++ b/core/src/components/tab-button/tab-button.ios.vars.scss
@@ -34,4 +34,4 @@ $tab-button-ios-icon-color-active:    $tabbar-ios-color-activated !default;
 $tab-button-ios-font-size:            10px !default;
 
 /// @prop - Size of the tab button icon
-$tab-button-ios-icon-size:            30px !default;
+$tab-button-ios-icon-size:            30px !default;
\ No newline at end of file
diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
index 19eab948a5..2b4fd2936b 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/core/src/components/tab-button/tab-button.scss
@@ -24,6 +24,8 @@
   justify-content: center;
 
   height: 100%;
+  
+  outline: none;
 
   background: var(--background);
   color: var(--color);
@@ -61,7 +63,7 @@ a {
   -webkit-user-drag: none;
 }
 
-a:focus-visible {
+:host(.ion-focused) {
   background: var(--background-focused);
 }
 
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index cb86c0e1bc..0a7c5862e9 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -89,9 +89,22 @@ export class TabButton implements ComponentInterface {
     return !!this.el.querySelector('ion-icon');
   }
 
+  private get tabIndex() {
+    if (this.disabled) { return -1; }
+
+    const hasTabIndex = this.el.hasAttribute('tabindex');
+
+    if (hasTabIndex) {
+      return this.el.getAttribute('tabindex');
+    }
+
+    return 0;
+  }
+
   hostData() {
-    const { disabled, hasIcon, hasLabel, layout, selected, tab } = this;
+    const { disabled, hasIcon, hasLabel, tabIndex, layout, selected, tab } = this;
     return {
+      'tabindex': tabIndex,
       'role': 'tab',
       'aria-selected': selected ? 'true' : null,
       'id': tab !== undefined ? `tab-button-${tab}` : null,
@@ -105,6 +118,8 @@ export class TabButton implements ComponentInterface {
         'tab-has-icon-only': hasIcon && !hasLabel,
         [`tab-layout-${layout}`]: true,
         'ion-activatable': true,
+        'ion-selectable': true,
+        'ion-focusable': true
       }
     };
   }
@@ -112,7 +127,7 @@ export class TabButton implements ComponentInterface {
   render() {
     const { mode, href } = this;
     return (
-      <a href={href}>
+      <a href={href} tabIndex={-1}>
         <slot></slot>
         {mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
       </a>