awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-06 13:27:22 +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
+28 -34
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,46 +38,40 @@ 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
)} )}
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"> <div
<Item className={`${
type="button" isSelected ? "visisble" : "invisible"
role="menuitem" } absolute -left-[0.28rem] h-5 w-[0.07rem] rounded-md bg-primary`}
className="relative flex items-center" />
ref={inputRef} {icon && (
{...props} <div style={{ width: "22px", height: "22px" }} className="my-auto ml-1 mr-3">
> <DotLottieReact
<div dotLottieRefCallback={(el) => {
className={`${ iconRef.current = el;
isSelected ? "visisble" : "invisible" }}
} absolute -left-[0.28rem] h-5 w-[0.07rem] rounded-md bg-primary`} src={`/lotties/${icon}.json`}
loop
className="h-full w-full"
/> />
{icon && ( </div>
<div style={{ width: "22px", height: "22px" }} className="my-auto ml-1 mr-3"> )}
<DotLottieReact <span className="flex-grow text-left">{children}</span>
dotLottieRefCallback={(el) => { {description && <span className="mt-2 text-xs">{description}</span>}
iconRef.current = el; </Item>
}}
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>
); );
}; };