chore(a11y): improve component roles

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>

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

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

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>

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

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

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

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

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

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

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