Fixed dropdown accessibility issue

- Removed non-existing dropdownMenuButton references
- Added appropriate roles to dropdown menus

Author: alexandrevryghem

src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html

@@ -15,10 +15,10 @@
             [attr.data-test]="'import-dropdown' | dsBrowserOnly"
             title="{{'mydspace.new-submission-external' | translate}}">
       <i class="fa fa-file-import" aria-hidden="true"></i>
-      <span class="caret"></span>
+      <span class="caret" aria-hidden="true"></span>
     </button>
     <div ngbDropdownMenu
-         class="dropdown-menu"
+         class="dropdown-menu p-0"
          id="importControlsDropdownMenu"
          aria-labelledby="dropdownImport">
       <ds-entity-dropdown [isSubmission]="false" (selectionChange)="openPage($event)"></ds-entity-dropdown>

src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html

@@ -13,10 +13,10 @@
             [attr.data-test]="'submission-dropdown' | dsBrowserOnly"
             title="{{'mydspace.new-submission' | translate}}">
       <i class="fa fa-plus-circle" aria-hidden="true"></i>
-      <span class="caret"></span>
+      <span class="caret" aria-hidden="true"></span>
     </button>
     <div ngbDropdownMenu
-         class="dropdown-menu"
+         class="dropdown-menu p-0"
          id="entityControlsDropdownMenu"
          aria-labelledby="dropdownSubmission">
       <ds-entity-dropdown [isSubmission]="true" (selectionChange)="openDialog($event)"></ds-entity-dropdown>

src/app/shared/collection-dropdown/collection-dropdown.component.html

@@ -1,14 +1,14 @@
-<div *ngIf="searchField" class="form-group w-100 pr-2 pl-2">
+<div *ngIf="searchField" class="form-group w-100 pr-2 pl-2 my-2">
   <input type="search"
          class="form-control w-100"
          (click)="$event.stopPropagation();"
          placeholder="{{ 'submission.sections.general.search-collection' | translate }}"
          [formControl]="searchField"
          #searchFieldEl>
 </div>
-<div class="dropdown-divider"></div>
-<ul class="scrollable-menu p-0"
-     aria-labelledby="dropdownMenuButton"
+<div class="dropdown-divider m-0"></div>
+<ul class="scrollable-menu p-0 m-0"
+    role="menu"
      (scroll)="onScroll($event)"
      infiniteScroll
      [infiniteScrollDistance]="1.5"
@@ -18,12 +18,13 @@
      [scrollWindow]="false"
      (scrolled)="onScrollDown()">
 
-  <li class="dropdown-item disabled" *ngIf="searchListCollection?.length == 0 && !(isLoading | async)">
+  <li class="dropdown-item disabled" role="menuitem" *ngIf="searchListCollection?.length == 0 && !(isLoading | async)">
     {{'submission.sections.general.no-collection' | translate}}
   </li>
   <ng-container *ngIf="searchListCollection?.length > 0">
     <li *ngFor="let listItem of searchListCollection"
             class="dropdown-item collection-item"
+            role="menuitem"
             title="{{ listItem.collection.name }}"
             (click)="onSelect(listItem)">
       <div class="list-unstyled mb-0">
@@ -34,9 +35,10 @@
       </div>
     </li>
   </ng-container>
-  <button class="dropdown-item disabled" *ngIf="(isLoading | async)">
-    <ds-themed-loading message="{{'loading.default' | translate}}">
-    </ds-themed-loading>
-  </button>
-
+  <li *ngIf="(isLoading | async)">
+    <button class="dropdown-item disabled">
+      <ds-themed-loading message="{{'loading.default' | translate}}">
+      </ds-themed-loading>
+    </button>
+  </li>
 </ul>

src/app/shared/collection-dropdown/collection-dropdown.component.scss

@@ -4,7 +4,8 @@
   overflow-x: hidden;
 }
 
-.collection-item {
+li:not(:last-of-type), .dropdown-divider {
+  border-top: none;
   border-bottom: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
 }
 

src/app/shared/ds-select/ds-select.component.html

@@ -22,7 +22,7 @@
          class="dropdown-menu"
          id="dsSelectDropdownMenu"
          aria-labelledby="dsSelectMenuButton">
-      <div aria-labelledby="dropdownMenuButton">
+      <div>
         <ng-content select=".menu"></ng-content>
       </div>
     </div>

src/app/shared/entity-dropdown/entity-dropdown.component.html

@@ -1,6 +1,5 @@
-<div
-    class="scrollable-menu"
-    aria-labelledby="dropdownMenuButton"
+<ul class="scrollable-menu list-unstyled mb-0"
+    role="menu"
     (scroll)="onScroll($event)"
     infiniteScroll
     [infiniteScrollDistance]="5"
@@ -9,20 +8,23 @@
     [fromRoot]="true"
     [scrollWindow]="false"
     (scrolled)="onScrollDown()">
-    <button class="dropdown-item disabled" *ngIf="searchListEntity?.length == 0 && !(isLoadingList | async)">
+  <li *ngIf="searchListEntity?.length == 0 && !(isLoadingList | async)">
+    <button class="dropdown-item disabled" role="menuitem">
       {{'submission.sections.general.no-entity' | translate}}
     </button>
-    <button *ngFor="let listItem of searchListEntity"
-            class="dropdown-item entity-item"
+  </li>
+  <li *ngFor="let listItem of searchListEntity" class="entity-item text-primary">
+    <button class="dropdown-item"
+            role="menuitem"
             title="{{ listItem.label }}"
             (click)="onSelect(listItem)">
-      <ul class="list-unstyled mb-0">
-        <li class="list-item text-truncate text-primary font-weight-bold">{{ listItem.label.toLowerCase() + '.listelement.badge' | translate }}</li>
-      </ul>
+      <span class="text-truncate font-weight-bold">{{ listItem.label.toLowerCase() + '.listelement.badge' | translate }}</span>
     </button>
-    <button class="dropdown-item disabled" *ngIf="(isLoadingList | async)" >
+  </li>
+  <li *ngIf="(isLoadingList | async)">
+    <button class="dropdown-item disabled" role="menuitem">
       <ds-themed-loading message="{{'loading.default' | translate}}">
       </ds-themed-loading>
     </button>
-
-</div>
+  </li>
+</ul>

src/app/shared/entity-dropdown/entity-dropdown.component.scss

@@ -1,5 +1,9 @@
-.list-item:active {
-  color: white !important;
+.dropdown-item {
+  padding: 0.35rem 1rem;
+
+  &:active {
+    color: white !important;
+  }
 }
 
 .scrollable-menu {
@@ -8,7 +12,7 @@
   overflow-x: hidden;
 }
 
-.entity-item {
+li:not(:last-of-type) .dropdown-item {
   border-bottom: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
 }
 

src/app/shared/entity-dropdown/entity-dropdown.component.spec.ts

@@ -123,7 +123,7 @@ describe('EntityDropdownComponent', () => {
     scheduler.flush();
 
     spyOn(component, 'onSelect');
-    const entityItem = fixture.debugElement.query(By.css('.entity-item:nth-child(2)'));
+    const entityItem = fixture.debugElement.query(By.css('.entity-item:nth-child(2) button'));
     entityItem.triggerEventHandler('click', null);
 
     scheduler.schedule(() => fixture.detectChanges());

src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html

@@ -88,7 +88,6 @@
        aria-expanded="false"
        [attr.aria-labelledby]="'label_' + model.id">
     <div class="scrollable-menu"
-         aria-labelledby="scrollableDropdownMenuButton"
          infiniteScroll
          [infiniteScrollDistance]="2"
          [infiniteScrollThrottle]="50"

src/app/submission/form/collection/submission-form-collection.component.html

@@ -32,7 +32,7 @@
     </button>
 
     <div ngbDropdownMenu
-         class="dropdown-menu"
+         class="dropdown-menu p-0"
          id="collectionControlsDropdownMenu"
          aria-labelledby="collectionControlsMenuButton">
       <ds-themed-collection-dropdown