From d10e0c4b4408068e107e48c330928266e4cfe006 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 25 Sep 2023 21:10:00 +0530
Subject: [PATCH] fix: made sidebar links a button for keyboard accessibility

---
 frontend/src/components/AppSidebar.vue  | 27 ++++++++++++-------------
 frontend/src/components/SidebarLink.vue | 12 +++++------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 650ece68..7fc0af60 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -1,19 +1,18 @@
 <template>
   <div
-    class="flex flex-col h-full justify-between transition-all duration-300 ease-in-out"
+    class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out"
     :class="isSidebarCollapsed ? 'w-12' : 'w-56'"
   >
-    <div>
+    <div class="flex flex-col">
       <UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
-      <div v-for="link in links">
-        <SidebarLink
-          :icon="link.icon"
-          :label="link.label"
-          :to="link.to"
-          :isCollapsed="isSidebarCollapsed"
-          class="my-0.5 mx-2"
-        />
-      </div>
+      <SidebarLink
+        v-for="link in links"
+        :icon="link.icon"
+        :label="link.label"
+        :to="link.to"
+        :isCollapsed="isSidebarCollapsed"
+        class="mx-2 my-0.5"
+      />
     </div>
     <SidebarLink
       :label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
@@ -22,7 +21,7 @@
       class="m-2"
     >
       <template #icon>
-        <span class="grid h-5 w-6 place-items-center flex-shrink-0">
+        <span class="grid h-5 w-6 flex-shrink-0 place-items-center">
           <CollapseSidebar
             class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
             :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
@@ -42,7 +41,7 @@ import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
-import { useStorage } from "@vueuse/core";
+import { useStorage } from '@vueuse/core'
 
 const links = [
   {
@@ -72,5 +71,5 @@ const links = [
   },
 ]
 
-const isSidebarCollapsed = useStorage("sidebar_is_collapsed", false);
+const isSidebarCollapsed = useStorage('sidebar_is_collapsed', false)
 </script>
diff --git a/frontend/src/components/SidebarLink.vue b/frontend/src/components/SidebarLink.vue
index b92cadce..0ba25e5d 100644
--- a/frontend/src/components/SidebarLink.vue
+++ b/frontend/src/components/SidebarLink.vue
@@ -1,6 +1,6 @@
 <template>
-  <div
-    class="flex h-7 items-center rounded text-gray-800 cursor-pointer duration-300 ease-in-out"
+  <button
+    class="flex h-7 cursor-pointer items-center rounded text-gray-800 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
     :class="isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100'"
     @click="handleClick"
   >
@@ -10,7 +10,7 @@
     >
       <Tooltip :text="label" placement="right">
         <slot name="icon">
-          <span class="grid h-5 w-6 place-items-center flex-shrink-0">
+          <span class="grid h-5 w-6 flex-shrink-0 place-items-center">
             <component :is="icon" class="h-4.5 w-4.5 text-gray-700" />
           </span>
         </slot>
@@ -19,14 +19,14 @@
         class="flex-shrink-0 text-base duration-300 ease-in-out"
         :class="
           isCollapsed
-            ? 'opacity-0 ml-0 w-0 overflow-hidden'
-            : 'opacity-100 ml-2 w-auto'
+            ? 'ml-0 w-0 overflow-hidden opacity-0'
+            : 'ml-2 w-auto opacity-100'
         "
       >
         {{ label }}
       </span>
     </div>
-  </div>
+  </button>
 </template>
 
 <script setup>