fix #5488: add ARIA labeling to hide edit menu from screen readers when user has no permissions (#5514)

Author: guillermo-escire

src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.html

@@ -1,8 +1,11 @@
-<div class="dso-edit-menu d-flex" role="menubar">
+<div class="dso-edit-menu d-flex"
+     [attr.role]="(menuVisibleWithSections$ | async) ? 'menubar' : null"
+     [attr.aria-hidden]="(menuVisibleWithSections$ | async) === false ? 'true' : null">
   @for (section of (sections | async); track section) {
     <div class="ms-1">
       <ng-container
-      *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
+        *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;">
+      </ng-container>
     </div>
   }
 </div>

src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.spec.ts

@@ -45,12 +45,25 @@ describe('DsoEditMenuComponent', () => {
     index: 1,
   };
 
+  const subSection = {
+    id: 'edit-dso-sub',
+    active: false,
+    visible: true,
+    model: {
+      text: 'sub-section-text',
+      type: null,
+      disabled: false,
+    } as TextMenuItemModel,
+    icon: 'pencil',
+    index: 0,
+  };
 
   beforeEach(waitForAsync(() => {
     authorizationService = jasmine.createSpyObj('authorizationService', {
       isAuthorized: of(true),
     });
     spyOn(menuService, 'getMenuTopSections').and.returnValue(of([section]));
+    spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(of([subSection]));
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), RouterTestingModule, DsoEditMenuComponent],
       providers: [
@@ -65,17 +78,42 @@ describe('DsoEditMenuComponent', () => {
     }).compileComponents();
   }));
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DsoEditMenuComponent);
-    comp = fixture.componentInstance;
-    comp.sections = of([]);
-    fixture.detectChanges();
-  });
-
   describe('onInit', () => {
     it('should create', () => {
+      fixture = TestBed.createComponent(DsoEditMenuComponent);
+      comp = fixture.componentInstance;
+      fixture.detectChanges();
       expect(comp).toBeTruthy();
     });
+
+    it('should have role menubar when subsections exist', () => {
+      (menuService.getSubSectionsByParentID as jasmine.Spy).and.returnValue(of([subSection]));
+      fixture = TestBed.createComponent(DsoEditMenuComponent);
+      comp = fixture.componentInstance;
+      fixture.detectChanges();
+
+      const menu = fixture.nativeElement.querySelector('.dso-edit-menu');
+      expect(menu.getAttribute('role')).toBe('menubar');
+    });
+
+    it('should NOT have role menubar when no subsections exist', () => {
+      (menuService.getSubSectionsByParentID as jasmine.Spy).and.returnValue(of([]));
+      fixture = TestBed.createComponent(DsoEditMenuComponent);
+      comp = fixture.componentInstance;
+      fixture.detectChanges();
+
+      const menu = fixture.nativeElement.querySelector('.dso-edit-menu');
+      expect(menu.getAttribute('role')).toBeNull();
+    });
+
+    it('should have aria-hidden when no subsections exist', () => {
+      (menuService.getSubSectionsByParentID as jasmine.Spy).and.returnValue(of([]));
+      fixture = TestBed.createComponent(DsoEditMenuComponent);
+      comp = fixture.componentInstance;
+      fixture.detectChanges();
+
+      const menu = fixture.nativeElement.querySelector('.dso-edit-menu');
+      expect(menu.getAttribute('aria-hidden')).toBe('true');
+    });
   });
 });
-

src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.ts

@@ -8,15 +8,21 @@ import {
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { AuthorizationDataService } from '@dspace/core/data/feature-authorization/authorization-data.service';
+import {
+  combineLatest,
+  Observable,
+  of,
+} from 'rxjs';
+import {
+  map,
+  switchMap,
+} from 'rxjs/operators';
 
 import { MenuComponent } from '../../menu/menu.component';
 import { MenuService } from '../../menu/menu.service';
 import { MenuID } from '../../menu/menu-id.model';
 import { ThemeService } from '../../theme-support/theme.service';
 
-/**
- * Component representing the edit menu and other menus on the dspace object pages
- */
 @Component({
   selector: 'ds-dso-edit-menu',
   styleUrls: ['./dso-edit-menu.component.scss'],
@@ -27,20 +33,32 @@ import { ThemeService } from '../../theme-support/theme.service';
   ],
 })
 export class DsoEditMenuComponent extends MenuComponent {
-  /**
-   * The menu ID of this component is DSO_EDIT
-   * @type {MenuID.DSO_EDIT}
-   */
+
   menuID = MenuID.DSO_EDIT;
 
+  menuVisibleWithSections$: Observable<boolean>;
 
-  constructor(protected menuService: MenuService,
-              protected injector: Injector,
-              public authorizationService: AuthorizationDataService,
-              public route: ActivatedRoute,
-              protected themeService: ThemeService,
+  constructor(
+    protected menuService: MenuService,
+    protected injector: Injector,
+    public authorizationService: AuthorizationDataService,
+    public route: ActivatedRoute,
+    protected themeService: ThemeService,
   ) {
     super(menuService, injector, authorizationService, route, themeService);
+    this.menuVisibleWithSections$ = this.menuService.getMenuTopSections(MenuID.DSO_EDIT).pipe(
+      switchMap((sections) => {
+        if (sections.length === 0) {return of(false);}
+        return combineLatest(
+          sections.map((section) =>
+            this.menuService.getSubSectionsByParentID(MenuID.DSO_EDIT, section.id).pipe(
+              map((subSections) => subSections.length > 0),
+            ),
+          ),
+        ).pipe(
+          map((results) => results.some((hasVisible) => hasVisible)),
+        );
+      }),
+    );
   }
-
 }