diff --git a/src/app/shared/menu/menu-provider.model.ts b/src/app/shared/menu/menu-provider.model.ts index 7d26ec6b3b..e0796f7f10 100644 --- a/src/app/shared/menu/menu-provider.model.ts +++ b/src/app/shared/menu/menu-provider.model.ts @@ -23,6 +23,7 @@ import { MenuItemModels } from './menu-section.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 f56536132e..f7823885fa 100644 --- a/src/app/shared/menu/menu.structure.ts +++ b/src/app/shared/menu/menu.structure.ts @@ -94,7 +94,11 @@ function addProviderToList(providers: Provider[], providerType: Type { 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, }, { @@ -72,8 +72,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, }, { @@ -83,7 +83,7 @@ describe('AbstractExpandableMenuProvider', () => { text: 'top.section.test', }, icon: 'file-import', - id: `${MenuID.ADMIN}_1`, + id: `${MenuID.ADMIN}_1_0`, alwaysRenderExpandable: true, }, ]; 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 e90c795ca0..3b647417c9 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 @@ -45,11 +45,12 @@ export abstract class AbstractExpandableMenuProvider extends AbstractMenuProvide map(( [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, }; }); @@ -58,7 +59,7 @@ export abstract class AbstractExpandableMenuProvider extends AbstractMenuProvide ...subSections, { ...partialTopSection, - id: this.menuProviderId, + id: parentID, alwaysRenderExpandable: this.alwaysRenderExpandable, }, ]; @@ -70,7 +71,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 c2d666ee65..d4347f7564 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 @@ -22,7 +22,7 @@ import { MenuItemType } from '../../menu-item-type.model'; import { PartialMenuSection } from '../../menu-provider.model'; import { AbstractRouteContextMenuProvider } from './route-context.menu'; -describe('AbstractExpandableMenuProvider', () => { +describe('AbstractRouteContextMenuProvider', () => { class TestClass extends AbstractRouteContextMenuProvider { getRouteContext(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {