awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-08 16:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: resolved accessibility issue with menu

Browse Source
This commit is contained in:
=
2025-01-20 22:58:59 +05:30
parent 03debcab5a
commit 338961480c
1 changed files with 28 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/Menu/Menu.tsx
+8 -14
View File
@@ -30,7 +30,7 @@ export const MenuItem = <T extends ElementType = "button">({
className, className,
isDisabled, isDisabled,
isSelected, isSelected,
as: Item = "button", as: Item = "div",
description, description,
// wrapping in forward ref with generic component causes the loss of ts definitions on props // wrapping in forward ref with generic component causes the loss of ts definitions on props
inputRef, inputRef,
@@ -38,22 +38,18 @@ export const MenuItem = <T extends ElementType = "button">({
}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => { }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
const iconRef = useRef<DotLottie | null>(null); const iconRef = useRef<DotLottie | null>(null);
return ( return (
<li <Item
onMouseEnter={() => iconRef.current?.play()} type="button"
onMouseLeave={() => iconRef.current?.stop()} role="menuitem"
className={twMerge( 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", isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
isDisabled && "cursor-not-allowed hover:bg-transparent", isDisabled && "cursor-not-allowed hover:bg-transparent",
className 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} ref={inputRef}
onMouseEnter={() => iconRef.current?.play()}
onMouseLeave={() => iconRef.current?.stop()}
{...props} {...props}
> >
<div <div
@@ -74,10 +70,8 @@ export const MenuItem = <T extends ElementType = "button">({
</div> </div>
)} )}
<span className="flex-grow text-left">{children}</span> <span className="flex-grow text-left">{children}</span>
</Item>
{description && <span className="mt-2 text-xs">{description}</span>} {description && <span className="mt-2 text-xs">{description}</span>}
</motion.span> </Item>
</li>
); );
}; };