chore(a11y): improve component roles

2022-03-01 12:11:53 +05:30
parent b3d0d4d86b
commit 9bd55b6db5
39 changed files with 498 additions and 420 deletions
--- 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>