Add aria-controls utilities on OliveMenu component

Author: Kubit

src/components/oliveMenu/__test__/oliveMenu.utils.test.ts

@@ -47,8 +47,9 @@ const menuSection: OliveMenuListOptions[] = [
 
 describe('Olive Menu utils', () => {
   test('Should get ariaControls', async () => {
-    expect(getAriaControls(menuSection, 'ariaControls')).toStrictEqual(
-      'ariaControls0number1 ariaControls1number2'
-    );
+    expect(getAriaControls(menuSection, 'ariaControls')).toStrictEqual([
+      'ariaControls0number1',
+      'ariaControls1number2',
+    ]);
   });
 });

src/components/oliveMenu/oliveMenu.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useEscPressed, useMediaDevice } from '@/hooks';
+import { useEscPressedV2, useMediaDevice } from '@/hooks';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 
@@ -30,7 +30,7 @@ const OliveMenuComponent = React.forwardRef(
       onOpenClose?.(false);
     }, [open]);
 
-    useEscPressed({ execute: handlePressScape, element: innerRef });
+    useEscPressedV2({ ref: innerRef, onEscPress: handlePressScape });
 
     const handleTriggerClick = e => {
       setOpen(!open);

src/components/oliveMenu/oliveMenuStandAlone.tsx

@@ -30,6 +30,8 @@ const OliveMenuStandAloneComponent = (
 
   const titleId = actionBottomSheetTitle?.id ?? `${uniqueId}Title`;
 
+  const ariaControlIds = getAriaControls(props.sections, ariaControls);
+
   return (
     <OliveMenuStyled
       ref={ref}
@@ -41,7 +43,7 @@ const OliveMenuStandAloneComponent = (
         (props.styles.button?.[props.device]?.size || props.trigger?.size) && (
           <ButtonContainer ref={buttonRef} styles={props.styles}>
             <Button
-              aria-controls={props.open ? getAriaControls(props.sections, ariaControls) : undefined}
+              aria-controls={props.open ? ariaControlIds?.join(' ') : undefined}
               aria-expanded={props.open}
               dataTestId={`${props.dataTestId}Button`}
               size={props.styles.button?.[props.device]?.size}
@@ -93,14 +95,14 @@ const OliveMenuStandAloneComponent = (
                 <ListOptions
                   key={section.id}
                   dataTestId={props.dataTestId}
-                  id={`${ariaControls}${index}${section.id ? `${section.id}` : ''}`}
                   optionVariant={props.styles.listOptions?.optionVariant as string}
                   selectedValue={props.selectedValue}
                   title={{ component: TextComponentType.H6, ...title }}
                   type={ListOptionsType.NAVIGATION}
                   variant={props.styles.listOptions?.variant as string}
                   onOptionClick={props.onOptionClick}
                   {...section}
+                  id={ariaControlIds?.[index]}
                 />
               ))}
           </ListboxStyled>

src/components/oliveMenu/utils/getAriaControls.ts

@@ -3,11 +3,10 @@ import { OliveMenuListOptions } from '../types';
 export const getAriaControls = (
   sections: OliveMenuListOptions[] | undefined,
   ariaControls: string
-): string => {
-  let newAriaControls = '';
-  sections?.forEach(
-    (_section, index) =>
-      (newAriaControls += ` ${ariaControls}${index}${_section.id ? `${_section.id}` : ''}`)
-  );
-  return newAriaControls.trimStart();
+): string[] | undefined => {
+  const ariaControlsIds = sections?.map(({ title, ...section }, index) => {
+    return `${ariaControls}${index}${section.id ? `${section.id}` : ''}`;
+  });
+
+  return ariaControlsIds;
 };