fix(tabs): focus color

packages/core/src/components/tab-button/tab-button.ios.scss

@@ -10,6 +10,10 @@
   fill: $tab-button-ios-icon-color;
 }
 
+.tab-button-ios.focused {
+  background: $tabbar-ios-background-color-focused;
+}
+
 .tab-button-ios .tab-cover {
   @include padding(
     $tab-button-ios-padding-top,

packages/core/src/components/tab-button/tab-button.md.scss

@@ -13,6 +13,10 @@
   fill: $tab-button-md-icon-color;
 }
 
+.tab-button-md.focused {
+  background: $tabbar-md-background-color-focused;
+}
+
 .tab-button-md .tab-cover {
   @include padding(
     $tab-button-md-padding-top,

packages/core/src/components/tab-button/tab-button.scss

@@ -41,6 +41,11 @@ ion-tab-button {
   color: inherit;
   background: transparent;
   cursor: pointer;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
 }
 
 .tab-disabled {

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

@@ -1,4 +1,4 @@
-import {Component, Element, Event, EventEmitter, Listen, Prop} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, Listen, Prop, State} from '@stencil/core';
 
 
 @Component({
@@ -14,6 +14,8 @@ export class TabButton {
 
   mode: string;
 
+  @State() keyFocus = false;
+
   @Prop() selected = false;
   @Prop() tab: HTMLIonTabElement;
 
@@ -35,6 +37,14 @@ export class TabButton {
     ev.stopPropagation();
   }
 
+  private onKeyUp() {
+    this.keyFocus = true;
+  }
+
+  private onBlur() {
+    this.keyFocus = false;
+  }
+
   hostData() {
     const selected = this.selected;
     const tab = this.tab;
@@ -56,6 +66,7 @@ export class TabButton {
         'has-badge': hasBadge,
         'tab-disabled': tab.disabled,
         'tab-hidden': tab.hidden,
+        'focused': this.keyFocus
       }
     };
   }
@@ -63,7 +74,12 @@ export class TabButton {
   render() {
     const tab = this.tab;
     return [
-      <button type='button' class='tab-cover' disabled={tab.disabled}>
+      <button
+        type='button'
+        class='tab-cover'
+        onKeyUp={this.onKeyUp.bind(this)}
+        onBlur={this.onBlur.bind(this)}
+        disabled={tab.disabled}>
         { tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
         { tab.title && <span class='tab-button-text'>{tab.title}</span> }
         { tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }

packages/core/src/components/tabbar/tabbar.ios.scss

@@ -42,7 +42,7 @@
 @mixin tabbar-ios($color-name) {
   $color-base: ion-color($colors-ios, $color-name, base, ios);
   $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
-  $color-shade: ion-color($colors-ios, $color-name, tint, ios);
+  $color-shade: ion-color($colors-ios, $color-name, shade, ios);
 
   $translucent-background-color: ion-color-alpha($colors-ios, $color-name, $alpha-ios-high, ios);
 
@@ -58,6 +58,10 @@
     color: $color-contrast;
   }
 
+  .tabbar-ios-#{$color-name} .tab-button.focused {
+    background: $color-shade;
+  }
+
   .tabbar-ios-#{$color-name} .tab-button:hover:not(.disable-hover),
   .tabbar-ios-#{$color-name} .tab-selected {
     font-weight: bold;

packages/core/src/components/tabbar/tabbar.md.scss

@@ -26,6 +26,7 @@
 @mixin tabbar-md($color-name) {
   $color-base: ion-color($colors-md, $color-name, base, md);
   $color-contrast: ion-color($colors-md, $color-name, contrast, md);
+  $color-shade: ion-color($colors-md, $color-name, shade, ios);
 
   .tabbar-md-#{$color-name} {
     color: $color-contrast;
@@ -34,6 +35,10 @@
     fill: $color-contrast;
   }
 
+  .tabbar-md-#{$color-name} .tab-button.focused {
+    background: $color-shade;
+  }
+
   .enable-hover .tabbar-md-#{$color-name} .tab-button:hover,
   .tabbar-md-#{$color-name} .tab-button.tab-selected {
     color: $color-contrast;