fix(tab-button): using button for accesibility

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,19 +21,34 @@ 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 > * {
+  >.tab-cover {
     opacity: .4;
   }
+}
 
 .tab-button-text,
 .tab-button-icon {

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 {
-
-}

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"