Fix id related issues and add accessibility handle

This commit is contained in:
Yana De Pauw
2025-02-21 13:23:54 +01:00
parent 8b9af3b04c
commit bb02acf13e
6 changed files with 25 additions and 14 deletions

View File

@@ -19,6 +19,7 @@ import { MenuRoute } from './menu-route.model';
*/
export interface PartialMenuSection {
id?: string;
accessibilityHandle?: string;
visible: boolean;
model: MenuItemModels;
parentID?: string;

View File

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

View File

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

View File

@@ -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;

View File

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

View File

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