refactor(ui): a11y improvements

assets/scss/styles.scss

@@ -94,11 +94,12 @@ a {
 
   &.link {
     @apply items-center;
-    @apply px-2 py-1;
+    @apply px-1 py-0.5;
-    @apply -mx-2 -my-1;
+    @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 {
+    .tippy-roundarrow svg {
-    @apply border-t-popover;
+      @apply fill-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;
   }
 }
 

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>

components/app/Header.vue

@@ -15,21 +15,13 @@
         icon="offline_bolt"
         @click.native="showInstallPrompt()"
       />
-      <span tabindex="-1">
+      <ButtonPrimary
-        <ButtonPrimary
+        v-if="currentUser === null"
-          v-if="currentUser === null"
+        label="Login"
-          label="Login"
+        @click.native="showLogin = true"
-          @click.native="showLogin = true"
+      />
-        />
+      <span v-else>
-        <tippy
+        <tippy ref="user" interactive trigger="click" theme="popover" arrow>
-          v-else
-          ref="user"
-          interactive
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
           <template #trigger>
             <ProfilePicture
               v-if="currentUser.photoURL"

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 {

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') : '',
         ]"

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') : '',
       ]"

components/collections/ImportExport.vue

@@ -19,7 +19,6 @@
           "
           ref="options"
           interactive
-          tabindex="-1"
           trigger="click"
           theme="popover"
           arrow

components/collections/graphql/Collection.vue

@@ -44,14 +44,7 @@
           })
         "
       />
-      <tippy
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"

components/collections/graphql/Folder.vue

@@ -42,14 +42,7 @@
         class="group-hover:inline-flex hidden"
         @click.native="$emit('add-folder', { folder, path: folderPath })"
       />
-      <tippy
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"

components/collections/graphql/ImportExport.vue

@@ -3,14 +3,7 @@
     <template #header>
       <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
       <div class="flex">
-        <tippy
+        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-          ref="options"
-          interactive
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
           <template #trigger>
             <TabPrimary
               v-tippy="{ theme: 'tooltip' }"

components/collections/graphql/Request.vue

@@ -49,14 +49,7 @@
         class="group-hover:inline-flex hidden"
         @click.native="!doc ? selectRequest() : {}"
       />
-      <tippy
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"

components/collections/my/Collection.vue

@@ -62,14 +62,7 @@
           })
         "
       />
-      <tippy
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"

components/collections/my/Folder.vue

@@ -42,14 +42,7 @@
         class="group-hover:inline-flex hidden"
         @click.native="$emit('add-folder', { folder, path: folderPath })"
       />
-      <tippy
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"

components/collections/my/Request.vue

@@ -57,14 +57,7 @@
         class="group-hover:inline-flex hidden"
         @click.native="!doc ? selectRequest() : {}"
       />
-      <tippy
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"

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

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

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

components/environments/Environment.vue

@@ -25,14 +25,7 @@
       </span>
     </span>
     <span>
-      <tippy
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"

components/environments/ImportExport.vue

@@ -5,14 +5,7 @@
         {{ $t("import_export") }} {{ $t("environments") }}
       </h3>
       <div class="flex">
-        <tippy
+        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-          ref="options"
-          interactive
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
           <template #trigger>
             <TabPrimary
               v-tippy="{ theme: 'tooltip' }"

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

components/http/Body.vue

@@ -4,7 +4,6 @@
       <tippy
         ref="contentTypeOptions"
         interactive
-        tabindex="-1"
         trigger="click"
         theme="popover"
         arrow

components/http/CodegenModal.vue

@@ -14,7 +14,6 @@
             <tippy
               ref="options"
               interactive
-              tabindex="-1"
               trigger="click"
               theme="popover"
               arrow

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

components/profile/Picture.vue

@@ -17,10 +17,17 @@
     <div class="rounded-full shadow-inner inset-0 absolute"></div>
     <span
       v-if="indicator"
-      :class="[
+      class="
-        'border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute',
+        border-primary
-        indicatorStyles,
+        rounded-full
-      ]"
+        border-2
+        h-2.5
+        -top-0.5
+        -right-0.5
+        w-2.5
+        absolute
+      "
+      :class="indicatorStyles"
     ></span>
   </div>
 </template>

components/smart/AceEditor.vue

@@ -41,7 +41,6 @@
           v-if="siblingDropDownIndex == index"
           ref="options"
           interactive
-          tabindex="-1"
           trigger="click"
           theme="popover"
           arrow

components/smart/ChangeLanguage.vue

@@ -1,14 +1,7 @@
 <template>
   <span class="inline-flex">
     <span class="select-wrapper">
-      <tippy
+      <tippy ref="language" interactive trigger="click" theme="popover" arrow>
-        ref="language"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"

components/smart/FontSizePicker.vue

@@ -1,14 +1,7 @@
 <template>
   <span class="inline-flex">
     <span class="select-wrapper">
-      <tippy
+      <tippy ref="fontSize" interactive trigger="click" theme="popover" arrow>
-        ref="fontSize"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"

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)"
           >

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

components/teams/Team.vue

@@ -25,14 +25,7 @@
       </div>
     </div>
     <span>
-      <tippy
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
-      >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"

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)