menu item a11y for disable items

mondaycom · Dec 5, 2024 · d18bc45 · d18bc45
1 parent 17a14fe
commit d18bc45
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/packages/core/src/components/Menu/Menu/utils/utils.ts b/packages/core/src/components/Menu/Menu/utils/utils.ts
@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 import { MenuChild } from "../MenuConstants";
 
 export function isMenuChildSelectable(child: MenuChild): boolean {
-  return !!child.type.isSelectable && !child.props.disabled;
+  return !!child.type.isSelectable;
 }
 
 export const generateMenuItemId = (menuId: string, child: ReactElement, index: number) => {

diff --git a/packages/core/src/components/Menu/MenuItem/MenuItem.tsx b/packages/core/src/components/Menu/MenuItem/MenuItem.tsx
@@ -56,6 +56,8 @@ export interface MenuItemProps extends VibeComponentProps {
   splitMenuItem?: boolean;
   "aria-label"?: AriaAttributes["aria-label"];
   submenuPosition?: SubmenuPosition;
+  tooltipId?: string;
+  shouldShowTooltip?: boolean;
 }
 
 export interface MenuItemTitleComponentProps extends Omit<MenuItemProps, "title"> {
@@ -121,6 +123,7 @@ const MenuItem: VibeComponent<MenuItemProps | MenuItemTitleComponentProps> & {
         content={shouldShowTooltip ? finalTooltipContent : null}
         position={tooltipPosition}
         showDelay={tooltipShowDelay}
+        childId={baseMenuProps.id}
         {...tooltipProps}
       >
         <BaseMenuItem
@@ -130,6 +133,8 @@ const MenuItem: VibeComponent<MenuItemProps | MenuItemTitleComponentProps> & {
           className={className}
           disabled={disabled}
           selected={selected}
+          tooltipId={tooltipProps?.id}
+          shouldShowTooltip={!!shouldShowTooltip}
           {...baseMenuProps}
         >
           {Boolean(icon) && (

diff --git a/packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.tsx b/packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.tsx
@@ -39,7 +39,9 @@ const BaseMenuItem = forwardRef(
       "data-testid": dataTestId,
       splitMenuItem = false,
       children,
-      submenuPosition = "right"
+      submenuPosition = "right",
+      tooltipId,
+      shouldShowTooltip = false
     }: BaseMenuItemProps,
     ref: React.ForwardedRef<HTMLElement>
   ) => {
@@ -122,6 +124,8 @@ const BaseMenuItem = forwardRef(
         type="text2"
         aria-haspopup={subMenu ? true : undefined}
         aria-expanded={subMenu ? shouldShowSubMenu : undefined}
+        aria-disabled={disabled}
+        aria-describedby={shouldShowTooltip ? tooltipId || `${id}-tooltip` : undefined}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_ITEM, index)}
         className={cx(styles.item, className, {
           [styles.disabled]: disabled,

diff --git a/packages/core/src/components/Tooltip/Tooltip.tsx b/packages/core/src/components/Tooltip/Tooltip.tsx
@@ -56,6 +56,7 @@ interface TooltipBaseProps extends VibeComponentProps {
    * how much delay should the Dialog wait until it should trigger the show in MS
    */
   showDelay?: number;
+  childId?: string;
   disableDialogSlide?: boolean;
   animationType?: DialogAnimationType;
   withoutDialog?: boolean;
@@ -174,7 +175,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
   }
 
   renderTooltipContent() {
-    const { theme, content, className, style, title, image, icon } = this.props;
+    const { theme, content, className, style, title, image, icon, id, childId } = this.props;
     if (!content) {
       // don't render empty tooltip
       return null;
@@ -198,7 +199,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
     return (
       <div style={style} className={cx(styles.tooltip, getStyle(styles, camelCase(theme)), className)}>
         {image && <img className={styles.image} src={image} alt="" />}
-        <div className={cx(styles.content)}>
+        <div id={id || `${childId}-tooltip`} className={cx(styles.content)}>
           {title && (
             <Flex gap="xs">
               {icon && <Icon iconSize="20" icon={icon} />}