fix(web): Improve SidebarItem tap target accessibility (#409)

hoarder-app · Sep 29, 2024 · 8fe1927 · 8fe1927
1 parent 36fb5a4
commit 8fe1927
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/apps/web/components/dashboard/sidebar/AllLists.tsx b/apps/web/components/dashboard/sidebar/AllLists.tsx
@@ -39,19 +39,19 @@ export default function AllLists({
         logo={<span className="text-lg">📋</span>}
         name="All Lists"
         path={`/dashboard/lists`}
-        className="py-0.5"
+        linkClassName="py-0.5"
       />
       <SidebarItem
         logo={<span className="text-lg">⭐️</span>}
         name="Favourites"
         path={`/dashboard/favourites`}
-        className="py-0.5"
+        linkClassName="py-0.5"
       />
       <SidebarItem
         logo={<span className="text-lg">🗄️</span>}
         name="Archive"
         path={`/dashboard/archive`}
-        className="py-0.5"
+        linkClassName="py-0.5"
       />
 
       {
@@ -86,7 +86,7 @@ export default function AllLists({
                   </Button>
                 </ListOptions>
               }
-              className="group py-0.5"
+              linkClassName="group py-0.5"
               style={{ marginLeft: `${level * 1}rem` }}
             />
           )}

diff --git a/apps/web/components/dashboard/sidebar/SidebarItem.tsx b/apps/web/components/dashboard/sidebar/SidebarItem.tsx
@@ -10,6 +10,7 @@ export default function SidebarItem({
   logo,
   path,
   className,
+  linkClassName,
   style,
   collapseButton,
   right = null,
@@ -19,27 +20,36 @@ export default function SidebarItem({
   path: string;
   style?: React.CSSProperties;
   className?: string;
+  linkClassName?: string;
   right?: React.ReactNode;
   collapseButton?: React.ReactNode;
 }) {
   const currentPath = usePathname();
   return (
     <li
       className={cn(
-        "relative rounded-lg px-3 py-2 hover:bg-accent",
+        "relative rounded-lg hover:bg-accent",
         path == currentPath ? "bg-accent/50" : "",
         className,
       )}
       style={style}
     >
       {collapseButton}
-      <div className="flex justify-between">
-        <Link href={path} className="flex w-full gap-x-2">
-          {logo}
-          <span className="my-auto"> {name} </span>
-        </Link>
-        {right}
-      </div>
+      <Link
+        href={path}
+        className={cn(
+          "flex w-full items-center rounded-[inherit] px-3 py-2",
+          linkClassName,
+        )}
+      >
+        <div className="flex w-full justify-between">
+          <div className="flex items-center gap-x-2">
+            {logo}
+            <span>{name}</span>
+          </div>
+          {right}
+        </div>
+      </Link>
     </li>
   );
 }