feat: resolved accessibility issue with menu

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,22 +38,18 @@ 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
       )}
-    >
-      <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}
+      onMouseEnter={() => iconRef.current?.play()}
+      onMouseLeave={() => iconRef.current?.stop()}
       {...props}
     >
       <div
@@ -74,10 +70,8 @@ export const MenuItem = <T extends ElementType = "button">({
         </div>
       )}
       <span className="flex-grow text-left">{children}</span>
-        </Item>
       {description && <span className="mt-2 text-xs">{description}</span>}
-      </motion.span>
-    </li>
+    </Item>
   );
 };