Include arias for content on Drawer component

Kubit · Kubit · commit a5ec2c295b6c · 2024-11-05T09:28:36.000+01:00
diff --git a/src/components/drawer/drawerControlled.tsx b/src/components/drawer/drawerControlled.tsx
@@ -4,6 +4,7 @@ import { STYLES_NAME } from '@/constants';
 import {
   useDeviceHeight,
   useMediaDevice,
+  useScrollDetectionWithAutoFocus,
   useScrollEffect,
   useStylesV2,
   useZoomEffect,
@@ -29,6 +30,33 @@ const DrawerControlledComponent = React.forwardRef(
     { portalId, ...props }: IDrawerControlled<V>,
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
+    const innerRef = React.useRef<HTMLDivElement | null>(null);
+
+    const handleInnerRef = React.useCallback(node => {
+      innerRef.current = node;
+      const drawerTitle = innerRef.current?.querySelector('[data-drawer-title]') as
+        | HTMLElement
+        | null
+        | undefined;
+      const drawerContent = innerRef.current?.querySelector('[data-drawer-content]') as
+        | HTMLElement
+        | null
+        | undefined;
+      const drawerFooter = innerRef.current?.querySelector('[data-drawer-footer]') as
+        | HTMLElement
+        | null
+        | undefined;
+
+      handleTitleShadowEffect(drawerTitle);
+      handleContentScrollEffect(drawerContent);
+      handleFooterZoomEffect(drawerFooter);
+      handleContentScrollDetection(drawerContent);
+    }, []);
+
+    React.useImperativeHandle(ref, () => {
+      return innerRef?.current as HTMLDivElement;
+    }, []);
+
     useDeviceHeight();
 
     const handleScroll = (e: Event) => {
@@ -43,22 +71,26 @@ const DrawerControlledComponent = React.forwardRef(
     const device = useMediaDevice();
     const stylesByDevice = styles?.[device];
 
-    const { scrollableRef, shadowRef } = useScrollEffect({
-      shadowStyles: stylesByDevice.titleContainer?.box_shadow,
-      shadowVisible: SCROLL_DISTANCE,
-      scrollCallback: handleScroll,
-    });
+    const { scrollableRef: handleContentScrollEffect, shadowRef: handleTitleShadowEffect } =
+      useScrollEffect({
+        shadowStyles: stylesByDevice.titleContainer?.box_shadow,
+        shadowVisible: SCROLL_DISTANCE,
+        scrollCallback: handleScroll,
+      });
+
+    const handleFooterZoomEffect = useZoomEffect(FOOTER_EDIT_STYLES, MAX_ZOOM);
 
-    const footerRef = useZoomEffect(FOOTER_EDIT_STYLES, MAX_ZOOM);
+    const { hasScroll: contentHasScroll, handleScrollDetection: handleContentScrollDetection } =
+      useScrollDetectionWithAutoFocus({
+        parentElementRef: innerRef,
+      });
 
     const drawerStructure = (
       <DrawerStandAlone
         {...props}
-        ref={ref}
-        contentRef={scrollableRef}
+        ref={handleInnerRef}
+        contentHasScroll={contentHasScroll}
         device={device}
-        footerRef={footerRef}
-        shadowRef={shadowRef}
         styles={stylesByDevice}
       />
     );
diff --git a/src/components/drawer/drawerStandAlone.tsx b/src/components/drawer/drawerStandAlone.tsx
@@ -2,10 +2,11 @@ import * as React from 'react';
 
 import { ElementOrIcon } from '@/components/elementOrIcon';
 import { Footer } from '@/components/footer/footer';
-import { PopoverControlled as Popover } from '@/components/popover';
+import { PopoverControlled as Popover, PopoverComponentType } from '@/components/popover';
 import { Text } from '@/components/text/text';
 import { TextComponentType } from '@/components/text/types/component';
 import { useId } from '@/hooks';
+import { ROLES } from '@/types';
 
 import {
   DrawerContentStyled,
@@ -18,14 +19,7 @@ import {
 import { IDrawerStandAlone } from './types';
 
 const DrawerStandAloneComponent = (
-  {
-    blocked = false,
-    shadowRef,
-    footerRef,
-    contentRef,
-    titleComponent = TextComponentType.H3,
-    ...props
-  }: IDrawerStandAlone,
+  { blocked = false, titleComponent = TextComponentType.H3, ...props }: IDrawerStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
   const uniqueTitleId = useId('drawer-title');
@@ -34,13 +28,14 @@ const DrawerStandAloneComponent = (
 
   return (
     <Popover
-      aria-label={!props.title?.content ? `${props.popover?.['aria-label']}` : undefined}
       aria-labelledby={props.title?.content ? titleIdFinal : undefined}
       aria-modal={props.open}
       clickOverlayClose={!blocked}
+      component={PopoverComponentType.DIV}
       dataTestId={`${props.dataTestId}Popover`}
       hasBackDrop={true}
       open={props.open}
+      role={ROLES.DIALOG}
       trapFocusInsideModal={true}
       variant={position}
       {...props.popover}
@@ -62,8 +57,8 @@ const DrawerStandAloneComponent = (
         )}
         <DrawerTitleContentFooterContainerStyled blocked={blocked} styles={props.styles}>
           <DrawerTitleStyled
-            ref={shadowRef}
-            as={Text as unknown as React.ElementType}
+            data-drawer-title
+            as={Text}
             component={titleComponent as unknown as TextComponentType}
             customTypography={props.styles.title}
             dataTestId={`${titleIdFinal}Title`}
@@ -72,13 +67,24 @@ const DrawerStandAloneComponent = (
           >
             {props.title?.content}
           </DrawerTitleStyled>
-          <DrawerContentStyled ref={contentRef} styles={props.styles}>
+          <DrawerContentStyled
+            data-drawer-content
+            aria-label={
+              props.contentHasScroll ? props.contentScrollArias?.['aria-label'] : undefined
+            }
+            aria-labelledby={
+              props.contentHasScroll ? props.contentScrollArias?.['aria-labelledby'] : undefined
+            }
+            role={props.contentHasScroll ? ROLES.REGION : undefined}
+            styles={props.styles}
+            tabIndex={props.contentHasScroll ? 0 : undefined}
+          >
             {props.children}
           </DrawerContentStyled>
-          {props.footer?.content && props.styles.footer?.variant && (
+          {props.footer?.content && (props.styles.footer?.variant || props.footer.variant) && (
             <DrawerFooterStyled
-              ref={footerRef}
-              as={Footer as unknown as React.ElementType}
+              data-drawer-footer
+              as={Footer}
               customFooterStyles={props.styles}
               variant={props.styles.footer?.variant}
               {...props.footer}
diff --git a/src/components/drawer/stories/controlledArgtypes.ts b/src/components/drawer/stories/controlledArgtypes.ts
@@ -57,6 +57,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: 'DrawerContentScrollAriasType',
+          detail:
+            'DrawerContentScrollAriasType: { ["aria-label"]?: string; ["aria-labelledby"]?: string; }',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     footer: {
       description: 'Footer of the Drawer',
       type: { name: 'object' },
diff --git a/src/components/drawer/stories/drawerControlled.stories.tsx b/src/components/drawer/stories/drawerControlled.stories.tsx
@@ -56,7 +56,14 @@ const StoryWithHooks = args => {
       >
         Open Drawer
       </Button>
-      <Story {...args} level={level} open={open} onClickBackFirstLevel={onClickBackFirstLevel} />
+      <Story
+        {...args}
+        closeIcon={{ ...args.closeIcon, onClick: () => setOpen(false) }}
+        level={level}
+        open={open}
+        popover={{ ...args.popover, onCloseInternally: () => setOpen(false) }}
+        onClickBackFirstLevel={onClickBackFirstLevel}
+      />
     </>
   );
 };
@@ -80,6 +87,9 @@ export const DrawerControlled: Story = {
         <ReplaceContent />
       </>
     ),
+    contentScrollArias: {
+      'aria-label': 'Drawer content scroll',
+    },
     blocked: false,
     popover: {
       blockBack: true,
@@ -106,6 +116,9 @@ export const DrawerControlledWithCtv: Story = {
     level: DrawerLevelPositionTypes.FIRST_LEVEL,
     open: false,
     children: <ReplaceContent />,
+    contentScrollArias: {
+      'aria-label': 'Drawer content scroll',
+    },
     blocked: false,
     popover: {
       blockBack: true,
diff --git a/src/components/drawer/stories/uncontrolledArgTypes.ts b/src/components/drawer/stories/uncontrolledArgTypes.ts
@@ -66,6 +66,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: 'DrawerContentScrollAriasType',
+          detail:
+            'DrawerContentScrollAriasType: { ["aria-label"]?: string; ["aria-labelledby"]?: string; }',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     footer: {
       description: 'Footer of the Drawer',
       type: { name: 'object' },
diff --git a/src/components/drawer/types/drawer.ts b/src/components/drawer/types/drawer.ts
@@ -21,9 +21,16 @@ export type DrawerFooterType = Omit<IFooter, 'children' | 'variant'> & {
 
 export type DrawerPopoverType = Omit<IPopoverControlled, 'children' | 'open'>;
 
+export type DrawerContentScrollAriasType = {
+  ['aria-label']?: string;
+  ['aria-labelledby']?: string;
+};
+
 export interface IDrawerStandAlone {
   styles: DrawerDeviceStyleType;
   children: ReactNode;
+  contentScrollArias?: DrawerContentScrollAriasType;
+  contentHasScroll: boolean;
   footer?: DrawerFooterType;
   closeIcon?: IElementOrIcon;
   title?: DrawerTextType;
@@ -37,15 +44,10 @@ export interface IDrawerStandAlone {
   device?: DeviceBreakpointsType;
   blocked?: boolean;
   popover?: DrawerPopoverType;
-  /* To useScrollableEffect */
-  shadowRef: (node) => void;
-  /* To useZoomEffect */
-  footerRef?: (node) => void;
-  contentRef?: (node) => void;
   onContentScroll?: (e: Event) => void;
 }
 
-type OmitProps = 'styles' | 'device' | 'shadowRef' | 'footerRef' | 'contentRef';
+type OmitProps = 'styles' | 'device' | 'contentHasScroll';
 
 export interface IDrawerControlled<V = undefined extends string ? unknown : string>
   extends Omit<IDrawerStandAlone, OmitProps>,
