From 9bd55b6db58904ce90a3951d25b61a917341404a Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 1 Mar 2022 12:11:53 +0530
Subject: [PATCH] chore(a11y): improve component roles

---
 .../components/app/Announcement.vue           |   1 +
 .../hoppscotch-app/components/app/Footer.vue  |   1 +
 .../hoppscotch-app/components/app/Header.vue  |   2 +-
 .../hoppscotch-app/components/app/Sidenav.vue |  40 ++--
 .../components/button/Primary.vue             |   1 +
 .../components/button/Secondary.vue           |   1 +
 .../components/collections/ChooseType.vue     |  34 +--
 .../collections/graphql/Collection.vue        |   1 +
 .../components/collections/graphql/Folder.vue |   1 +
 .../collections/graphql/ImportExport.vue      |  64 +++---
 .../collections/graphql/Request.vue           |   1 +
 .../components/collections/my/Collection.vue  |   1 +
 .../components/collections/my/Folder.vue      |   1 +
 .../components/collections/my/Request.vue     |   1 +
 .../collections/teams/Collection.vue          |   1 +
 .../components/collections/teams/Folder.vue   |   1 +
 .../components/collections/teams/Request.vue  |   1 +
 .../components/environments/Environment.vue   |   1 +
 .../components/environments/ImportExport.vue  |  64 +++---
 .../components/environments/index.vue         |  52 +++--
 .../components/http/Authorization.vue         | 214 +++++++++---------
 .../hoppscotch-app/components/http/Body.vue   |  50 ++--
 .../components/http/CodegenModal.vue          |   2 +-
 .../components/http/Request.vue               |  16 +-
 .../components/http/TestResult.vue            |   1 +
 .../lenses/renderers/JSONLensRenderer.vue     |  34 ++-
 .../components/realtime/Socketio.vue          |  76 ++++---
 .../components/smart/ChangeLanguage.vue       |  26 ++-
 .../components/smart/Checkbox.vue             |   2 +
 .../components/smart/ConfirmModal.vue         |   2 +
 .../components/smart/FontSizePicker.vue       |  32 +--
 .../hoppscotch-app/components/smart/Item.vue  |   1 +
 .../hoppscotch-app/components/smart/Link.js   |   2 +
 .../hoppscotch-app/components/smart/Modal.vue |   2 +
 .../hoppscotch-app/components/smart/Radio.vue |   2 +
 .../hoppscotch-app/components/smart/Tabs.vue  |   1 +
 .../hoppscotch-app/components/teams/Edit.vue  |  92 ++++----
 .../components/teams/Invite.vue               |  92 ++++----
 .../hoppscotch-app/components/teams/Team.vue  |   1 +
 39 files changed, 498 insertions(+), 420 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/Announcement.vue b/packages/hoppscotch-app/components/app/Announcement.vue
index a86e3ade9..393ca82f9 100644
--- a/packages/hoppscotch-app/components/app/Announcement.vue
+++ b/packages/hoppscotch-app/components/app/Announcement.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
+    role="alert"
   >
     <i class="mr-2 material-icons">info_outline</i>
     <span class="text-secondaryDark">
diff --git a/packages/hoppscotch-app/components/app/Footer.vue b/packages/hoppscotch-app/components/app/Footer.vue
index 5886f8793..9c4ab205a 100644
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -59,6 +59,7 @@
             ref="tippyActions"
             class="flex flex-col focus:outline-none"
             tabindex="0"
+            role="menu"
             @keyup.d="documentation.$el.click()"
             @keyup.s="shortcuts.$el.click()"
             @keyup.c="chat.$el.click()"
diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index 91c90c516..edcc83751 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -87,7 +87,7 @@
                   svg="user"
                 />
               </template>
-              <div class="flex flex-col px-2 text-tiny">
+              <div class="flex flex-col px-2 text-tiny" role="menu">
                 <span class="inline-flex font-semibold truncate">
                   {{ currentUser.displayName }}
                 </span>
diff --git a/packages/hoppscotch-app/components/app/Sidenav.vue b/packages/hoppscotch-app/components/app/Sidenav.vue
index b2741365d..43370d21d 100644
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/packages/hoppscotch-app/components/app/Sidenav.vue
@@ -1,24 +1,28 @@
 <template>
   <aside class="flex justify-between h-full md:flex-col">
     <nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
-      <NuxtLink
-        v-for="(navigation, index) in primaryNavigation"
-        :key="`navigation-${index}`"
-        :to="localePath(navigation.target)"
-        class="nav-link"
-        tabindex="0"
-      >
-        <div v-if="navigation.svg">
-          <SmartIcon :name="navigation.svg" class="svg-icons" />
-        </div>
-        <span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
-        <tippy
-          v-if="!EXPAND_NAVIGATION"
-          :placement="mdAndLarger ? 'right' : 'bottom'"
-          theme="tooltip"
-          :content="navigation.title"
-        />
-      </NuxtLink>
+      <ul>
+        <li>
+          <NuxtLink
+            v-for="(navigation, index) in primaryNavigation"
+            :key="`navigation-${index}`"
+            :to="localePath(navigation.target)"
+            class="nav-link"
+            tabindex="0"
+          >
+            <div v-if="navigation.svg">
+              <SmartIcon :name="navigation.svg" class="svg-icons" />
+            </div>
+            <span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
+            <tippy
+              v-if="!EXPAND_NAVIGATION"
+              :placement="mdAndLarger ? 'right' : 'bottom'"
+              theme="tooltip"
+              :content="navigation.title"
+            />
+          </NuxtLink>
+        </li>
+      </ul>
     </nav>
   </aside>
 </template>
diff --git a/packages/hoppscotch-app/components/button/Primary.vue b/packages/hoppscotch-app/components/button/Primary.vue
index 5dd5fdff4..26ef3c782 100644
--- a/packages/hoppscotch-app/components/button/Primary.vue
+++ b/packages/hoppscotch-app/components/button/Primary.vue
@@ -26,6 +26,7 @@
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
     :type="type"
+    role="button"
   >
     <span
       v-if="!loading"
diff --git a/packages/hoppscotch-app/components/button/Secondary.vue b/packages/hoppscotch-app/components/button/Secondary.vue
index 7f838ab49..908642052 100644
--- a/packages/hoppscotch-app/components/button/Secondary.vue
+++ b/packages/hoppscotch-app/components/button/Secondary.vue
@@ -25,6 +25,7 @@
     ]"
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
+    role="button"
   >
     <span
       v-if="!loading"
diff --git a/packages/hoppscotch-app/components/collections/ChooseType.vue b/packages/hoppscotch-app/components/collections/ChooseType.vue
index 77a1b76d0..32290c9b9 100644
--- a/packages/hoppscotch-app/components/collections/ChooseType.vue
+++ b/packages/hoppscotch-app/components/collections/ChooseType.vue
@@ -39,22 +39,24 @@
                 />
               </span>
             </template>
-            <SmartItem
-              v-for="(team, index) in myTeams"
-              :key="`team-${index}`"
-              :label="team.name"
-              :info-icon="
-                team.id === collectionsType.selectedTeam?.id ? 'done' : ''
-              "
-              :active-info-icon="team.id === collectionsType.selectedTeam?.id"
-              svg="users"
-              @click.native="
-                () => {
-                  updateSelectedTeam(team)
-                  options.tippy().hide()
-                }
-              "
-            />
+            <div class="flex flex-col" role="menu">
+              <SmartItem
+                v-for="(team, index) in myTeams"
+                :key="`team-${index}`"
+                :label="team.name"
+                :info-icon="
+                  team.id === collectionsType.selectedTeam?.id ? 'done' : ''
+                "
+                :active-info-icon="team.id === collectionsType.selectedTeam?.id"
+                svg="users"
+                @click.native="
+                  () => {
+                    updateSelectedTeam(team)
+                    options.tippy().hide()
+                  }
+                "
+              />
+            </div>
           </tippy>
         </SmartIntersection>
       </SmartTab>
diff --git a/packages/hoppscotch-app/components/collections/graphql/Collection.vue b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
index e189857fb..293b68241 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -60,6 +60,7 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
+              role="menu"
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
diff --git a/packages/hoppscotch-app/components/collections/graphql/Folder.vue b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
index d5a80fb09..d52355c06 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -56,6 +56,7 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
+              role="menu"
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
diff --git a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
index 07dc78323..2a5f49f62 100644
--- a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
@@ -16,44 +16,46 @@
               svg="more-vertical"
             />
           </template>
-          <SmartItem
-            icon="assignment_returned"
-            :label="t('import.from_gist')"
-            @click.native="
-              () => {
-                readCollectionGist()
-                options.tippy().hide()
-              }
-            "
-          />
-          <span
-            v-tippy="{ theme: 'tooltip' }"
-            :title="
-              !currentUser
-                ? `${t('export.require_github')}`
-                : currentUser.provider !== 'github.com'
-                ? `${t('export.require_github')}`
-                : undefined
-            "
-          >
+          <div class="flex flex-col" role="menu">
             <SmartItem
-              :disabled="
-                !currentUser
-                  ? true
-                  : currentUser.provider !== 'github.com'
-                  ? true
-                  : false
-              "
-              icon="assignment_turned_in"
-              :label="t('export.create_secret_gist')"
+              icon="assignment_returned"
+              :label="t('import.from_gist')"
               @click.native="
                 () => {
-                  createCollectionGist()
+                  readCollectionGist()
                   options.tippy().hide()
                 }
               "
             />
-          </span>
+            <span
+              v-tippy="{ theme: 'tooltip' }"
+              :title="
+                !currentUser
+                  ? `${t('export.require_github')}`
+                  : currentUser.provider !== 'github.com'
+                  ? `${t('export.require_github')}`
+                  : undefined
+              "
+            >
+              <SmartItem
+                :disabled="
+                  !currentUser
+                    ? true
+                    : currentUser.provider !== 'github.com'
+                    ? true
+                    : false
+                "
+                icon="assignment_turned_in"
+                :label="t('export.create_secret_gist')"
+                @click.native="
+                  () => {
+                    createCollectionGist()
+                    options.tippy().hide()
+                  }
+                "
+              />
+            </span>
+          </div>
         </tippy>
       </span>
     </template>
diff --git a/packages/hoppscotch-app/components/collections/graphql/Request.vue b/packages/hoppscotch-app/components/collections/graphql/Request.vue
index 8f3d24764..bb585d26d 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Request.vue
@@ -56,6 +56,7 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
+              role="menu"
               @keyup.e="edit.$el.click()"
               @keyup.d="duplicate.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
diff --git a/packages/hoppscotch-app/components/collections/my/Collection.vue b/packages/hoppscotch-app/components/collections/my/Collection.vue
index 689367233..af10a719f 100644
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -78,6 +78,7 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
+              role="menu"
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
diff --git a/packages/hoppscotch-app/components/collections/my/Folder.vue b/packages/hoppscotch-app/components/collections/my/Folder.vue
index dd9213905..cfed4310c 100644
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -56,6 +56,7 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
+              role="menu"
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
diff --git a/packages/hoppscotch-app/components/collections/my/Request.vue b/packages/hoppscotch-app/components/collections/my/Request.vue
index 6d877e07f..41ee80cd1 100644
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/packages/hoppscotch-app/components/collections/my/Request.vue
@@ -80,6 +80,7 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
+              role="menu"
               @keyup.e="edit.$el.click()"
               @keyup.d="duplicate.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
diff --git a/packages/hoppscotch-app/components/collections/teams/Collection.vue b/packages/hoppscotch-app/components/collections/teams/Collection.vue
index fc441a12c..d347ac581 100644
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -79,6 +79,7 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
+              role="menu"
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
diff --git a/packages/hoppscotch-app/components/collections/teams/Folder.vue b/packages/hoppscotch-app/components/collections/teams/Folder.vue
index 91700328b..843bc7004 100644
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -58,6 +58,7 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
+              role="menu"
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
diff --git a/packages/hoppscotch-app/components/collections/teams/Request.vue b/packages/hoppscotch-app/components/collections/teams/Request.vue
index c4b2830c8..5ac37e6e1 100644
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Request.vue
@@ -80,6 +80,7 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
+              role="menu"
               @keyup.e="edit.$el.click()"
               @keyup.d="duplicate.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
diff --git a/packages/hoppscotch-app/components/environments/Environment.vue b/packages/hoppscotch-app/components/environments/Environment.vue
index 3a0f2f883..bc309d721 100644
--- a/packages/hoppscotch-app/components/environments/Environment.vue
+++ b/packages/hoppscotch-app/components/environments/Environment.vue
@@ -37,6 +37,7 @@
           ref="tippyActions"
           class="flex flex-col focus:outline-none"
           tabindex="0"
+          role="menu"
           @keyup.e="edit.$el.click()"
           @keyup.d="duplicate.$el.click()"
           @keyup.delete="
diff --git a/packages/hoppscotch-app/components/environments/ImportExport.vue b/packages/hoppscotch-app/components/environments/ImportExport.vue
index 71fbc78e9..4d0dce47a 100644
--- a/packages/hoppscotch-app/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-app/components/environments/ImportExport.vue
@@ -16,44 +16,46 @@
               svg="more-vertical"
             />
           </template>
-          <SmartItem
-            icon="assignment_returned"
-            :label="t('import.from_gist')"
-            @click.native="
-              () => {
-                readEnvironmentGist()
-                options.tippy().hide()
-              }
-            "
-          />
-          <span
-            v-tippy="{ theme: 'tooltip' }"
-            :title="
-              !currentUser
-                ? `${t('export.require_github')}`
-                : currentUser.provider !== 'github.com'
-                ? `${t('export.require_github')}`
-                : undefined
-            "
-          >
+          <div class="flex flex-col" role="menu">
             <SmartItem
-              :disabled="
-                !currentUser
-                  ? true
-                  : currentUser.provider !== 'github.com'
-                  ? true
-                  : false
-              "
-              icon="assignment_turned_in"
-              :label="t('export.create_secret_gist')"
+              icon="assignment_returned"
+              :label="t('import.from_gist')"
               @click.native="
                 () => {
-                  createEnvironmentGist()
+                  readEnvironmentGist()
                   options.tippy().hide()
                 }
               "
             />
-          </span>
+            <span
+              v-tippy="{ theme: 'tooltip' }"
+              :title="
+                !currentUser
+                  ? `${t('export.require_github')}`
+                  : currentUser.provider !== 'github.com'
+                  ? `${t('export.require_github')}`
+                  : undefined
+              "
+            >
+              <SmartItem
+                :disabled="
+                  !currentUser
+                    ? true
+                    : currentUser.provider !== 'github.com'
+                    ? true
+                    : false
+                "
+                icon="assignment_turned_in"
+                :label="t('export.create_secret_gist')"
+                @click.native="
+                  () => {
+                    createEnvironmentGist()
+                    options.tippy().hide()
+                  }
+                "
+              />
+            </span>
+          </div>
         </tippy>
       </span>
     </template>
diff --git a/packages/hoppscotch-app/components/environments/index.vue b/packages/hoppscotch-app/components/environments/index.vue
index e6c0259bd..923b1cb2d 100644
--- a/packages/hoppscotch-app/components/environments/index.vue
+++ b/packages/hoppscotch-app/components/environments/index.vue
@@ -20,31 +20,33 @@
             />
           </span>
         </template>
-        <SmartItem
-          :label="`${$t('environment.no_environment')}`"
-          :info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
-          :active-info-icon="selectedEnvironmentIndex === -1"
-          @click.native="
-            () => {
-              selectedEnvironmentIndex = -1
-              $refs.options.tippy().hide()
-            }
-          "
-        />
-        <hr />
-        <SmartItem
-          v-for="(gen, index) in environments"
-          :key="`gen-${index}`"
-          :label="gen.name"
-          :info-icon="index === selectedEnvironmentIndex ? 'done' : ''"
-          :active-info-icon="index === selectedEnvironmentIndex"
-          @click.native="
-            () => {
-              selectedEnvironmentIndex = index
-              $refs.options.tippy().hide()
-            }
-          "
-        />
+        <div class="flex flex-col" role="menu">
+          <SmartItem
+            :label="`${$t('environment.no_environment')}`"
+            :info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
+            :active-info-icon="selectedEnvironmentIndex === -1"
+            @click.native="
+              () => {
+                selectedEnvironmentIndex = -1
+                $refs.options.tippy().hide()
+              }
+            "
+          />
+          <hr />
+          <SmartItem
+            v-for="(gen, index) in environments"
+            :key="`gen-${index}`"
+            :label="gen.name"
+            :info-icon="index === selectedEnvironmentIndex ? 'done' : ''"
+            :active-info-icon="index === selectedEnvironmentIndex"
+            @click.native="
+              () => {
+                selectedEnvironmentIndex = index
+                $refs.options.tippy().hide()
+              }
+            "
+          />
+        </div>
       </tippy>
       <div class="flex justify-between flex-1 border-b border-dividerLight">
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/http/Authorization.vue b/packages/hoppscotch-app/components/http/Authorization.vue
index 279f26bb4..bda559b7c 100644
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -22,81 +22,83 @@
               />
             </span>
           </template>
-          <SmartItem
-            label="None"
-            :icon="
-              authName === 'None'
-                ? 'radio_button_checked'
-                : 'radio_button_unchecked'
-            "
-            :active="authName === 'None'"
-            @click.native="
-              () => {
-                authType = 'none'
-                authTypeOptions.tippy().hide()
-              }
-            "
-          />
-          <SmartItem
-            label="Basic Auth"
-            :icon="
-              authName === 'Basic Auth'
-                ? 'radio_button_checked'
-                : 'radio_button_unchecked'
-            "
-            :active="authName === 'Basic Auth'"
-            @click.native="
-              () => {
-                authType = 'basic'
-                authTypeOptions.tippy().hide()
-              }
-            "
-          />
-          <SmartItem
-            label="Bearer Token"
-            :icon="
-              authName === 'Bearer'
-                ? 'radio_button_checked'
-                : 'radio_button_unchecked'
-            "
-            :active="authName === 'Bearer'"
-            @click.native="
-              () => {
-                authType = 'bearer'
-                authTypeOptions.tippy().hide()
-              }
-            "
-          />
-          <SmartItem
-            label="OAuth 2.0"
-            :icon="
-              authName === 'OAuth 2.0'
-                ? 'radio_button_checked'
-                : 'radio_button_unchecked'
-            "
-            :active="authName === 'OAuth 2.0'"
-            @click.native="
-              () => {
-                authType = 'oauth-2'
-                authTypeOptions.tippy().hide()
-              }
-            "
-          />
-          <SmartItem
-            label="API key"
-            :icon="
-              authName === 'API key'
-                ? 'radio_button_checked'
-                : 'radio_button_unchecked'
-            "
-            :active="authName === 'API key'"
-            @click.native="
-              () => {
-                authType = 'api-key'
-                authTypeOptions.tippy().hide()
-              }
-            "
-          />
+          <div class="flex flex-col" role="menu">
+            <SmartItem
+              label="None"
+              :icon="
+                authName === 'None'
+                  ? 'radio_button_checked'
+                  : 'radio_button_unchecked'
+              "
+              :active="authName === 'None'"
+              @click.native="
+                () => {
+                  authType = 'none'
+                  authTypeOptions.tippy().hide()
+                }
+              "
+            />
+            <SmartItem
+              label="Basic Auth"
+              :icon="
+                authName === 'Basic Auth'
+                  ? 'radio_button_checked'
+                  : 'radio_button_unchecked'
+              "
+              :active="authName === 'Basic Auth'"
+              @click.native="
+                () => {
+                  authType = 'basic'
+                  authTypeOptions.tippy().hide()
+                }
+              "
+            />
+            <SmartItem
+              label="Bearer Token"
+              :icon="
+                authName === 'Bearer'
+                  ? 'radio_button_checked'
+                  : 'radio_button_unchecked'
+              "
+              :active="authName === 'Bearer'"
+              @click.native="
+                () => {
+                  authType = 'bearer'
+                  authTypeOptions.tippy().hide()
+                }
+              "
+            />
+            <SmartItem
+              label="OAuth 2.0"
+              :icon="
+                authName === 'OAuth 2.0'
+                  ? 'radio_button_checked'
+                  : 'radio_button_unchecked'
+              "
+              :active="authName === 'OAuth 2.0'"
+              @click.native="
+                () => {
+                  authType = 'oauth-2'
+                  authTypeOptions.tippy().hide()
+                }
+              "
+            />
+            <SmartItem
+              label="API key"
+              :icon="
+                authName === 'API key'
+                  ? 'radio_button_checked'
+                  : 'radio_button_unchecked'
+              "
+              :active="authName === 'API key'"
+              @click.native="
+                () => {
+                  authType = 'api-key'
+                  authTypeOptions.tippy().hide()
+                }
+              "
+            />
+          </div>
         </tippy>
       </span>
       <div class="flex">
@@ -204,36 +206,38 @@
                   />
                 </span>
               </template>
-              <SmartItem
-                :icon="
-                  addTo === 'Headers'
-                    ? 'radio_button_checked'
-                    : 'radio_button_unchecked'
-                "
-                :active="addTo === 'Headers'"
-                :label="'Headers'"
-                @click.native="
-                  () => {
-                    addTo = 'Headers'
-                    addToOptions.tippy().hide()
-                  }
-                "
-              />
-              <SmartItem
-                :icon="
-                  addTo === 'Query params'
-                    ? 'radio_button_checked'
-                    : 'radio_button_unchecked'
-                "
-                :active="addTo === 'Query params'"
-                :label="'Query params'"
-                @click.native="
-                  () => {
-                    addTo = 'Query params'
-                    addToOptions.tippy().hide()
-                  }
-                "
-              />
+              <div class="flex flex-col" role="menu">
+                <SmartItem
+                  :icon="
+                    addTo === 'Headers'
+                      ? 'radio_button_checked'
+                      : 'radio_button_unchecked'
+                  "
+                  :active="addTo === 'Headers'"
+                  :label="'Headers'"
+                  @click.native="
+                    () => {
+                      addTo = 'Headers'
+                      addToOptions.tippy().hide()
+                    }
+                  "
+                />
+                <SmartItem
+                  :icon="
+                    addTo === 'Query params'
+                      ? 'radio_button_checked'
+                      : 'radio_button_unchecked'
+                  "
+                  :active="addTo === 'Query params'"
+                  :label="'Query params'"
+                  @click.native="
+                    () => {
+                      addTo = 'Query params'
+                      addToOptions.tippy().hide()
+                    }
+                  "
+                />
+              </div>
             </tippy>
           </div>
         </div>
diff --git a/packages/hoppscotch-app/components/http/Body.vue b/packages/hoppscotch-app/components/http/Body.vue
index 00bae3fd1..2398659dd 100644
--- a/packages/hoppscotch-app/components/http/Body.vue
+++ b/packages/hoppscotch-app/components/http/Body.vue
@@ -22,30 +22,32 @@
               />
             </span>
           </template>
-          <SmartItem
-            :label="$t('state.none').toLowerCase()"
-            :info-icon="contentType === null ? 'done' : ''"
-            :active-info-icon="contentType === null"
-            @click.native="
-              () => {
-                contentType = null
-                $refs.contentTypeOptions.tippy().hide()
-              }
-            "
-          />
-          <SmartItem
-            v-for="(contentTypeItem, index) in validContentTypes"
-            :key="`contentTypeItem-${index}`"
-            :label="contentTypeItem"
-            :info-icon="contentTypeItem === contentType ? 'done' : ''"
-            :active-info-icon="contentTypeItem === contentType"
-            @click.native="
-              () => {
-                contentType = contentTypeItem
-                $refs.contentTypeOptions.tippy().hide()
-              }
-            "
-          />
+          <div class="flex flex-col" role="menu">
+            <SmartItem
+              :label="$t('state.none').toLowerCase()"
+              :info-icon="contentType === null ? 'done' : ''"
+              :active-info-icon="contentType === null"
+              @click.native="
+                () => {
+                  contentType = null
+                  $refs.contentTypeOptions.tippy().hide()
+                }
+              "
+            />
+            <SmartItem
+              v-for="(contentTypeItem, index) in validContentTypes"
+              :key="`contentTypeItem-${index}`"
+              :label="contentTypeItem"
+              :info-icon="contentTypeItem === contentType ? 'done' : ''"
+              :active-info-icon="contentTypeItem === contentType"
+              @click.native="
+                () => {
+                  contentType = contentTypeItem
+                  $refs.contentTypeOptions.tippy().hide()
+                }
+              "
+            />
+          </div>
         </tippy>
       </span>
     </div>
diff --git a/packages/hoppscotch-app/components/http/CodegenModal.vue b/packages/hoppscotch-app/components/http/CodegenModal.vue
index aca7a7531..2940ce0ac 100644
--- a/packages/hoppscotch-app/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-app/components/http/CodegenModal.vue
@@ -31,7 +31,7 @@
                 :placeholder="`${t('action.search')}`"
               />
             </div>
-            <div class="flex flex-col">
+            <div class="flex flex-col" role="menu">
               <SmartItem
                 v-for="codegen in filteredCodegenDefinitions"
                 :key="codegen.name"
diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index 8edbdcf1c..27820d27c 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -26,12 +26,14 @@
                 />
               </span>
             </template>
-            <SmartItem
-              v-for="(method, index) in methods"
-              :key="`method-${index}`"
-              :label="method"
-              @click.native="onSelectMethod(method)"
-            />
+            <div class="flex flex-col" role="menu">
+              <SmartItem
+                v-for="(method, index) in methods"
+                :key="`method-${index}`"
+                :label="method"
+                @click.native="onSelectMethod(method)"
+              />
+            </div>
           </tippy>
         </label>
       </div>
@@ -69,6 +71,7 @@
             ref="sendTippyActions"
             class="flex flex-col focus:outline-none"
             tabindex="0"
+            role="menu"
             @keyup.c="curl.$el.click()"
             @keyup.s="show.$el.click()"
             @keyup.delete="clearAll.$el.click()"
@@ -150,6 +153,7 @@
             ref="saveTippyActions"
             class="flex flex-col focus:outline-none"
             tabindex="0"
+            role="menu"
             @keyup.c="copyRequestAction.$el.click()"
             @keyup.s="saveRequestAction.$el.click()"
             @keyup.escape="saveOptions.tippy().hide()"
diff --git a/packages/hoppscotch-app/components/http/TestResult.vue b/packages/hoppscotch-app/components/http/TestResult.vue
index a8aa8e469..195152114 100644
--- a/packages/hoppscotch-app/components/http/TestResult.vue
+++ b/packages/hoppscotch-app/components/http/TestResult.vue
@@ -37,6 +37,7 @@
               <div
                 v-if="noEnvSelected && !globalHasAdditions"
                 class="flex p-4 bg-error text-secondaryDark"
+                role="alert"
               >
                 <i class="mr-4 material-icons"> warning </i>
                 <div class="flex flex-col">
diff --git a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
index 45a3499a5..7a941f733 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
@@ -51,19 +51,23 @@
           arrow
         >
           <template #trigger>
-            <div v-if="item.kind === 'RootObject'" class="outline">{}</div>
-            <div v-if="item.kind === 'RootArray'" class="outline">[]</div>
-            <div v-if="item.kind === 'ArrayMember'" class="outline">
+            <div v-if="item.kind === 'RootObject'" class="outline-item">{}</div>
+            <div v-if="item.kind === 'RootArray'" class="outline-item">[]</div>
+            <div v-if="item.kind === 'ArrayMember'" class="outline-item">
               {{ item.index }}
             </div>
-            <div v-if="item.kind === 'ObjectMember'" class="outline">
+            <div v-if="item.kind === 'ObjectMember'" class="outline-item">
               {{ item.name }}
             </div>
           </template>
           <div
             v-if="item.kind === 'ArrayMember' || item.kind === 'ObjectMember'"
           >
-            <div v-if="item.kind === 'ArrayMember'" class="flex flex-col">
+            <div
+              v-if="item.kind === 'ArrayMember'"
+              class="flex flex-col"
+              role="menu"
+            >
               <SmartItem
                 v-for="(arrayMember, astIndex) in item.astParent.values"
                 :key="`ast-${astIndex}`"
@@ -76,7 +80,11 @@
                 "
               />
             </div>
-            <div v-if="item.kind === 'ObjectMember'" class="flex flex-col">
+            <div
+              v-if="item.kind === 'ObjectMember'"
+              class="flex flex-col"
+              role="menu"
+            >
               <SmartItem
                 v-for="(objectMember, astIndex) in item.astParent.members"
                 :key="`ast-${astIndex}`"
@@ -90,7 +98,11 @@
               />
             </div>
           </div>
-          <div v-if="item.kind === 'RootObject'" class="flex flex-col">
+          <div
+            v-if="item.kind === 'RootObject'"
+            class="flex flex-col"
+            role="menu"
+          >
             <SmartItem
               label="{}"
               @click.native="
@@ -101,7 +113,11 @@
               "
             />
           </div>
-          <div v-if="item.kind === 'RootArray'" class="flex flex-col">
+          <div
+            v-if="item.kind === 'RootArray'"
+            class="flex flex-col"
+            role="menu"
+          >
             <SmartItem
               label="[]"
               @click.native="
@@ -206,7 +222,7 @@ const outlinePath = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.outline {
+.outline-item {
   @apply cursor-pointer;
   @apply flex-grow-0 flex-shrink-0;
   @apply text-secondaryLight;
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index e21adb52b..0027e56dd 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -43,12 +43,14 @@
                         />
                       </span>
                     </template>
-                    <SmartItem
-                      v-for="(_, version) in socketIoClients"
-                      :key="`client-${version}`"
-                      :label="`Client ${version}`"
-                      @click.native="onSelectVersion(version)"
-                    />
+                    <div class="flex flex-col" role="menu">
+                      <SmartItem
+                        v-for="(_, version) in socketIoClients"
+                        :key="`client-${version}`"
+                        :label="`Client ${version}`"
+                        @click.native="onSelectVersion(version)"
+                      />
+                    </div>
                   </tippy>
                 </label>
                 <input
@@ -109,36 +111,38 @@
                     />
                   </span>
                 </template>
-                <SmartItem
-                  label="None"
-                  :icon="
-                    authType === 'None'
-                      ? 'radio_button_checked'
-                      : 'radio_button_unchecked'
-                  "
-                  :active="authType === 'None'"
-                  @click.native="
-                    () => {
-                      authType = 'None'
-                      authTypeOptions.tippy().hide()
-                    }
-                  "
-                />
-                <SmartItem
-                  label="Bearer Token"
-                  :icon="
-                    authType === 'Bearer'
-                      ? 'radio_button_checked'
-                      : 'radio_button_unchecked'
-                  "
-                  :active="authType === 'Bearer'"
-                  @click.native="
-                    () => {
-                      authType = 'Bearer'
-                      authTypeOptions.tippy().hide()
-                    }
-                  "
-                />
+                <div class="flex flex-col" role="menu">
+                  <SmartItem
+                    label="None"
+                    :icon="
+                      authType === 'None'
+                        ? 'radio_button_checked'
+                        : 'radio_button_unchecked'
+                    "
+                    :active="authType === 'None'"
+                    @click.native="
+                      () => {
+                        authType = 'None'
+                        authTypeOptions.tippy().hide()
+                      }
+                    "
+                  />
+                  <SmartItem
+                    label="Bearer Token"
+                    :icon="
+                      authType === 'Bearer'
+                        ? 'radio_button_checked'
+                        : 'radio_button_unchecked'
+                    "
+                    :active="authType === 'Bearer'"
+                    @click.native="
+                      () => {
+                        authType = 'Bearer'
+                        authTypeOptions.tippy().hide()
+                      }
+                    "
+                  />
+                </div>
               </tippy>
             </span>
             <div class="flex">
diff --git a/packages/hoppscotch-app/components/smart/ChangeLanguage.vue b/packages/hoppscotch-app/components/smart/ChangeLanguage.vue
index 8ad64b3c2..96ba6fb63 100644
--- a/packages/hoppscotch-app/components/smart/ChangeLanguage.vue
+++ b/packages/hoppscotch-app/components/smart/ChangeLanguage.vue
@@ -15,18 +15,20 @@
           />
         </span>
       </template>
-      <NuxtLink
-        v-for="(locale, index) in $i18n.locales"
-        :key="`locale-${index}`"
-        :to="switchLocalePath(locale.code)"
-        @click="language.tippy().hide()"
-      >
-        <SmartItem
-          :label="locale.name"
-          :active-info-icon="$i18n.locale === locale.code"
-          :info-icon="$i18n.locale === locale.code ? 'done' : null"
-        />
-      </NuxtLink>
+      <div class="flex flex-col" role="menu">
+        <NuxtLink
+          v-for="(locale, index) in $i18n.locales"
+          :key="`locale-${index}`"
+          :to="switchLocalePath(locale.code)"
+          @click="language.tippy().hide()"
+        >
+          <SmartItem
+            :label="locale.name"
+            :active-info-icon="$i18n.locale === locale.code"
+            :info-icon="$i18n.locale === locale.code ? 'done' : null"
+          />
+        </NuxtLink>
+      </div>
     </tippy>
   </span>
 </template>
diff --git a/packages/hoppscotch-app/components/smart/Checkbox.vue b/packages/hoppscotch-app/components/smart/Checkbox.vue
index 8e3dc3d6a..630ec9c58 100644
--- a/packages/hoppscotch-app/components/smart/Checkbox.vue
+++ b/packages/hoppscotch-app/components/smart/Checkbox.vue
@@ -1,6 +1,8 @@
 <template>
   <div
     class="inline-flex items-center justify-center cursor-pointer transition flex-nowrap group hover:text-secondaryDark"
+    role="checkbox"
+    :aria-checked="on"
     @click="$emit('change')"
   >
     <input
diff --git a/packages/hoppscotch-app/components/smart/ConfirmModal.vue b/packages/hoppscotch-app/components/smart/ConfirmModal.vue
index 15df052d6..122e0a7c3 100644
--- a/packages/hoppscotch-app/components/smart/ConfirmModal.vue
+++ b/packages/hoppscotch-app/components/smart/ConfirmModal.vue
@@ -3,6 +3,8 @@
     v-if="show"
     dialog
     :title="$t('modal.confirm')"
+    role="dialog"
+    aria-modal="true"
     @close="hideModal"
   >
     <template #body>
diff --git a/packages/hoppscotch-app/components/smart/FontSizePicker.vue b/packages/hoppscotch-app/components/smart/FontSizePicker.vue
index 03b90dd4f..ec6181f76 100644
--- a/packages/hoppscotch-app/components/smart/FontSizePicker.vue
+++ b/packages/hoppscotch-app/components/smart/FontSizePicker.vue
@@ -15,21 +15,23 @@
           />
         </span>
       </template>
-      <SmartItem
-        v-for="(size, index) in fontSizes"
-        :key="`size-${index}`"
-        :label="`${getFontSizeName(size)}`"
-        :icon="
-          size === active ? 'radio_button_checked' : 'radio_button_unchecked'
-        "
-        :active="size === active"
-        @click.native="
-          () => {
-            setActiveFont(size)
-            fontSize.tippy().hide()
-          }
-        "
-      />
+      <div class="flex flex-col" role="menu">
+        <SmartItem
+          v-for="(size, index) in fontSizes"
+          :key="`size-${index}`"
+          :label="`${getFontSizeName(size)}`"
+          :icon="
+            size === active ? 'radio_button_checked' : 'radio_button_unchecked'
+          "
+          :active="size === active"
+          @click.native="
+            () => {
+              setActiveFont(size)
+              fontSize.tippy().hide()
+            }
+          "
+        />
+      </div>
     </tippy>
   </span>
 </template>
diff --git a/packages/hoppscotch-app/components/smart/Item.vue b/packages/hoppscotch-app/components/smart/Item.vue
index e76662af4..35d2ce716 100644
--- a/packages/hoppscotch-app/components/smart/Item.vue
+++ b/packages/hoppscotch-app/components/smart/Item.vue
@@ -16,6 +16,7 @@
     ]"
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
+    role="menuitem"
   >
     <span
       v-if="!loading"
diff --git a/packages/hoppscotch-app/components/smart/Link.js b/packages/hoppscotch-app/components/smart/Link.js
index e4ea35c90..7f90d8487 100644
--- a/packages/hoppscotch-app/components/smart/Link.js
+++ b/packages/hoppscotch-app/components/smart/Link.js
@@ -28,6 +28,7 @@ const SmartLink = {
     switch (tag) {
       case ANCHOR_TAG:
         attrs["aria-label"] = "Link"
+        attrs.role = "link"
 
         // Map `to` prop to the correct attribute
         attrs.href = context.props.to
@@ -56,6 +57,7 @@ const SmartLink = {
 
       default:
         attrs["aria-label"] = "Button"
+        attrs.role = "button"
         break
     }
 
diff --git a/packages/hoppscotch-app/components/smart/Modal.vue b/packages/hoppscotch-app/components/smart/Modal.vue
index 6009711b8..21f6d48fa 100644
--- a/packages/hoppscotch-app/components/smart/Modal.vue
+++ b/packages/hoppscotch-app/components/smart/Modal.vue
@@ -3,6 +3,8 @@
     <div
       ref="modal"
       class="fixed inset-0 z-10 z-50 overflow-y-auto transition hide-scrollbar"
+      role="dialog"
+      aria-modal="true"
     >
       <div
         class="flex items-end justify-center min-h-screen text-center sm:block"
diff --git a/packages/hoppscotch-app/components/smart/Radio.vue b/packages/hoppscotch-app/components/smart/Radio.vue
index 7a65ad62c..226904dc4 100644
--- a/packages/hoppscotch-app/components/smart/Radio.vue
+++ b/packages/hoppscotch-app/components/smart/Radio.vue
@@ -5,6 +5,8 @@
       value === selected ? 'radio_button_checked' : 'radio_button_unchecked'
     "
     :active="value === selected"
+    role="radio"
+    :aria-checked="value === selected"
     @click.native="$emit('change', value)"
   />
 </template>
diff --git a/packages/hoppscotch-app/components/smart/Tabs.vue b/packages/hoppscotch-app/components/smart/Tabs.vue
index bd538f696..ae1ae5cbc 100644
--- a/packages/hoppscotch-app/components/smart/Tabs.vue
+++ b/packages/hoppscotch-app/components/smart/Tabs.vue
@@ -19,6 +19,7 @@
               class="tab"
               :class="[{ active: tab.active }, { vertical: vertical }]"
               :aria-label="tab.label"
+              role="button"
               @keyup.enter="selectTab(tab)"
               @click="selectTab(tab)"
             >
diff --git a/packages/hoppscotch-app/components/teams/Edit.vue b/packages/hoppscotch-app/components/teams/Edit.vue
index d50edee07..3c08559c3 100644
--- a/packages/hoppscotch-app/components/teams/Edit.vue
+++ b/packages/hoppscotch-app/components/teams/Edit.vue
@@ -104,51 +104,53 @@
                       />
                     </span>
                   </template>
-                  <SmartItem
-                    label="OWNER"
-                    :icon="
-                      member.role === 'OWNER'
-                        ? 'radio_button_checked'
-                        : 'radio_button_unchecked'
-                    "
-                    :active="member.role === 'OWNER'"
-                    @click.native="
-                      () => {
-                        updateMemberRole(member.userID, 'OWNER')
-                        memberOptions[index].tippy().hide()
-                      }
-                    "
-                  />
-                  <SmartItem
-                    label="EDITOR"
-                    :icon="
-                      member.role === 'EDITOR'
-                        ? 'radio_button_checked'
-                        : 'radio_button_unchecked'
-                    "
-                    :active="member.role === 'EDITOR'"
-                    @click.native="
-                      () => {
-                        updateMemberRole(member.userID, 'EDITOR')
-                        memberOptions[index].tippy().hide()
-                      }
-                    "
-                  />
-                  <SmartItem
-                    label="VIEWER"
-                    :icon="
-                      member.role === 'VIEWER'
-                        ? 'radio_button_checked'
-                        : 'radio_button_unchecked'
-                    "
-                    :active="member.role === 'VIEWER'"
-                    @click.native="
-                      () => {
-                        updateMemberRole(member.userID, 'VIEWER')
-                        memberOptions[index].tippy().hide()
-                      }
-                    "
-                  />
+                  <div class="flex flex-col" role="menu">
+                    <SmartItem
+                      label="OWNER"
+                      :icon="
+                        member.role === 'OWNER'
+                          ? 'radio_button_checked'
+                          : 'radio_button_unchecked'
+                      "
+                      :active="member.role === 'OWNER'"
+                      @click.native="
+                        () => {
+                          updateMemberRole(member.userID, 'OWNER')
+                          memberOptions[index].tippy().hide()
+                        }
+                      "
+                    />
+                    <SmartItem
+                      label="EDITOR"
+                      :icon="
+                        member.role === 'EDITOR'
+                          ? 'radio_button_checked'
+                          : 'radio_button_unchecked'
+                      "
+                      :active="member.role === 'EDITOR'"
+                      @click.native="
+                        () => {
+                          updateMemberRole(member.userID, 'EDITOR')
+                          memberOptions[index].tippy().hide()
+                        }
+                      "
+                    />
+                    <SmartItem
+                      label="VIEWER"
+                      :icon="
+                        member.role === 'VIEWER'
+                          ? 'radio_button_checked'
+                          : 'radio_button_unchecked'
+                      "
+                      :active="member.role === 'VIEWER'"
+                      @click.native="
+                        () => {
+                          updateMemberRole(member.userID, 'VIEWER')
+                          memberOptions[index].tippy().hide()
+                        }
+                      "
+                    />
+                  </div>
                 </tippy>
               </span>
               <div class="flex">
diff --git a/packages/hoppscotch-app/components/teams/Invite.vue b/packages/hoppscotch-app/components/teams/Invite.vue
index b928d1078..fc5b62905 100644
--- a/packages/hoppscotch-app/components/teams/Invite.vue
+++ b/packages/hoppscotch-app/components/teams/Invite.vue
@@ -160,51 +160,53 @@
                     />
                   </span>
                 </template>
-                <SmartItem
-                  label="OWNER"
-                  :icon="
-                    invitee.value === 'OWNER'
-                      ? 'radio_button_checked'
-                      : 'radio_button_unchecked'
-                  "
-                  :active="invitee.value === 'OWNER'"
-                  @click.native="
-                    () => {
-                      updateNewInviteeRole(index, 'OWNER')
-                      newInviteeOptions[index].tippy().hide()
-                    }
-                  "
-                />
-                <SmartItem
-                  label="EDITOR"
-                  :icon="
-                    invitee.value === 'EDITOR'
-                      ? 'radio_button_checked'
-                      : 'radio_button_unchecked'
-                  "
-                  :active="invitee.value === 'EDITOR'"
-                  @click.native="
-                    () => {
-                      updateNewInviteeRole(index, 'EDITOR')
-                      newInviteeOptions[index].tippy().hide()
-                    }
-                  "
-                />
-                <SmartItem
-                  label="VIEWER"
-                  :icon="
-                    invitee.value === 'VIEWER'
-                      ? 'radio_button_checked'
-                      : 'radio_button_unchecked'
-                  "
-                  :active="invitee.value === 'VIEWER'"
-                  @click.native="
-                    () => {
-                      updateNewInviteeRole(index, 'VIEWER')
-                      newInviteeOptions[index].tippy().hide()
-                    }
-                  "
-                />
+                <div class="flex flex-col" role="menu">
+                  <SmartItem
+                    label="OWNER"
+                    :icon="
+                      invitee.value === 'OWNER'
+                        ? 'radio_button_checked'
+                        : 'radio_button_unchecked'
+                    "
+                    :active="invitee.value === 'OWNER'"
+                    @click.native="
+                      () => {
+                        updateNewInviteeRole(index, 'OWNER')
+                        newInviteeOptions[index].tippy().hide()
+                      }
+                    "
+                  />
+                  <SmartItem
+                    label="EDITOR"
+                    :icon="
+                      invitee.value === 'EDITOR'
+                        ? 'radio_button_checked'
+                        : 'radio_button_unchecked'
+                    "
+                    :active="invitee.value === 'EDITOR'"
+                    @click.native="
+                      () => {
+                        updateNewInviteeRole(index, 'EDITOR')
+                        newInviteeOptions[index].tippy().hide()
+                      }
+                    "
+                  />
+                  <SmartItem
+                    label="VIEWER"
+                    :icon="
+                      invitee.value === 'VIEWER'
+                        ? 'radio_button_checked'
+                        : 'radio_button_unchecked'
+                    "
+                    :active="invitee.value === 'VIEWER'"
+                    @click.native="
+                      () => {
+                        updateNewInviteeRole(index, 'VIEWER')
+                        newInviteeOptions[index].tippy().hide()
+                      }
+                    "
+                  />
+                </div>
               </tippy>
             </span>
             <div class="flex">
diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index c69954286..71f46dcf7 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -86,6 +86,7 @@
             ref="tippyActions"
             class="flex flex-col focus:outline-none"
             tabindex="0"
+            role="menu"
             @keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
             @keyup.x="
               !(team.myRole === 'OWNER' && team.ownersCount == 1)