From c9800093f207607e79dec46ae052941d43aa6b54 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Tue, 13 Feb 2018 13:31:50 +0100
Subject: [PATCH] fix(tab-button): using button for accesibility

---
 .../src/components/tab-button/tab-button.scss | 25 +++++++++++++++----
 .../src/components/tab-button/tab-button.tsx  | 24 +++++++-----------
 .../src/components/tabs/test/basic/index.html |  2 +-
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/components/tab-button/tab-button.scss b/packages/core/src/components/tab-button/tab-button.scss
index eccec5cab0..474459e49b 100644
--- a/packages/core/src/components/tab-button/tab-button.scss
+++ b/packages/core/src/components/tab-button/tab-button.scss
@@ -9,7 +9,7 @@ ion-tab-button {
 
   position: relative;
   z-index: 0;
-  display: flex;
+  display: block;
   overflow: hidden;
 
   flex: 1;
@@ -21,18 +21,33 @@ ion-tab-button {
 
   text-decoration: none;
   background: none;
-  cursor: pointer;
 
   user-select: none;
 }
 
+.tab-cover {
+  display: flex;
+
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  height: 100%;
+
+  border: 0;
+  outline: none;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
 
 .tab-disabled {
   pointer-events: none;
-}
 
-.tab-disabled > * {
-  opacity: .4;
+  >.tab-cover {
+    opacity: .4;
+  }
 }
 
 .tab-button-text,
diff --git a/packages/core/src/components/tab-button/tab-button.tsx b/packages/core/src/components/tab-button/tab-button.tsx
index 50a79e639d..b654dcf0b7 100644
--- a/packages/core/src/components/tab-button/tab-button.tsx
+++ b/packages/core/src/components/tab-button/tab-button.tsx
@@ -17,9 +17,9 @@ export class TabButton {
   @Prop() selected = false;
   @Prop() tab: HTMLIonTabElement;
 
-  @Event() ionTabbarClick: EventEmitter<TabButtonEventDetail>;
-  @Event() ionTabButtonDidLoad: EventEmitter<TabButtonEventDetail>;
-  @Event() ionTabButtonDidUnload: EventEmitter<TabButtonEventDetail>;
+  @Event() ionTabbarClick: EventEmitter<HTMLIonTabElement>;
+  @Event() ionTabButtonDidLoad: EventEmitter<void>;
+  @Event() ionTabButtonDidUnload: EventEmitter<void>;
 
   componentDidLoad() {
     this.ionTabButtonDidLoad.emit();
@@ -63,18 +63,12 @@ export class TabButton {
   render() {
     const tab = this.tab;
     return [
-        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>,
-        this.mode === 'md' && <ion-ripple-effect useTapClick={false} />
+      <button type='button' class='tab-cover' 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> }
+        { this.mode === 'md' && <ion-ripple-effect/> }
+      </button>
     ];
   }
 }
-
-export interface TabButtonEvent extends CustomEvent<TabButtonEventDetail> {
-  detail: TabButtonEventDetail;
-}
-
-export interface TabButtonEventDetail extends HTMLIonTabElement {
-
-}
diff --git a/packages/core/src/components/tabs/test/basic/index.html b/packages/core/src/components/tabs/test/basic/index.html
index f800a74591..526a1e19e1 100644
--- a/packages/core/src/components/tabs/test/basic/index.html
+++ b/packages/core/src/components/tabs/test/basic/index.html
@@ -50,7 +50,7 @@
         </ion-page>
       </ion-tab>
 
-      <ion-tab
+      <ion-tab disabled
         title="Messages"
         icon="chatboxes"
         component="page-one"