From bb02acf13e4e640066e753600d66012c7395757e Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Fri, 21 Feb 2025 13:23:54 +0100
Subject: [PATCH] Fix id related issues and add accessibility handle

---
 src/app/shared/menu/menu-provider.model.ts          |  1 +
 src/app/shared/menu/menu-section.model.ts           |  5 +++++
 src/app/shared/menu/menu.structure.ts               |  6 +++++-
 .../expandable-menu-provider.spec.ts                | 12 ++++++------
 .../helper-providers/expandable-menu-provider.ts    | 13 +++++++------
 .../helper-providers/route-context.menu.spec.ts     |  2 +-
 6 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/app/shared/menu/menu-provider.model.ts b/src/app/shared/menu/menu-provider.model.ts
index 1e72d25206..c17c5e207e 100644
--- a/src/app/shared/menu/menu-provider.model.ts
+++ b/src/app/shared/menu/menu-provider.model.ts
@@ -19,6 +19,7 @@ import { MenuRoute } from './menu-route.model';
  */
 export interface PartialMenuSection {
   id?: string;
+  accessibilityHandle?: string;
   visible: boolean;
   model: MenuItemModels;
   parentID?: string;
diff --git a/src/app/shared/menu/menu-section.model.ts b/src/app/shared/menu/menu-section.model.ts
index a91d75302d..8462e27fd8 100644
--- a/src/app/shared/menu/menu-section.model.ts
+++ b/src/app/shared/menu/menu-section.model.ts
@@ -19,6 +19,11 @@ export interface MenuSection {
    */
   id: string;
 
+  /**
+   * Accessibility handle that can be used to find a specific menu in the html
+   */
+  accessibilityHandle?: string;
+
   /**
    * Whether this section should be visible.
    */
diff --git a/src/app/shared/menu/menu.structure.ts b/src/app/shared/menu/menu.structure.ts
index cb74af8a69..cd8ff84433 100644
--- a/src/app/shared/menu/menu.structure.ts
+++ b/src/app/shared/menu/menu.structure.ts
@@ -83,7 +83,11 @@ function addProviderToList(providers: Provider[], providerType: Type<AbstractMen
       provider.index = provider.index ?? index;
       if (hasValue(parentID)) {
         provider.menuProviderId =  provider.menuProviderId ?? `${parentID}_${index}`;
-        provider.parentID = provider.parentID ?? parentID;
+        let providerParentID = provider.parentID;
+        if (hasValue(providerParentID)) {
+          providerParentID = `${providerParentID}_0`;
+        }
+        provider.parentID = providerParentID ?? parentID;
       } else {
         provider.menuProviderId = provider.menuProviderId ?? `${menuID}_${index}`;
       }
diff --git a/src/app/shared/menu/providers/helper-providers/expandable-menu-provider.spec.ts b/src/app/shared/menu/providers/helper-providers/expandable-menu-provider.spec.ts
index ff9cce812f..53b660932c 100644
--- a/src/app/shared/menu/providers/helper-providers/expandable-menu-provider.spec.ts
+++ b/src/app/shared/menu/providers/helper-providers/expandable-menu-provider.spec.ts
@@ -59,8 +59,8 @@ describe('AbstractExpandableMenuProvider', () => {
         type: MenuItemType.TEXT,
         text: 'sub.section.test.1',
       },
-      id: `${MenuID.ADMIN}_1_0`,
-      parentID: `${MenuID.ADMIN}_1`,
+      id: `${MenuID.ADMIN}_1_0_0`,
+      parentID: `${MenuID.ADMIN}_1_0`,
       alwaysRenderExpandable: false,
     },
     {
@@ -69,8 +69,8 @@ describe('AbstractExpandableMenuProvider', () => {
         type: MenuItemType.TEXT,
         text: 'sub.section.test.2',
       },
-      id: `${MenuID.ADMIN}_1_1`,
-      parentID: `${MenuID.ADMIN}_1`,
+      id: `${MenuID.ADMIN}_1_0_1`,
+      parentID: `${MenuID.ADMIN}_1_0`,
       alwaysRenderExpandable: false,
     },
     {
@@ -80,9 +80,9 @@ describe('AbstractExpandableMenuProvider', () => {
         text: 'top.section.test',
       },
       icon: 'file-import',
-      id: `${MenuID.ADMIN}_1`,
+      id: `${MenuID.ADMIN}_1_0`,
       alwaysRenderExpandable: true,
-    }
+    },
   ];
 
   let provider: AbstractExpandableMenuProvider;
diff --git a/src/app/shared/menu/providers/helper-providers/expandable-menu-provider.ts b/src/app/shared/menu/providers/helper-providers/expandable-menu-provider.ts
index 2b773fa24a..f769b4987c 100644
--- a/src/app/shared/menu/providers/helper-providers/expandable-menu-provider.ts
+++ b/src/app/shared/menu/providers/helper-providers/expandable-menu-provider.ts
@@ -36,13 +36,14 @@ export abstract class AbstractExpandableMenuProvider extends AbstractMenuProvide
       this.getSubSections(),
     ]).pipe(
       map((
-        [partialTopSection, partialSubSections]: [PartialMenuSection, PartialMenuSection[]]
+        [partialTopSection, partialSubSections]: [PartialMenuSection, PartialMenuSection[]],
       ) => {
+        const parentID = partialTopSection.id ?? this.getAutomatedSectionIdForTopSection();
         const subSections = partialSubSections.map((partialSub, index) => {
           return {
             ...partialSub,
-            id: partialSub.id ?? `${this.menuProviderId}_${index}`,
-            parentID: this.menuProviderId,
+            id: partialSub.id ?? this.getAutomatedSectionIdForSubsection(index),
+            parentID: parentID,
             alwaysRenderExpandable: false,
           };
         });
@@ -51,11 +52,11 @@ export abstract class AbstractExpandableMenuProvider extends AbstractMenuProvide
           ...subSections,
           {
             ...partialTopSection,
-            id: this.menuProviderId,
+            id: parentID,
             alwaysRenderExpandable: this.alwaysRenderExpandable,
           },
         ];
-      })
+      }),
     );
   }
 
@@ -63,7 +64,7 @@ export abstract class AbstractExpandableMenuProvider extends AbstractMenuProvide
     return this.getAutomatedSectionId(0);
   }
   protected getAutomatedSectionIdForSubsection(indexOfSubSectionInProvider: number): string {
-    return `${this.menuProviderId}_0_${indexOfSubSectionInProvider}`;
+    return `${this.getAutomatedSectionIdForTopSection()}_${indexOfSubSectionInProvider}`;
   }
 
 }
diff --git a/src/app/shared/menu/providers/helper-providers/route-context.menu.spec.ts b/src/app/shared/menu/providers/helper-providers/route-context.menu.spec.ts
index 1120681c05..82539e8b7f 100644
--- a/src/app/shared/menu/providers/helper-providers/route-context.menu.spec.ts
+++ b/src/app/shared/menu/providers/helper-providers/route-context.menu.spec.ts
@@ -16,7 +16,7 @@ import { CacheableObject } from '../../../../core/cache/cacheable-object.model';
 import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 
 
-describe('AbstractExpandableMenuProvider', () => {
+describe('AbstractRouteContextMenuProvider', () => {
 
   class TestClass extends AbstractRouteContextMenuProvider<CacheableObject> {
     getRouteContext(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<CacheableObject> {