fix(tabs): allow selection on enter and spacebar press (#18381)

fixes #18363
ionic-team · May 29, 2019 · 11cde99 · 11cde99
1 parent 0fd3e5d
commit 11cde99
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
@@ -63,6 +63,23 @@ export class TabButton implements ComponentInterface {
 
   @Listen('click')
   onClick(ev: Event) {
+    this.selectTab(ev);
+  }
+
+  @Listen('keyup')
+  onKeyUp(ev: KeyboardEvent) {
+    if (ev.key === 'Enter' || ev.key === ' ') {
+      this.selectTab(ev);
+    }
+  }
+
+  componentWillLoad() {
+    if (this.layout === undefined) {
+      this.layout = this.config.get('tabButtonLayout', 'icon-top');
+    }
+  }
+
+  private selectTab(ev: Event | KeyboardEvent) {
     if (this.tab !== undefined) {
       if (!this.disabled) {
         this.ionTabButtonClick.emit({
@@ -75,12 +92,6 @@ export class TabButton implements ComponentInterface {
     }
   }
 
-  componentWillLoad() {
-    if (this.layout === undefined) {
-      this.layout = this.config.get('tabButtonLayout', 'icon-top');
-    }
-  }
-
   private get hasLabel() {
     return !!this.el.querySelector('ion-label');
   }