From 84eb935cec8953e509ca147bfd37c16e454be220 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Sun, 5 Jul 2020 05:02:17 +0530
Subject: [PATCH] :wheelchair: Add keyboard accessibility to tabs

---
 components/firebase/feeds.vue |  2 +-
 components/ui/tab.vue         |  2 +-
 components/ui/tabs.vue        | 12 +++++++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/firebase/feeds.vue b/components/firebase/feeds.vue
index ad14fdf89..1bbc3b550 100644
--- a/components/firebase/feeds.vue
+++ b/components/firebase/feeds.vue
@@ -27,7 +27,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 294px);
+  max-height: calc(100vh - 298px);
 }
 
 ul,
diff --git a/components/ui/tab.vue b/components/ui/tab.vue
index 7751db085..af33a8594 100644
--- a/components/ui/tab.vue
+++ b/components/ui/tab.vue
@@ -25,7 +25,7 @@ export default {
 
   // computed: {
   //   href() {
-  //     return `#${this.name.toLowerCase().replace(/ /g, "-")}`
+  //     return `#${this.label.toLowerCase().replace(/ /g, "-")}`
   //   },
   // },
 
diff --git a/components/ui/tabs.vue b/components/ui/tabs.vue
index 63347b365..c9fcd217f 100644
--- a/components/ui/tabs.vue
+++ b/components/ui/tabs.vue
@@ -2,7 +2,13 @@
   <div class="tabs-wrapper">
     <div class="tabs">
       <ul>
-        <li v-for="(tab, index) in tabs" :class="{ 'is-active': tab.isActive }" :key="index">
+        <li
+          v-for="(tab, index) in tabs"
+          :class="{ 'is-active': tab.isActive }"
+          :key="index"
+          :tabindex="0"
+          @keyup.enter="selectTab(tab)"
+        >
           <a :href="tab.href" @click="selectTab(tab)">
             <i v-if="tab.icon" class="material-icons">
               {{ tab.icon }}
@@ -57,6 +63,10 @@
         }
       }
 
+      &:focus a {
+        color: var(--fg-color);
+      }
+
       &.is-active a {
         background-color: var(--brd-color);
         color: var(--fg-color);