chore(a11y): improve component roles

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>

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

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