chore(a11y): improve component roles

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

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

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>

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -1,6 +1,8 @@
 <template>
   <aside class="flex justify-between h-full md:flex-col">
     <nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
+      <ul>
+        <li>
           <NuxtLink
             v-for="(navigation, index) in primaryNavigation"
             :key="`navigation-${index}`"
@@ -19,6 +21,8 @@
               :content="navigation.title"
             />
           </NuxtLink>
+        </li>
+      </ul>
     </nav>
   </aside>
 </template>

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"

packages/hoppscotch-app/components/button/Secondary.vue

@@ -25,6 +25,7 @@
     ]"
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
+    role="button"
   >
     <span
       v-if="!loading"

packages/hoppscotch-app/components/collections/ChooseType.vue

@@ -39,6 +39,7 @@
                 />
               </span>
             </template>
+            <div class="flex flex-col" role="menu">
               <SmartItem
                 v-for="(team, index) in myTeams"
                 :key="`team-${index}`"
@@ -55,6 +56,7 @@
                   }
                 "
               />
+            </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,6 +16,7 @@
               svg="more-vertical"
             />
           </template>
+          <div class="flex flex-col" role="menu">
             <SmartItem
               icon="assignment_returned"
               :label="t('import.from_gist')"
@@ -54,6 +55,7 @@
                 "
               />
             </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()"

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

packages/hoppscotch-app/components/environments/ImportExport.vue

@@ -16,6 +16,7 @@
               svg="more-vertical"
             />
           </template>
+          <div class="flex flex-col" role="menu">
             <SmartItem
               icon="assignment_returned"
               :label="t('import.from_gist')"
@@ -54,6 +55,7 @@
                 "
               />
             </span>
+          </div>
         </tippy>
       </span>
     </template>

packages/hoppscotch-app/components/environments/index.vue

@@ -20,6 +20,7 @@
             />
           </span>
         </template>
+        <div class="flex flex-col" role="menu">
           <SmartItem
             :label="`${$t('environment.no_environment')}`"
             :info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
@@ -45,6 +46,7 @@
               }
             "
           />
+        </div>
       </tippy>
       <div class="flex justify-between flex-1 border-b border-dividerLight">
         <ButtonSecondary

packages/hoppscotch-app/components/http/Authorization.vue

@@ -22,6 +22,7 @@
               />
             </span>
           </template>
+          <div class="flex flex-col" role="menu">
             <SmartItem
               label="None"
               :icon="
@@ -97,6 +98,7 @@
                 }
               "
             />
+          </div>
         </tippy>
       </span>
       <div class="flex">
@@ -204,6 +206,7 @@
                   />
                 </span>
               </template>
+              <div class="flex flex-col" role="menu">
                 <SmartItem
                   :icon="
                     addTo === 'Headers'
@@ -234,6 +237,7 @@
                     }
                   "
                 />
+              </div>
             </tippy>
           </div>
         </div>

packages/hoppscotch-app/components/http/Body.vue

@@ -22,6 +22,7 @@
               />
             </span>
           </template>
+          <div class="flex flex-col" role="menu">
             <SmartItem
               :label="$t('state.none').toLowerCase()"
               :info-icon="contentType === null ? 'done' : ''"
@@ -46,6 +47,7 @@
                 }
               "
             />
+          </div>
         </tippy>
       </span>
     </div>

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"

packages/hoppscotch-app/components/http/Request.vue

@@ -26,12 +26,14 @@
                 />
               </span>
             </template>
+            <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()"

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

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 === 'RootObject'" class="outline-item">{}</div>
-            <div v-if="item.kind === 'RootArray'" class="outline">[]</div>
+            <div v-if="item.kind === 'RootArray'" class="outline-item">[]</div>
-            <div v-if="item.kind === 'ArrayMember'" class="outline">
+            <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;

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -43,12 +43,14 @@
                         />
                       </span>
                     </template>
+                    <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,6 +111,7 @@
                     />
                   </span>
                 </template>
+                <div class="flex flex-col" role="menu">
                   <SmartItem
                     label="None"
                     :icon="
@@ -139,6 +142,7 @@
                       }
                     "
                   />
+                </div>
               </tippy>
             </span>
             <div class="flex">

packages/hoppscotch-app/components/smart/ChangeLanguage.vue

@@ -15,6 +15,7 @@
           />
         </span>
       </template>
+      <div class="flex flex-col" role="menu">
         <NuxtLink
           v-for="(locale, index) in $i18n.locales"
           :key="`locale-${index}`"
@@ -27,6 +28,7 @@
             :info-icon="$i18n.locale === locale.code ? 'done' : null"
           />
         </NuxtLink>
+      </div>
     </tippy>
   </span>
 </template>

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

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>

packages/hoppscotch-app/components/smart/FontSizePicker.vue

@@ -15,6 +15,7 @@
           />
         </span>
       </template>
+      <div class="flex flex-col" role="menu">
         <SmartItem
           v-for="(size, index) in fontSizes"
           :key="`size-${index}`"
@@ -30,6 +31,7 @@
             }
           "
         />
+      </div>
     </tippy>
   </span>
 </template>

packages/hoppscotch-app/components/smart/Item.vue

@@ -16,6 +16,7 @@
     ]"
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
+    role="menuitem"
   >
     <span
       v-if="!loading"

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
     }
 

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"

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>

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

packages/hoppscotch-app/components/teams/Edit.vue

@@ -104,6 +104,7 @@
                       />
                     </span>
                   </template>
+                  <div class="flex flex-col" role="menu">
                     <SmartItem
                       label="OWNER"
                       :icon="
@@ -149,6 +150,7 @@
                         }
                       "
                     />
+                  </div>
                 </tippy>
               </span>
               <div class="flex">

packages/hoppscotch-app/components/teams/Invite.vue

@@ -160,6 +160,7 @@
                     />
                   </span>
                 </template>
+                <div class="flex flex-col" role="menu">
                   <SmartItem
                     label="OWNER"
                     :icon="
@@ -205,6 +206,7 @@
                       }
                     "
                   />
+                </div>
               </tippy>
             </span>
             <div class="flex">

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)