Improve modalv2 with arias and accesibility props

Author: Kubit

src/components/modal/hooks/__tests__/modal.useChangeDimension.test.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
 
 import { STYLES_NAME } from '@/constants';
-import { useMediaDevice, useScrollEffect, useStyles, useSwipeDown, useZoomEffect } from '@/hooks';
+import {
+  useMediaDevice,
+  useScrollDetectionWithAutoFocus,
+  useScrollEffect,
+  useStyles,
+  useSwipeDown,
+  useZoomEffect,
+} from '@/hooks';
 import { ErrorBoundary } from '@/provider/errorBoundary/errorBoundary';
 import { FallbackComponent } from '@/provider/errorBoundary/fallbackComponent';
 import { DeviceBreakpointsType } from '@/types';
@@ -26,23 +33,64 @@ const ModalControlledComponent = React.forwardRef(
   ): JSX.Element => {
     const styles = useStyles<ModalBaseStylesType, V>(STYLES_NAME.MODAL, variant, ctv);
     const device = useMediaDevice();
+    const innerRef = React.useRef<HTMLDivElement | null>(null);
 
-    const conditional = React.useMemo(
+    const handleInnerRef = React.useCallback(node => {
+      innerRef.current = node;
+      const modalHeader = innerRef.current?.querySelector('[data-modal-header]') as
+        | HTMLElement
+        | null
+        | undefined;
+      const modalContent = innerRef.current?.querySelector('[data-modal-content]') as
+        | HTMLElement
+        | null
+        | undefined;
+      const modalDraggableIcon = innerRef.current?.querySelector('[data-modal-draggable-icon]') as
+        | HTMLElement
+        | null
+        | undefined;
+      const modalIllustration = innerRef.current?.querySelector(
+        '[data-modal-ilustration-container]'
+      )?.firstElementChild as HTMLElement | null | undefined;
+
+      handleModalZoomEffect(innerRef.current);
+      handleHeaderShadowEffect(modalHeader);
+      handleContentScrollEffect(modalContent);
+      handleIllustrationResizeEffect(modalIllustration);
+      handleContentZoomEffect(modalContent);
+      handleContentScrollDetection(modalContent);
+      handleDraggableIconSwipeDown(modalDraggableIcon);
+    }, []);
+
+    React.useImperativeHandle(ref, () => {
+      return innerRef?.current as HTMLDivElement;
+    }, []);
+
+    const isTabletOrMobile = React.useMemo(
       () =>
         device !== DeviceBreakpointsType.DESKTOP && device !== DeviceBreakpointsType.LARGE_DESKTOP,
       [device]
     );
-    const { scrollableRef, resizeRef, shadowRef } = useScrollEffect({
-      conditional,
+
+    const {
+      scrollableRef: handleContentScrollEffect,
+      resizeRef: handleIllustrationResizeEffect,
+      shadowRef: handleHeaderShadowEffect,
+    } = useScrollEffect({
+      conditional: isTabletOrMobile,
       shadowStyles: styles.headerContainer?.box_shadow,
     });
 
-    const zoomRef = useZoomEffect(CONTAINER_STYLES_EDIT, MAX_ZOOM);
-    const zoomRefChild = useZoomEffect(CONTENT_STYLES_EDIT, MAX_ZOOM);
+    const handleModalZoomEffect = useZoomEffect(CONTAINER_STYLES_EDIT, MAX_ZOOM);
+    const handleContentZoomEffect = useZoomEffect(CONTENT_STYLES_EDIT, MAX_ZOOM);
 
-    const { setPopoverRef, setDragIconRef } = useSwipeDown(props.popover?.animationOptions, () =>
-      props.onClose?.()
-    );
+    const { setPopoverRef: handlePopoverSwipeDown, setDragIconRef: handleDraggableIconSwipeDown } =
+      useSwipeDown(props.popover?.animationOptions, () => props.onClose?.());
+
+    const { hasScroll: contentHasScroll, handleScrollDetection: handleContentScrollDetection } =
+      useScrollDetectionWithAutoFocus({
+        parentElementRef: innerRef,
+      });
 
     const handlePopoverCloseInternally = () => {
       props.popover?.onCloseInternally?.();
@@ -52,16 +100,11 @@ const ModalControlledComponent = React.forwardRef(
     const modalStructure = (
       <ModalStandAlone
         {...props}
-        ref={ref}
+        ref={handleInnerRef}
+        contentHasScroll={contentHasScroll}
         device={device}
-        dragIconRef={setDragIconRef}
-        popover={{ ...props.popover, forwardedRef: setPopoverRef }}
-        resizeRef={resizeRef}
-        scrollableRef={scrollableRef}
-        shadowRef={shadowRef}
+        popover={{ ...props.popover, forwardedRef: handlePopoverSwipeDown }}
         styles={styles}
-        zoomRef={zoomRef}
-        zoomRefChild={zoomRefChild}
         onPopoverCloseInternally={handlePopoverCloseInternally}
       />
     );

src/components/modal/hooks/index.ts

@@ -9,7 +9,7 @@ import { PopoverComponentType, PopoverPositionVariantType } from '@/components/p
 import { Text } from '@/components/text/text';
 import { TextComponentType } from '@/components/text/types/component';
 import { useId } from '@/hooks';
-import { DeviceBreakpointsType } from '@/types';
+import { DeviceBreakpointsType, ROLES } from '@/types';
 
 import {
   DraggableIcon,
@@ -26,11 +26,6 @@ import { IModalStandAlone } from './types';
 const ModalStandAloneComponent = (
   {
     dataTestId = 'modalDataTestId',
-    scrollableRef,
-    resizeRef,
-    shadowRef,
-    zoomRef,
-    zoomRefChild,
     customHeightAllDevices = false,
     customWidthAllDevices = false,
     ...props
@@ -41,19 +36,16 @@ const ModalStandAloneComponent = (
   const modalId = props.id ?? uniqueModalId;
   const uniqueTitleId = useId('modal-title');
   const titleIdFinal = props.title?.id ?? uniqueTitleId;
-  const modalRef = React.useRef<HTMLDivElement | null>(null);
-
-  React.useImperativeHandle(ref, () => {
-    zoomRef(modalRef.current);
-    return modalRef.current as HTMLDivElement;
-  });
 
   const buildIconOrIllustration = () => {
     if (props.imageIllustrationHeader?.illustration) {
       return (
-        <ModalImageStyled $styles={props.styles} data-testid={`${dataTestId}ImageHeader`}>
+        <ModalImageStyled
+          data-modal-ilustration-container
+          $styles={props.styles}
+          data-testid={`${dataTestId}ImageHeader`}
+        >
           <ElementOrIllustration
-            ref={resizeRef}
             customIllustrationStyles={props.styles.imageIllustrationHeader}
             data-testid={`${dataTestId}ImageHeader`}
             {...props.imageIllustrationHeader}
@@ -88,19 +80,20 @@ const ModalStandAloneComponent = (
       aria-labelledby={titleIdFinal}
       aria-modal={props.open}
       clickOverlayClose={!props.blocked}
-      component={PopoverComponentType.DIALOG}
+      component={PopoverComponentType.DIV}
       dataTestId={`${dataTestId}Popover`}
       hasBackDrop={true}
       id={modalId}
       open={props.open}
       positionVariant={PopoverPositionVariantType.FIXED}
+      role={ROLES.DIALOG}
       trapFocusInsideModal={true}
       variant={props.styles.popoverVariant}
       onCloseInternally={props.onPopoverCloseInternally}
       {...props.popover}
     >
       <ModalStyled
-        ref={modalRef}
+        ref={ref}
         $maxHeight={props.maxHeight}
         $maxWidth={props.maxWidth}
         $minHeight={customHeightAllDevices ? props.minHeight : onlyDesktopSize(props.minHeight)}
@@ -110,9 +103,9 @@ const ModalStandAloneComponent = (
         hasFooter={!!props.footer?.content}
         onKeyDown={event => props.onKeyDown?.(event)}
       >
-        <ModalHeaderStyled ref={shadowRef} $styles={props.styles}>
+        <ModalHeaderStyled data-modal-header $styles={props.styles}>
           {!props.blocked && props.dragIcon && (
-            <DraggableIcon ref={props.dragIconRef} $styles={props.styles}>
+            <DraggableIcon data-modal-draggable-icon $styles={props.styles}>
               <ElementOrIcon customIconStyles={props.styles?.dragIcon} {...props.dragIcon} />
             </DraggableIcon>
           )}
@@ -148,13 +141,16 @@ const ModalStandAloneComponent = (
           )}
         </ModalHeaderStyled>
         <ModalContentStyled
-          ref={ref => {
-            scrollableRef(ref);
-            zoomRefChild(ref);
-          }}
+          data-modal-content
           $minContentHeight={props.minContentHeight}
           $styles={props.styles}
+          aria-label={props.contentHasScroll ? props.contentScrollArias?.['aria-label'] : undefined}
+          aria-labelledby={
+            props.contentHasScroll ? props.contentScrollArias?.['aria-labelledby'] : undefined
+          }
           data-testid={`${dataTestId}Content`}
+          role={props.contentHasScroll ? ROLES.REGION : undefined}
+          tabIndex={props.contentHasScroll ? 0 : undefined}
         >
           {props.content}
         </ModalContentStyled>

src/components/modal/hooks/useChangeDimension.tsx

@@ -219,6 +219,19 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    contentScrollArias: {
+      description: 'Aria label for content when scroll',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'ModalContentScrollAriasType',
+          detail:
+            'ModalContentScrollAriasType: { ["aria-label"]?: string; ["aria-labelledby"]?: string; }',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     footer: {
       description: 'Footer of the modal',
       type: { name: 'object' },