From 346ece94b77527c928834a7eb6d672072ad4499f Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 6 Aug 2021 21:40:26 +0530
Subject: [PATCH] refactor(ui): a11y improvements

---
 assets/scss/styles.scss                       | 25 ++++++-------------
 components/app/Footer.vue                     |  4 +--
 components/app/Header.vue                     | 22 ++++++----------
 components/app/Sidenav.vue                    |  1 +
 components/button/Primary.vue                 |  4 +--
 components/button/Secondary.vue               |  4 +--
 components/collections/ImportExport.vue       |  1 -
 components/collections/graphql/Collection.vue |  9 +------
 components/collections/graphql/Folder.vue     |  9 +------
 .../collections/graphql/ImportExport.vue      |  9 +------
 components/collections/graphql/Request.vue    |  9 +------
 components/collections/my/Collection.vue      |  9 +------
 components/collections/my/Folder.vue          |  9 +------
 components/collections/my/Request.vue         |  9 +------
 components/collections/teams/Collection.vue   |  1 -
 components/collections/teams/Folder.vue       |  1 -
 components/collections/teams/Request.vue      |  1 -
 components/environments/Environment.vue       |  9 +------
 components/environments/ImportExport.vue      |  9 +------
 components/firebase/Login.vue                 | 15 ++++++++---
 components/http/Body.vue                      |  1 -
 components/http/CodegenModal.vue              |  1 -
 components/http/Request.vue                   |  3 ---
 components/profile/Picture.vue                | 15 ++++++++---
 components/smart/AceEditor.vue                |  1 -
 components/smart/ChangeLanguage.vue           |  9 +------
 components/smart/FontSizePicker.vue           |  9 +------
 components/smart/Tabs.vue                     |  2 +-
 components/teams/Edit.vue                     |  2 --
 components/teams/Team.vue                     |  9 +------
 plugins/v-tippy.js                            |  2 ++
 31 files changed, 59 insertions(+), 155 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 6fb7131ed..9101d08f6 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -94,11 +94,12 @@ a {
 
   &.link {
     @apply items-center;
-    @apply px-2 py-1;
-    @apply -mx-2 -my-1;
+    @apply px-1 py-0.5;
+    @apply -mx-1 -my-0.5;
     @apply text-accent;
+    @apply rounded;
     @apply hover:text-accentDark;
-    @apply focus-visible:(ring ring-inset ring-accent);
+    @apply focus-visible:(ring ring-accent);
   }
 }
 
@@ -134,22 +135,10 @@ a {
 
     font-size: var(--body-font-size);
     line-height: var(--body-line-height);
-  }
 
-  &[x-placement^="top"] .tippy-tooltip .tippy-arrow {
-    @apply border-t-popover;
-  }
-
-  &[x-placement^="bottom"] .tippy-tooltip .tippy-arrow {
-    @apply border-b-popover;
-  }
-
-  &[x-placement^="left"] .tippy-tooltip .tippy-arrow {
-    @apply border-l-popover;
-  }
-
-  &[x-placement^="right"] .tippy-tooltip .tippy-arrow {
-    @apply border-r-popover;
+    .tippy-roundarrow svg {
+      @apply fill-popover;
+    }
   }
 }
 
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 43c1a37f1..249358235 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -26,7 +26,6 @@
           <tippy
             ref="options"
             interactive
-            tabindex="-1"
             trigger="click"
             theme="popover"
             arrow
@@ -97,7 +96,8 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
           icon="menu_open"
-          :class="['transform rotate-180', { 'rotate-0': !RIGHT_SIDEBAR }]"
+          class="transform rotate-180"
+          :class="{ 'rotate-0': !RIGHT_SIDEBAR }"
           @click.native="toggleSetting('RIGHT_SIDEBAR')"
         />
       </div>
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 7e1e22755..d5925e796 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -15,21 +15,13 @@
         icon="offline_bolt"
         @click.native="showInstallPrompt()"
       />
-      <span tabindex="-1">
-        <ButtonPrimary
-          v-if="currentUser === null"
-          label="Login"
-          @click.native="showLogin = true"
-        />
-        <tippy
-          v-else
-          ref="user"
-          interactive
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
+      <ButtonPrimary
+        v-if="currentUser === null"
+        label="Login"
+        @click.native="showLogin = true"
+      />
+      <span v-else>
+        <tippy ref="user" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
             <ProfilePicture
               v-if="currentUser.photoURL"
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index 4d5650d67..add64ef20 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -63,6 +63,7 @@ export default {
   @apply justify-center;
   @apply transition;
   @apply hover:(bg-primaryDark text-secondaryDark);
+  @apply focus-visible:(ring ring-inset ring-accent);
 
   .material-icons,
   .svg-icons {
diff --git a/components/button/Primary.vue b/components/button/Primary.vue
index 80268e89c..7f150e675 100644
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -41,8 +41,8 @@
     >
       <i
         v-if="icon"
+        class="material-icons"
         :class="[
-          'material-icons',
           { '!text-2xl': large },
           label ? (reverse ? 'ml-2' : 'mr-2') : '',
         ]"
@@ -52,8 +52,8 @@
       <SmartIcon
         v-if="svg"
         :name="svg"
+        class="svg-icons"
         :class="[
-          'svg-icons',
           { '!h-6 !w-6': large },
           label ? (reverse ? 'ml-2' : 'mr-2') : '',
         ]"
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index 00e78acd7..b2c780142 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -31,8 +31,8 @@
   >
     <i
       v-if="icon"
+      class="material-icons"
       :class="[
-        'material-icons',
         { '!text-2xl': large },
         label ? (reverse ? 'ml-2' : 'mr-2') : '',
       ]"
@@ -42,8 +42,8 @@
     <SmartIcon
       v-if="svg"
       :name="svg"
+      class="svg-icons"
       :class="[
-        'svg-icons',
         { '!h-6 !w-6': large },
         label ? (reverse ? 'ml-2' : 'mr-2') : '',
       ]"
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index d663b8b7a..357113c2b 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -19,7 +19,6 @@
           "
           ref="options"
           interactive
-          tabindex="-1"
           trigger="click"
           theme="popover"
           arrow
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index 596f32e4d..5f722f02c 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -44,14 +44,7 @@
           })
         "
       />
-      <tippy
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index 85bc3ba77..5c1160d82 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -42,14 +42,7 @@
         class="group-hover:inline-flex hidden"
         @click.native="$emit('add-folder', { folder, path: folderPath })"
       />
-      <tippy
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index ba2ad8162..35b47f69e 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -3,14 +3,7 @@
     <template #header>
       <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
       <div class="flex">
-        <tippy
-          ref="options"
-          interactive
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
+        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
             <TabPrimary
               v-tippy="{ theme: 'tooltip' }"
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index 6271fe19b..b32a891ce 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -49,14 +49,7 @@
         class="group-hover:inline-flex hidden"
         @click.native="!doc ? selectRequest() : {}"
       />
-      <tippy
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 342276893..f74473080 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -62,14 +62,7 @@
           })
         "
       />
-      <tippy
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 10ec944a1..ea4a0925b 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -42,14 +42,7 @@
         class="group-hover:inline-flex hidden"
         @click.native="$emit('add-folder', { folder, path: folderPath })"
       />
-      <tippy
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index 5f8a683b5..ac3d8fc42 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -57,14 +57,7 @@
         class="group-hover:inline-flex hidden"
         @click.native="!doc ? selectRequest() : {}"
       />
-      <tippy
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 866b5e4a9..760e2a7b1 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -58,7 +58,6 @@
         v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
         ref="options"
         interactive
-        tabindex="-1"
         trigger="click"
         theme="popover"
         arrow
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 211dd1b2d..01ead93be 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -39,7 +39,6 @@
         v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
         ref="options"
         interactive
-        tabindex="-1"
         trigger="click"
         theme="popover"
         arrow
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 618c9b105..62a9d045f 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -54,7 +54,6 @@
         v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
         ref="options"
         interactive
-        tabindex="-1"
         trigger="click"
         theme="popover"
         arrow
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index 08da53597..605b8f8ee 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -25,14 +25,7 @@
       </span>
     </span>
     <span>
-      <tippy
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 5c77c5cf8..5a9d59645 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -5,14 +5,7 @@
         {{ $t("import_export") }} {{ $t("environments") }}
       </h3>
       <div class="flex">
-        <tippy
-          ref="options"
-          interactive
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
+        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
             <TabPrimary
               v-tippy="{ theme: 'tooltip' }"
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 32286a867..6e8de2e44 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -55,7 +55,6 @@
               : true
           "
           type="button"
-          tabindex="-1"
           :label="$t('auth.send_magic_link')"
           @click.native="signInWithEmail"
         />
@@ -79,9 +78,19 @@
     <template #footer>
       <p v-if="mode === 'sign-in'" class="text-secondaryLight">
         By signing in, you are agreeing to our
-        <SmartAnchor class="link" to="/index" label="Terms of Service" />
+        <SmartAnchor
+          class="link"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Terms-&-Conditions"
+          blank
+          label="Terms of Service"
+        />
         and
-        <SmartAnchor class="link" to="/index" label="Privacy Policy" />.
+        <SmartAnchor
+          class="link"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Privacy-Policy"
+          blank
+          label="Privacy Policy"
+        />.
       </p>
       <p v-if="mode === 'email'" class="text-secondaryLight">
         <SmartAnchor
diff --git a/components/http/Body.vue b/components/http/Body.vue
index 86fedb5ec..640e43779 100644
--- a/components/http/Body.vue
+++ b/components/http/Body.vue
@@ -4,7 +4,6 @@
       <tippy
         ref="contentTypeOptions"
         interactive
-        tabindex="-1"
         trigger="click"
         theme="popover"
         arrow
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 9d9bcf706..a7f34ba4f 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -14,7 +14,6 @@
             <tippy
               ref="options"
               interactive
-              tabindex="-1"
               trigger="click"
               theme="popover"
               arrow
diff --git a/components/http/Request.vue b/components/http/Request.vue
index e03f3202d..dc9a3c0b9 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -5,7 +5,6 @@
         <tippy
           ref="methodOptions"
           interactive
-          tabindex="-1"
           trigger="click"
           theme="popover"
           arrow
@@ -99,7 +98,6 @@
         <tippy
           ref="sendOptions"
           interactive
-          tabindex="-1"
           trigger="click"
           theme="popover"
           arrow
@@ -149,7 +147,6 @@
         <tippy
           ref="saveOptions"
           interactive
-          tabindex="-1"
           trigger="click"
           theme="popover"
           arrow
diff --git a/components/profile/Picture.vue b/components/profile/Picture.vue
index 2d9a1be31..92b31579b 100644
--- a/components/profile/Picture.vue
+++ b/components/profile/Picture.vue
@@ -17,10 +17,17 @@
     <div class="rounded-full shadow-inner inset-0 absolute"></div>
     <span
       v-if="indicator"
-      :class="[
-        'border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute',
-        indicatorStyles,
-      ]"
+      class="
+        border-primary
+        rounded-full
+        border-2
+        h-2.5
+        -top-0.5
+        -right-0.5
+        w-2.5
+        absolute
+      "
+      :class="indicatorStyles"
     ></span>
   </div>
 </template>
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index 7fb2adc59..d58b73f24 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -41,7 +41,6 @@
           v-if="siblingDropDownIndex == index"
           ref="options"
           interactive
-          tabindex="-1"
           trigger="click"
           theme="popover"
           arrow
diff --git a/components/smart/ChangeLanguage.vue b/components/smart/ChangeLanguage.vue
index 0db829f7f..dc9e66be4 100644
--- a/components/smart/ChangeLanguage.vue
+++ b/components/smart/ChangeLanguage.vue
@@ -1,14 +1,7 @@
 <template>
   <span class="inline-flex">
     <span class="select-wrapper">
-      <tippy
-        ref="language"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
+      <tippy ref="language" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/smart/FontSizePicker.vue b/components/smart/FontSizePicker.vue
index e3efcde35..a96712403 100644
--- a/components/smart/FontSizePicker.vue
+++ b/components/smart/FontSizePicker.vue
@@ -1,14 +1,7 @@
 <template>
   <span class="inline-flex">
     <span class="select-wrapper">
-      <tippy
-        ref="fontSize"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
+      <tippy ref="fontSize" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 800f62066..f3f56cf65 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -8,7 +8,7 @@
             :key="`tab-${index}`"
             class="tab"
             :class="{ active: tab.active }"
-            :tabindex="0"
+            tabindex="0"
             @keyup.enter="selectTab(tab)"
             @click="selectTab(tab)"
           >
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index f8e9a109c..2120d8357 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -58,7 +58,6 @@
               <tippy
                 ref="memberOptions"
                 interactive
-                tabindex="-1"
                 trigger="click"
                 theme="popover"
                 arrow
@@ -146,7 +145,6 @@
               <tippy
                 ref="newMemberOptions"
                 interactive
-                tabindex="-1"
                 trigger="click"
                 theme="popover"
                 arrow
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 6db796948..adf7089bd 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -25,14 +25,7 @@
       </div>
     </div>
     <span>
-      <tippy
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/plugins/v-tippy.js b/plugins/v-tippy.js
index 3a978a692..4df191594 100644
--- a/plugins/v-tippy.js
+++ b/plugins/v-tippy.js
@@ -2,6 +2,8 @@ import Vue from "vue"
 import VueTippy, { TippyComponent } from "vue-tippy"
 
 Vue.use(VueTippy, {
+  a11y: false,
   animateFill: false,
+  arrowType: "round",
 })
 Vue.component("Tippy", TippyComponent)