Update dataTestId for options

Author: Kubit

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

@@ -4,7 +4,7 @@ import { getAriaControls } from '../utils';
 const menuSection: OliveMenuListOptions[] = [
   {
     title: { content: 'label1' },
-    id: '1',
+    id: 'number1',
     options: [
       {
         label: 'option 1',
@@ -25,7 +25,7 @@ const menuSection: OliveMenuListOptions[] = [
   },
   {
     title: { content: 'label2' },
-    id: '2',
+    id: 'number2',
     options: [
       {
         label: 'option 1',
@@ -48,7 +48,7 @@ const menuSection: OliveMenuListOptions[] = [
 describe('Olive Menu utils', () => {
   test('Should get ariaControls', async () => {
     expect(getAriaControls(menuSection, 'ariaControls')).toStrictEqual(
-      'ariaControls0 ariaControls1'
+      'ariaControls0number1 ariaControls1number2'
     );
   });
 });

src/components/oliveMenu/oliveMenuStandAlone.tsx

@@ -93,7 +93,7 @@ const OliveMenuStandAloneComponent = (
                 <ListOptions
                   key={section.id}
                   dataTestId={props.dataTestId}
-                  id={`${ariaControls}${index}`}
+                  id={`${ariaControls}${index}${section.id ? `${section.id}` : ''}`}
                   optionVariant={props.styles.listOptions?.optionVariant as string}
                   selectedValue={props.selectedValue}
                   title={{ component: TextComponentType.H6, ...title }}

src/components/oliveMenu/stories/oliveMenu.stories.tsx

@@ -29,6 +29,7 @@ type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
 const sections: OliveMenuListOptions[] = [
   {
     title: { content: 'list 1' },
+    id: 'ID_1',
     options: [
       {
         label: 'option 1',
@@ -48,6 +49,7 @@ const sections: OliveMenuListOptions[] = [
   },
   {
     title: { content: 'list 2' },
+    id: 'ID_2',
     options: [
       {
         label: 'option 1',

src/components/oliveMenu/utils/getAriaControls.ts

@@ -5,6 +5,9 @@ export const getAriaControls = (
   ariaControls: string
 ): string => {
   let newAriaControls = '';
-  sections?.forEach((_section, index) => (newAriaControls += ` ${ariaControls}${index}`));
+  sections?.forEach(
+    (_section, index) =>
+      (newAriaControls += ` ${ariaControls}${index}${_section.id ? `${_section.id}` : ''}`)
+  );
   return newAriaControls.trimStart();
 };