From 338961480c687ea7892b14a7f05fe15a08cd27ef Mon Sep 17 00:00:00 2001
From: = <akhilmhdh@gmail.com>
Date: Tue, 14 Jan 2025 21:46:17 +0530
Subject: [PATCH] feat: resolved accessibility issue with menu

---
 frontend/src/components/v2/Menu/Menu.tsx | 62 +++++++++++-------------
 1 file changed, 28 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/v2/Menu/Menu.tsx b/frontend/src/components/v2/Menu/Menu.tsx
index 29076af18..ea9643eb0 100644
--- a/frontend/src/components/v2/Menu/Menu.tsx
+++ b/frontend/src/components/v2/Menu/Menu.tsx
@@ -30,7 +30,7 @@ export const MenuItem = <T extends ElementType = "button">({
   className,
   isDisabled,
   isSelected,
-  as: Item = "button",
+  as: Item = "div",
   description,
   // wrapping in forward ref with generic component causes the loss of ts definitions on props
   inputRef,
@@ -38,46 +38,40 @@ export const MenuItem = <T extends ElementType = "button">({
 }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
   const iconRef = useRef<DotLottie | null>(null);
   return (
-    <li
-      onMouseEnter={() => iconRef.current?.play()}
-      onMouseLeave={() => iconRef.current?.stop()}
+    <Item
+      type="button"
+      role="menuitem"
       className={twMerge(
-        "duration-50 group mt-0.5 flex cursor-pointer flex-col rounded px-1 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
+        "duration-50 group relative mt-0.5 flex w-full cursor-pointer items-center rounded px-1 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
         isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
         isDisabled && "cursor-not-allowed hover:bg-transparent",
         className
       )}
+      ref={inputRef}
+      onMouseEnter={() => iconRef.current?.play()}
+      onMouseLeave={() => iconRef.current?.stop()}
+      {...props}
     >
-      <motion.span className="flex w-full flex-row items-center justify-start rounded-sm">
-        <Item
-          type="button"
-          role="menuitem"
-          className="relative flex items-center"
-          ref={inputRef}
-          {...props}
-        >
-          <div
-            className={`${
-              isSelected ? "visisble" : "invisible"
-            } absolute -left-[0.28rem] h-5 w-[0.07rem] rounded-md bg-primary`}
+      <div
+        className={`${
+          isSelected ? "visisble" : "invisible"
+        } absolute -left-[0.28rem] h-5 w-[0.07rem] rounded-md bg-primary`}
+      />
+      {icon && (
+        <div style={{ width: "22px", height: "22px" }} className="my-auto ml-1 mr-3">
+          <DotLottieReact
+            dotLottieRefCallback={(el) => {
+              iconRef.current = el;
+            }}
+            src={`/lotties/${icon}.json`}
+            loop
+            className="h-full w-full"
           />
-          {icon && (
-            <div style={{ width: "22px", height: "22px" }} className="my-auto ml-1 mr-3">
-              <DotLottieReact
-                dotLottieRefCallback={(el) => {
-                  iconRef.current = el;
-                }}
-                src={`/lotties/${icon}.json`}
-                loop
-                className="h-full w-full"
-              />
-            </div>
-          )}
-          <span className="flex-grow text-left">{children}</span>
-        </Item>
-        {description && <span className="mt-2 text-xs">{description}</span>}
-      </motion.span>
-    </li>
+        </div>
+      )}
+      <span className="flex-grow text-left">{children}</span>
+      {description && <span className="mt-2 text-xs">{description}</span>}
+    </Item>
   );
 };