Implement useTooltipAsModalAriaLabel Hook for Enhanced Accessibility in Tooltip Component

This commit introduces the useTooltipAsModalAriaLabel hook to improve accessibility within the Tooltip component, specifically when tooltips are utilized as modals. The hook dynamically assigns the aria-label attribute by extracting the inner text of a referenced HTML element. This enhancement is demonstrated in the updated Tooltip story and is integrated across controlled and standalone tooltip variants. Additionally, the ITooltipStandAlone and ITooltipControlled interfaces are expanded to include the new tooltipAriaLabel property. Comprehensive tests for the new hook validate its functionality, ensuring the tooltip's accessibility compliance when acting as a modal.

Author: Kubit

src/components/tooltip/__tests__/tooltip.test.tsx

@@ -466,4 +466,16 @@ describe('Tooltip', () => {
     expect(title).toBeVisible();
     expect(content).toBeVisible();
   });
+
+  it('Tooltip as modal - it should have the external aria-label when it set', () => {
+    const externalArialLabel = 'external aria label';
+    renderProvider(<Tooltip {...mockProps} tooltipAsModal tooltipAriaLabel={externalArialLabel} />);
+    const label = screen.getByText(mockProps.children as string);
+
+    fireEvent.keyDown(label, ENTER);
+
+    const tooltip = screen.getByLabelText(externalArialLabel);
+
+    expect(tooltip).toBeInTheDocument();
+  });
 });

src/components/tooltip/__tests__/useTooltipAsModalAriaLabel.test.ts

@@ -0,0 +1,24 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useTooltipAsModalAriaLabel } from '../hooks/useTooltipAsModalAriaLabel';
+
+describe('useTooltipAsModalAriaLabel', () => {
+  it('should return the inner text of the ref', () => {
+    const ref = {
+      current: document.createElement('div'),
+    };
+    ref.current.innerText = 'Test text';
+
+    const { result } = renderHook(() => useTooltipAsModalAriaLabel(ref));
+    expect(result.current).toEqual('Test text');
+  });
+
+  it('should return undefined if the ref is null', () => {
+    const ref = {
+      current: null,
+    };
+
+    const { result } = renderHook(() => useTooltipAsModalAriaLabel(ref));
+    expect(result.current).toBeUndefined();
+  });
+});

src/components/tooltip/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useTooltip';
+export * from './useTooltipAsModalAriaLabel';

src/components/tooltip/hooks/useTooltipAsModalAriaLabel.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+
+export const useTooltipAsModalAriaLabel = (
+  ref: React.RefObject<HTMLDivElement>
+): string | undefined => {
+  const [ariaLabel, setArialabel] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    setArialabel(ref.current.innerText);
+  });
+
+  return ariaLabel;
+};

src/components/tooltip/stories/argtypes.ts

@@ -103,6 +103,17 @@ export const argtypes = (
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    tooltipAriaLabel: {
+      description: 'Aria label for the tooltip when is modal',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     popover: {
       description: 'Object with popover properties',
       type: { name: 'object' },

src/components/tooltip/stories/tooltip.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import { ICONS } from '@/assets';
 import { STYLES_NAME } from '@/constants';
@@ -32,7 +33,14 @@ export const Tooltip: Story = {
   args: {
     variant: Object.values(variantsObject[themeSelected].TooltipVariantType || {})[0] as string,
     title: { content: 'Tootltip title' },
-    content: { content: 'Tooltip content' },
+    content: {
+      content: (
+        <div style={{ color: '#fff' }}>
+          <div>content first line</div>
+          <div>content second line</div>
+        </div>
+      ),
+    },
     children: 'Hover me',
     align: TooltipAlignType.TOP,
     closeIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'Close icon' },

src/components/tooltip/tooltipControlled.tsx

@@ -5,27 +5,38 @@ import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 
 import { TOOLTIP_STYLES } from './constants';
+import { useTooltipAsModalAriaLabel } from './hooks/useTooltipAsModalAriaLabel';
 import { TooltipStandAlone } from './tooltipStandAlone';
 import { ITooltipControlled, TooltipVariantStylesProps } from './types';
 import { useTooltipAsModal } from './utils';
 
 const TooltipControlledComponent = <V extends string | unknown>({
   tooltipAsModal,
   ctv,
+  tooltipRef,
+  tooltipAriaLabel,
   ...props
 }: ITooltipControlled<V>): JSX.Element => {
   const styles = useStyles<TooltipVariantStylesProps, V>(TOOLTIP_STYLES, props.variant, ctv);
   const mediaDevice = useMediaDevice();
+  const innerTooltipRef = React.useRef<HTMLDivElement>(null);
+  const helpAriaLabel = useTooltipAsModalAriaLabel(innerTooltipRef);
+
+  React.useImperativeHandle(tooltipRef, () => {
+    return innerTooltipRef.current as HTMLDivElement;
+  }, []);
 
   return (
     <TooltipStandAlone
       {...props}
       mediaDevice={mediaDevice}
       styles={styles}
+      tooltipAriaLabel={tooltipAriaLabel ?? helpAriaLabel}
       tooltipAsModal={useTooltipAsModal({
         propTooltipAsModal: tooltipAsModal,
         styleTooltipAsModal: styles.tooltipAsModal,
       })}
+      tooltipRef={innerTooltipRef}
     />
   );
 };

src/components/tooltip/tooltipStandAlone.tsx

@@ -58,7 +58,7 @@ const TooltipStandAlone = ({
   const Tooltip = (
     <TooltipExternalContainerStyled
       ref={props.tooltipRef}
-      aria-labelledby={props.tooltipAsModal ? ariaDescriptorsBy : undefined}
+      aria-label={props.tooltipAsModal ? props.tooltipAriaLabel : undefined}
       as={getHtmlTagForTooltip({
         mediaDevice: props.mediaDevice,
         tooltipAsModal: props.tooltipAsModal,

src/components/tooltip/tooltipUnControlled.tsx

@@ -9,13 +9,22 @@ import { trapFocus } from '@/utils/focusHandlers/focusHandlers';
 
 import { TOOLTIP_STYLES } from './constants';
 import { useTooltip } from './hooks';
+import { useTooltipAsModalAriaLabel } from './hooks/useTooltipAsModalAriaLabel';
 import { TooltipStandAlone } from './tooltipStandAlone';
 import { ITooltipStandAlone, ITooltipUnControlled, TooltipVariantStylesProps } from './types';
 import { useTooltipAsModal } from './utils';
 
 const TooltipUnControlledComponent = React.forwardRef(
   <V extends string | unknown>(
-    { ctv, tooltipAsModal, align, onOpenClose, variant, ...props }: ITooltipUnControlled<V>,
+    {
+      ctv,
+      tooltipAsModal,
+      align,
+      onOpenClose,
+      variant,
+      tooltipAriaLabel,
+      ...props
+    }: ITooltipUnControlled<V>,
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
     const styles = useStyles<TooltipVariantStylesProps, V>(TOOLTIP_STYLES, variant, ctv);
@@ -24,18 +33,16 @@ const TooltipUnControlledComponent = React.forwardRef(
     const labelRef = React.useRef<HTMLDivElement>(null);
     const tooltipRef = React.useRef<HTMLDivElement>(null);
 
+    const helpAriaLabel = useTooltipAsModalAriaLabel(tooltipRef);
+
     const tooltipAsModalValue = useTooltipAsModal({
       propTooltipAsModal: tooltipAsModal,
       styleTooltipAsModal: styles.tooltipAsModal,
     });
 
-    React.useImperativeHandle(
-      ref,
-      () => {
-        return labelRef.current as HTMLDivElement;
-      },
-      []
-    );
+    React.useImperativeHandle(ref, () => {
+      return labelRef.current as HTMLDivElement;
+    }, []);
 
     const { showTooltip, hideTooltip, allowFocusOpenTooltip, open } = useTooltip<V>({
       labelRef,
@@ -144,6 +151,7 @@ const TooltipUnControlledComponent = React.forwardRef(
         mediaDevice={mediaDevice}
         popoverOpen={open}
         styles={styles}
+        tooltipAriaLabel={tooltipAriaLabel ?? helpAriaLabel}
         tooltipAsModal={tooltipAsModalValue}
         tooltipRef={tooltipRef}
         onBlur={handleBlur}

src/components/tooltip/types/tooltip.ts

@@ -55,6 +55,7 @@ export interface ITooltipStandAlone {
   onTooltipKeyDown?: React.KeyboardEventHandler<HTMLElement>;
   popover?: TooltipPopoverType;
   dragIcon?: IElementOrIcon;
+  tooltipAriaLabel?: string;
 }
 
 /**