Fix id related issues and add accessibility handle

Author: YanaDePauw

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;

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.
    */

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}`;
       }

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;

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,19 +52,19 @@ export abstract class AbstractExpandableMenuProvider extends AbstractMenuProvide
           ...subSections,
           {
             ...partialTopSection,
-            id: this.menuProviderId,
+            id: parentID,
             alwaysRenderExpandable: this.alwaysRenderExpandable,
           },
         ];
-      })
+      }),
     );
   }
 
   protected getAutomatedSectionIdForTopSection(): string {
     return this.getAutomatedSectionId(0);
   }
   protected getAutomatedSectionIdForSubsection(indexOfSubSectionInProvider: number): string {
-    return `${this.menuProviderId}_0_${indexOfSubSectionInProvider}`;
+    return `${this.getAutomatedSectionIdForTopSection()}_${indexOfSubSectionInProvider}`;
   }
 
 }

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> {