From 6e6401fbed4653e6b1921a0953bcd0b6f1afe4c6 Mon Sep 17 00:00:00 2001
From: Wazeer <58399263+wazeerc@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:33:30 +0400
Subject: [PATCH 1/4] fix(a11y): expand About menu on KB focus

---
 packages/frontendmu-nuxt/components/site/MenuItem.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/frontendmu-nuxt/components/site/MenuItem.vue b/packages/frontendmu-nuxt/components/site/MenuItem.vue
index f6add80e..560937c2 100644
--- a/packages/frontendmu-nuxt/components/site/MenuItem.vue
+++ b/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 {

From f0325b4024c0714f90d26594755e6077be06c988 Mon Sep 17 00:00:00 2001
From: Wazeer <58399263+wazeerc@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:38:27 +0400
Subject: [PATCH 2/4] fix(a11y): add aria-labels to social media links

---
 packages/frontendmu-nuxt/components/site/LeftMenu.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/frontendmu-nuxt/components/site/LeftMenu.vue b/packages/frontendmu-nuxt/components/site/LeftMenu.vue
index 6533fddb..6123bc0c 100644
--- a/packages/frontendmu-nuxt/components/site/LeftMenu.vue
+++ b/packages/frontendmu-nuxt/components/site/LeftMenu.vue
@@ -7,6 +7,7 @@ import { DISCORD_URL, GITHUB_URL, INSTAGRAM_URL, LINKEDIN_URL, TWITTER_URL, WHAT
     class="fixed bottom-[50px] gap-4 flex-col pl-4 justify-end w-10 hidden xl:flex z-30"
   >
     <a
+      aria-label="Discord"
       target="_blank"
       :href="DISCORD_URL"
       rel="noopener noreferrer nofollow"
@@ -16,6 +17,7 @@ import { DISCORD_URL, GITHUB_URL, INSTAGRAM_URL, LINKEDIN_URL, TWITTER_URL, WHAT
     </a>
 
     <a
+      aria-label="Github"
       target="_blank"
       :href="GITHUB_URL"
       rel="noopener noreferrer nofollow"
@@ -25,6 +27,7 @@ import { DISCORD_URL, GITHUB_URL, INSTAGRAM_URL, LINKEDIN_URL, TWITTER_URL, WHAT
     </a>
 
     <a
+      aria-label="Whatsapp"
       target="_blank"
       :href="WHATSAPP_URL"
       rel="noopener noreferrer nofollow"
@@ -34,6 +37,7 @@ import { DISCORD_URL, GITHUB_URL, INSTAGRAM_URL, LINKEDIN_URL, TWITTER_URL, WHAT
     </a>
 
     <a
+      aria-label="Twitter"
       target="_blank"
       :href="TWITTER_URL"
       rel="noopener noreferrer nofollow"
@@ -43,6 +47,7 @@ import { DISCORD_URL, GITHUB_URL, INSTAGRAM_URL, LINKEDIN_URL, TWITTER_URL, WHAT
     </a>
 
     <a
+      aria-label="Instagram"
       target="_blank"
       :href="INSTAGRAM_URL"
       rel="noopener noreferrer nofollow"
@@ -52,6 +57,7 @@ import { DISCORD_URL, GITHUB_URL, INSTAGRAM_URL, LINKEDIN_URL, TWITTER_URL, WHAT
     </a>
 
     <a
+      aria-label="LinkedIn"
       target="_blank"
       :href="LINKEDIN_URL"
       rel="noopener noreferrer nofollow"

From 49e080c57e0875327ab6c0cbdad45f88e93ec861 Mon Sep 17 00:00:00 2001
From: Wazeer <58399263+wazeerc@users.noreply.github.com>
Date: Tue, 26 Nov 2024 19:22:42 +0400
Subject: [PATCH 3/4] refactor: reduce code repetition

---
 .../components/site/LeftMenu.vue              | 76 +++++--------------
 1 file changed, 20 insertions(+), 56 deletions(-)

diff --git a/packages/frontendmu-nuxt/components/site/LeftMenu.vue b/packages/frontendmu-nuxt/components/site/LeftMenu.vue
index 6123bc0c..51c7bee5 100644
--- a/packages/frontendmu-nuxt/components/site/LeftMenu.vue
+++ b/packages/frontendmu-nuxt/components/site/LeftMenu.vue
@@ -1,69 +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
-      aria-label="Discord"
-      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
-      aria-label="Github"
-      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
-      aria-label="Whatsapp"
-      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
-      aria-label="Twitter"
-      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
-      aria-label="Instagram"
-      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
-      aria-label="LinkedIn"
+      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>

From e8961f72c53a5e24b13f0d530aacc9cb51745a54 Mon Sep 17 00:00:00 2001
From: Wazeer <58399263+wazeerc@users.noreply.github.com>
Date: Tue, 26 Nov 2024 20:02:25 +0400
Subject: [PATCH 4/4] fix(a11y): add focus effects

---
 .../frontendmu-nuxt/components/cards/event-card-modern.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontendmu-nuxt/components/cards/event-card-modern.vue b/packages/frontendmu-nuxt/components/cards/event-card-modern.vue
index 0880524e..43056f7c 100644
--- a/packages/frontendmu-nuxt/components/cards/event-card-modern.vue
+++ b/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" />