Merge pull request #255 from wazeerc/ux/improvements

a11y Improvements

Author: MrSunshyne

packages/frontendmu-nuxt/components/cards/event-card-modern.vue

@@ -26,7 +26,7 @@ const props = defineProps({
 <template>
   <div class="py-2 group">
     <div
-      class="relative rounded-xl flex flex-col md:flex-row p-4 md:p-0 gap-2 group bg-white dark:bg-verse-900/10 dark:border-verse-100/10 group-hover:shadow-lg transition-all duration-300 border-2 border-verse-100 group-hover:border-verse-400 group-hover:scale-105"
+      class="relative rounded-xl flex flex-col md:flex-row p-4 md:p-0 gap-2 group bg-white dark:bg-verse-900/10 dark:border-verse-100/10 group-hover:shadow-lg group-focus-within:shadow-lg transition-all duration-300 border-2 border-verse-100 group-hover:border-verse-400 group-focus-within:border-verse-400 group-hover:scale-105 group-focus-within:scale-105"
     >
       <!-- Date -->
       <div v-if="event.Date" class="">
@@ -44,7 +44,7 @@ const props = defineProps({
 
       <!-- Title -->
       <h3
-        class="leading-2 text-xl font-semibold flex-1 py-2 text-verse-500 dark:text-verse-400 group-hover:text-verse-500 dark:group-hover:text-verse-100"
+        class="leading-2 text-xl font-semibold flex-1 py-2 text-verse-500 dark:text-verse-400 group-hover:text-verse-500 group-focus-within:text-verse-500  dark:group-hover:text-verse-100 dark:group-focus-within:text-verse-100"
       >
         <NuxtLink :href="`/meetup/${event.id}`" class="w-[300px] md:w-96 focus:outline-none">
           <span class="absolute inset-0" aria-hidden="true" />

packages/frontendmu-nuxt/components/site/LeftMenu.vue

@@ -1,63 +1,33 @@
 <script setup lang="ts">
 import { DISCORD_URL, GITHUB_URL, INSTAGRAM_URL, LINKEDIN_URL, TWITTER_URL, WHATSAPP_URL } from '@/constants'
+
+const socialMediaPlatforms: Record<string, string> = {
+  discord: DISCORD_URL,
+  github: GITHUB_URL,
+  whatsapp: WHATSAPP_URL,
+  twitter: TWITTER_URL,
+  instagram: INSTAGRAM_URL,
+  linkedin: LINKEDIN_URL,
+}
 </script>
 
 <template>
-  <nav
-    class="fixed bottom-[50px] gap-4 flex-col pl-4 justify-end w-10 hidden xl:flex z-30"
-  >
-    <a
-      target="_blank"
-      :href="DISCORD_URL"
-      rel="noopener noreferrer nofollow"
-      class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
-    >
-      <IconDiscord class="w-6" />
-    </a>
-
-    <a
-      target="_blank"
-      :href="GITHUB_URL"
-      rel="noopener noreferrer nofollow"
-      class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
-    >
-      <IconGithub class="w-6" />
-    </a>
-
-    <a
-      target="_blank"
-      :href="WHATSAPP_URL"
-      rel="noopener noreferrer nofollow"
-      class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
-    >
-      <IconWhatsappCommunity class="w-6" />
-    </a>
-
-    <a
-      target="_blank"
-      :href="TWITTER_URL"
-      rel="noopener noreferrer nofollow"
-      class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
-    >
-      <IconSocialTwitter class="w-6" />
-    </a>
-
-    <a
-      target="_blank"
-      :href="INSTAGRAM_URL"
-      rel="noopener noreferrer nofollow"
-      class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
-    >
-      <IconInstagram class="w-6" />
-    </a>
-
+  <nav class="fixed bottom-[50px] gap-4 flex-col pl-4 justify-end w-10 hidden xl:flex z-30">
     <a
+      v-for="(url, platform) in socialMediaPlatforms"
+      :key="platform"
+      :href="url"
+      :aria-label="platform"
       target="_blank"
-      :href="LINKEDIN_URL"
       rel="noopener noreferrer nofollow"
       class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
     >
-      <IconLinkedin class="w-6" />
+      <IconDiscord v-if="platform === 'discord'" class="w-6" />
+      <IconGithub v-if="platform === 'github'" class="w-6" />
+      <IconWhatsappCommunity v-if="platform === 'whatsapp'" class="w-6" />
+      <IconSocialTwitter v-if="platform === 'twitter'" class="w-6" />
+      <IconInstagram v-if="platform === 'instagram'" class="w-6" />
+      <IconLinkedin v-if="platform === 'linkedin'" class="w-6" />
     </a>
   </nav>
 </template>

packages/frontendmu-nuxt/components/site/MenuItem.vue

@@ -26,6 +26,7 @@ interface Props {
     links[item].class,
     currentPath.includes(links[item].href) ? 'dark:text-white' : 'text-verse-700 dark:text-verse-300',
   ]"
+    :aria-haspopup="links[item].title === 'About' ? 'true' : undefined"
   >
     <NuxtLink class="flex items-center" :href="links[item].href"
               :target="!!links[item].href.includes(&quot;https&quot;) ? &quot;_blank&quot; : &quot;_self&quot;"
@@ -67,6 +68,7 @@ interface Props {
 .nav-link {
     position: relative;
 
+    &:focus-within,
     &:hover {
 
         .menu-dropdown {