Add scrollarias to tooltip component

Author: Kubit

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

@@ -1,7 +1,4 @@
-import { PopoverComponentType } from '@/components/popover';
-import { DeviceBreakpointsType } from '@/types';
-
-import { getAriaDescriptorsBy, getHtmlTagForTooltip } from '../utils';
+import { getAriaDescriptorsBy } from '../utils';
 
 describe('getAriaDescriptorsBy utility', () => {
   it('should return both titleId and contentId when title and content are provided', () => {
@@ -44,41 +41,3 @@ describe('getAriaDescriptorsBy utility', () => {
     expect(result).toBeUndefined();
   });
 });
-
-describe('getHtmlTagForTooltip utility', () => {
-  it('should return DIALOG when mediaDevice is DESKTOP and tooltipAsModal is true', () => {
-    const result = getHtmlTagForTooltip({
-      mediaDevice: DeviceBreakpointsType.DESKTOP,
-      tooltipAsModal: true,
-    });
-
-    expect(result).toBe(PopoverComponentType.DIALOG);
-  });
-
-  it('should return undefined when mediaDevice is not DESKTOP', () => {
-    const result = getHtmlTagForTooltip({
-      mediaDevice: DeviceBreakpointsType.MOBILE,
-      tooltipAsModal: true,
-    });
-
-    expect(result).toBeUndefined();
-  });
-
-  it('should return undefined when tooltipAsModal is not true', () => {
-    const result = getHtmlTagForTooltip({
-      mediaDevice: DeviceBreakpointsType.DESKTOP,
-      tooltipAsModal: false,
-    });
-
-    expect(result).toBeUndefined();
-  });
-
-  it('should return undefined when neither condition is met', () => {
-    const result = getHtmlTagForTooltip({
-      mediaDevice: DeviceBreakpointsType.MOBILE,
-      tooltipAsModal: false,
-    });
-
-    expect(result).toBeUndefined();
-  });
-});

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

@@ -1,4 +1,3 @@
 export * from './useTooltip';
 export * from './useTooltipAsModal';
 export * from './useTooltipAsModalAriaLabel';
-export * from './useTooltipContentScroll';

src/components/tooltip/hooks/index.ts

@@ -33,6 +33,9 @@ export const Tooltip: Story = {
     variant: Object.values(variantsObject[themeSelected].TooltipVariantType || {})[0] as string,
     title: { content: 'Tootltip title' },
     content: { content: 'Tooltip content' },
+    contentScrollArias: {
+      'aria-label': 'Tooltip content scroll',
+    },
     children: 'Hover me',
     align: TooltipAlignType.TOP,
     triggerAsButton: {
@@ -49,6 +52,9 @@ export const TooltipSimple: Story = {
     variant: Object.values(variantsObject[themeSelected].TooltipVariantType || {})[0] as string,
     title: { content: 'Tootltip title' },
     content: { content: 'Tooltip content' },
+    contentScrollArias: {
+      'aria-label': 'Tooltip content scroll',
+    },
     children: 'Hover me',
     triggerAsButton: {
       'aria-label': 'Tooltip trigger',

src/components/tooltip/hooks/useTooltipContentScroll.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-import { useMediaDevice } from '@/hooks';
+import { useMediaDevice, useScrollDetectionWithAutoFocus } from '@/hooks';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 
 import { TOOLTIP_STYLES } from './constants';
-import { useTooltipAsModal, useTooltipAsModalAriaLabel, useTooltipContentScroll } from './hooks';
+import { useTooltipAsModal, useTooltipAsModalAriaLabel } from './hooks';
 import { TooltipStandAlone } from './tooltipStandAlone';
 import { ITooltipControlled, TooltipVariantStylesProps } from './types';
 
@@ -25,9 +25,8 @@ const TooltipControlledComponent = <V extends string | unknown>({
     styleTooltipAsModal: styles.tooltipAsModal,
   });
 
-  const { contentHasScroll, contentRefHandler } = useTooltipContentScroll({
-    tooltipRef: innerTooltipRef,
-  });
+  const { hasScroll: contentHasScroll, handleScrollDetection: contentRefHandler } =
+    useScrollDetectionWithAutoFocus({ parentElementRef: innerTooltipRef });
 
   React.useImperativeHandle(tooltipRef, () => {
     return innerTooltipRef.current as HTMLDivElement;

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

@@ -28,7 +28,7 @@ import {
   TooltipTitleStyled,
 } from './tooltip.styled';
 import { ITooltipStandAlone } from './types';
-import { getAriaDescriptorsBy, getHtmlTagForTooltip } from './utils';
+import { getAriaDescriptorsBy } from './utils';
 
 const TooltipStandAlone = ({
   childrenAsButton = true,
@@ -63,15 +63,12 @@ const TooltipStandAlone = ({
   const Tooltip = (
     <TooltipExternalContainerStyled
       ref={props.tooltipRef}
-      aria-label={props.tooltipAriaLabel}
-      aria-labelledby={titleId}
-      as={getHtmlTagForTooltip({
-        mediaDevice: props.mediaDevice,
-        tooltipAsModal: props.tooltipAsModal,
-      })}
+      aria-label={isDesktop ? props.tooltipAriaLabel : undefined}
+      aria-labelledby={isDesktop ? titleId : undefined}
+      aria-modal={isDesktop && props.tooltipAsModal ? true : undefined}
       data-testid={`${props.dataTestId}TooltipContent`}
       id={uniqueId}
-      role={isDesktop && !props.tooltipAsModal ? ROLES.TOOLTIP : undefined}
+      role={isDesktop ? (props.tooltipAsModal ? ROLES.DIALOG : ROLES.TOOLTIP) : undefined}
       styles={props.styles}
       onFocus={props.onTooltipFocus}
       onKeyDown={props.onTooltipKeyDown}
@@ -189,18 +186,19 @@ const TooltipStandAlone = ({
         Tooltip
       ) : (
         <Popover
-          component={!props.tooltipAsModal ? PopoverComponentType.DIV : PopoverComponentType.DIALOG}
+          component={PopoverComponentType.DIV}
           dataTestId={`${props.dataTestId}Popover`}
           focusLastElementFocusedAfterClose={false}
           hasBackDrop={props.styles.showOverlay?.[props.mediaDevice]}
           open={props.popoverOpen}
           positionVariant={PopoverPositionVariantType.ABSOLUTE}
           preventCloseOnClickElements={[props.labelRef?.current]}
-          role={!props.tooltipAsModal ? ROLES.TOOLTIP : undefined}
+          role={props.tooltipAsModal ? ROLES.DIALOG : ROLES.TOOLTIP}
           trapFocusInsideModal={true}
           variant={props.styles.popoverVariant?.[props.mediaDevice]}
           {...props.popover}
           aria-label={props.popover?.['aria-label'] || props.tooltipAriaLabel}
+          aria-labelledby={titleId}
           aria-modal={props.tooltipAsModal || undefined}
           onCloseInternally={props.onPopoverCloseInternally}
         >

src/components/tooltip/tooltipControlled.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 
-import { useMediaDevice, useSwipeDown } from '@/hooks';
+import { useMediaDevice, useScrollDetectionWithAutoFocus, useSwipeDown } from '@/hooks';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { useTrapFocus } from '@/hooks/useTrapFocus/useTrapFocus';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 import { DeviceBreakpointsType } from '@/types';
 import { isKeyEnterPressed } from '@/utils';
 
 import { TOOLTIP_STYLES } from './constants';
-import { useTooltip, useTooltipAsModal, useTooltipContentScroll } from './hooks';
+import { useTooltip, useTooltipAsModal } from './hooks';
 import { TooltipStandAlone } from './tooltipStandAlone';
 import { ITooltipStandAlone, ITooltipUnControlled, TooltipVariantStylesProps } from './types';
 
@@ -49,7 +49,8 @@ const TooltipUnControlledComponent = React.forwardRef(
       ctv,
     });
 
-    const { contentHasScroll, contentRefHandler } = useTooltipContentScroll({ tooltipRef });
+    const { hasScroll: contentHasScroll, handleScrollDetection: contentRefHandler } =
+      useScrollDetectionWithAutoFocus({ parentElementRef: tooltipRef });
 
     // When !tooltipAsModal, in tablet/mobile, onFocus and onClick are executed at the same time
     // So onFocus will open the tooltip, and onClick will close it (because it was opened)
@@ -152,7 +153,7 @@ const TooltipUnControlledComponent = React.forwardRef(
       hideTooltip
     );
 
-    useTrapFocus({ element: tooltipRef, hasFocusTrap: tooltipAsModalValue });
+    useTrapFocus({ ref: tooltipRef, trapFocus: open && tooltipAsModalValue });
 
     // It is used TooltipStandAlone instead of TooltipControlled
     // The reason is that TooltipControlled only provides the styles and mediaDevice props that are used and needed in this component

src/components/tooltip/tooltipStandAlone.tsx

@@ -1,6 +1,3 @@
-import { PopoverComponentType } from '@/components/popover';
-import { DeviceBreakpointsType } from '@/types';
-
 // build descriptive id for aria-describedby or aria-labelledby
 export const getAriaDescriptorsBy = ({
   title,
@@ -25,16 +22,3 @@ export const getAriaDescriptorsBy = ({
   }
   return descriptorsId.join(' ');
 };
-
-export const getHtmlTagForTooltip = ({
-  mediaDevice,
-  tooltipAsModal,
-}: {
-  mediaDevice: DeviceBreakpointsType;
-  tooltipAsModal?: boolean;
-}): PopoverComponentType | undefined => {
-  if (mediaDevice === DeviceBreakpointsType.DESKTOP && tooltipAsModal) {
-    return PopoverComponentType.DIALOG;
-  }
-  return undefined;
-};