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