Fix e2e issues

Author: YanaDePauw

cypress/e2e/item-statistics.cy.ts

@@ -7,7 +7,7 @@ describe('Item Statistics Page', () => {
   it('should load if you click on "Statistics" from an Item/Entity page', () => {
     cy.visit('/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')));
     cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
-    cy.location('pathname').should('eq', ITEMSTATISTICSPAGE);
+    cy.location('pathname').should('eq', '/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')));
   });
 
   it('should contain element ds-item-statistics-page when navigating to an item statistics page', () => {

src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html

@@ -3,7 +3,7 @@
      [ngClass]="{ disabled: isDisabled }"
      role="menuitem"
      [attr.aria-disabled]="isDisabled"
-     [attr.aria-labelledby]="adminMenuSectionTitleId(section.id)"
+     [attr.aria-labelledby]="adminMenuSectionTitleAccessibilityHandle(section)"
      [routerLink]="itemModel.link"
      (keyup.space)="navigate($event)"
      (keyup.enter)="navigate($event)"
@@ -14,7 +14,7 @@
     </div>
     <div class="sidebar-collapsible-element-outer-wrapper">
       <div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
-        <span [id]="adminMenuSectionTitleId(section.id)" [attr.data-test]="adminMenuSectionTitleId(section.id) | dsBrowserOnly">
+        <span [id]="adminMenuSectionTitleAccessibilityHandle(section)" [attr.data-test]="adminMenuSectionTitleAccessibilityHandle(section) | dsBrowserOnly">
           {{itemModel.text | translate}}
         </span>
       </div>

src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts

@@ -66,11 +66,13 @@ export class AdminSidebarSectionComponent extends AbstractMenuSectionComponent i
     }
   }
 
-  adminMenuSectionId(sectionId: string) {
-    return `admin-menu-section-${sectionId}`;
+  adminMenuSectionId(section: MenuSection) {
+    const accessibilityHandle = section.accessibilityHandle ?? section.id;
+    return `admin-menu-section-${accessibilityHandle}`;
   }
 
-  adminMenuSectionTitleId(sectionId: string) {
-    return `admin-menu-section-${sectionId}-title`;
+  adminMenuSectionTitleAccessibilityHandle(section: MenuSection) {
+    const accessibilityHandle = section.accessibilityHandle ?? section.id;
+    return `admin-menu-section-${accessibilityHandle}-title`;
   }
 }

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html

@@ -7,7 +7,7 @@
   <a class="sidebar-section-wrapper"
      role="menuitem" tabindex="0"
      aria-haspopup="menu"
-     [attr.aria-controls]="adminMenuSectionId(section.id)"
+     [attr.aria-controls]="adminMenuSectionId(section)"
      [attr.aria-expanded]="isExpanded$ | async"
      [attr.aria-label]="('menu.section.toggle.' + section.id) | translate"
      [class.disabled]="section.model?.disabled"
@@ -20,7 +20,7 @@
     </div>
     <div class="sidebar-collapsible-element-outer-wrapper">
       <div class="sidebar-collapsible-element-inner-wrapper sidebar-item toggler-wrapper">
-        <span [id]="adminMenuSectionTitleId(section.id)" [attr.data-test]="adminMenuSectionTitleId(section.id) | dsBrowserOnly">
+        <span [id]="adminMenuSectionTitleAccessibilityHandle(section)" [attr.data-test]="adminMenuSectionTitleAccessibilityHandle(section) | dsBrowserOnly">
           <ng-container
             *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
         </span>
@@ -34,7 +34,7 @@
     <div class="sidebar-fixed-element-wrapper"></div>
     <div class="sidebar-collapsible-element-outer-wrapper">
       <div class="sidebar-collapsible-element-inner-wrapper">
-        <div class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section.id)" [attr.aria-label]="('menu.section.' + section.id) | translate">
+        <div class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section)" [attr.aria-label]="('menu.section.' + section.id) | translate">
           <div class="sidebar-item" *ngFor="let subSection of (subSections$ | async)">
             <ng-container
               *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>

src/app/shared/menu/providers/edit.menu.spec.ts

@@ -19,6 +19,7 @@ import { EditMenuProvider } from './edit.menu';
 describe('EditMenuProvider', () => {
 
   const expectedTopSection: PartialMenuSection = {
+    accessibilityHandle: 'edit',
     visible: true,
     model: {
       type: MenuItemType.TEXT,

src/app/shared/menu/providers/edit.menu.ts

@@ -39,6 +39,7 @@ export class EditMenuProvider extends AbstractExpandableMenuProvider {
   public getTopSection(): Observable<PartialMenuSection> {
     return observableOf(
       {
+        accessibilityHandle: 'edit',
         model: {
           type: MenuItemType.TEXT,
           text: 'menu.section.edit',
@@ -55,7 +56,7 @@ export class EditMenuProvider extends AbstractExpandableMenuProvider {
       this.authorizationService.isAuthorized(FeatureID.IsCommunityAdmin),
       this.authorizationService.isAuthorized(FeatureID.CanEditItem),
     ]).pipe(
-      map(([isCollectionAdmin, isCommunityAdmin, canEditItem]) => {
+      map(([isCollectionAdmin, isCommunityAdmin, canEditItem]: [boolean, boolean, boolean]) => {
         return [
           {
             visible: isCommunityAdmin,

src/app/shared/menu/providers/export.menu.spec.ts

@@ -19,6 +19,7 @@ import { ExportMenuProvider } from './export.menu';
 
 describe('ExportMenuProvider', () => {
   const expectedTopSection: PartialMenuSection = {
+    accessibilityHandle: 'export',
     visible: true,
     model: {
       type: MenuItemType.TEXT,

src/app/shared/menu/providers/export.menu.ts

@@ -43,6 +43,7 @@ export class ExportMenuProvider extends AbstractExpandableMenuProvider {
   public getTopSection(): Observable<PartialMenuSection> {
     return observableOf(
       {
+        accessibilityHandle: 'export',
         model: {
           type: MenuItemType.TEXT,
           text: 'menu.section.export',
@@ -58,7 +59,7 @@ export class ExportMenuProvider extends AbstractExpandableMenuProvider {
       this.authorizationService.isAuthorized(FeatureID.AdministratorOf),
       this.scriptDataService.scriptWithNameExistsAndCanExecute(METADATA_EXPORT_SCRIPT_NAME),
     ]).pipe(
-      map(([authorized, metadataExportScriptExists]) => {
+      map(([authorized, metadataExportScriptExists]: [boolean, boolean]) => {
         return [
           {
             visible: authorized && metadataExportScriptExists,

src/app/shared/menu/providers/new.menu.spec.ts

@@ -18,6 +18,7 @@ import { NewMenuProvider } from './new.menu';
 
 describe('NewMenuProvider', () => {
   const expectedTopSection: PartialMenuSection = {
+    accessibilityHandle: 'new',
     visible: true,
     model: {
       type: MenuItemType.TEXT,

src/app/shared/menu/providers/new.menu.ts

@@ -40,6 +40,7 @@ export class NewMenuProvider extends AbstractExpandableMenuProvider {
   public getTopSection(): Observable<PartialMenuSection> {
     return observableOf(
       {
+        accessibilityHandle: 'new',
         model: {
           type: MenuItemType.TEXT,
           text: 'menu.section.new',
@@ -56,7 +57,7 @@ export class NewMenuProvider extends AbstractExpandableMenuProvider {
       this.authorizationService.isAuthorized(FeatureID.IsCommunityAdmin),
       this.authorizationService.isAuthorized(FeatureID.AdministratorOf),
       this.authorizationService.isAuthorized(FeatureID.CanSubmit),
-    ]).pipe(map(([isCollectionAdmin, isCommunityAdmin, isSiteAdmin, canSubmit]) => {
+    ]).pipe(map(([isCollectionAdmin, isCommunityAdmin, isSiteAdmin, canSubmit]: [boolean, boolean, boolean, boolean]) => {
 
       return [
         {