From 822db5120ad2d1d663c2c6ff39232e9efad715fe Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Mon, 22 May 2023 16:56:13 +0200
Subject: [PATCH 01/24] 101731: Make ConfirmationModalComponent not dependent
 on DSpaceObject

---
 .../epeople-registry/epeople-registry.component.ts        | 2 +-
 .../eperson-form/eperson-form.component.ts                | 2 +-
 .../group-registry/group-form/group-form.component.ts     | 2 +-
 .../confirmation-modal/confirmation-modal.component.html  | 8 ++++----
 .../confirmation-modal/confirmation-modal.component.ts    | 5 +----
 .../export-batch-selector.component.ts                    | 4 +++-
 .../export-metadata-selector.component.ts                 | 4 +++-
 7 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/app/access-control/epeople-registry/epeople-registry.component.ts b/src/app/access-control/epeople-registry/epeople-registry.component.ts
index c7b9907b82..c51070183a 100644
--- a/src/app/access-control/epeople-registry/epeople-registry.component.ts
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.ts
@@ -228,7 +228,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
   deleteEPerson(ePerson: EPerson) {
     if (hasValue(ePerson.id)) {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = ePerson;
+      modalRef.componentInstance.name = this.dsoNameService.getName(ePerson);
       modalRef.componentInstance.headerLabel = 'confirmation-modal.delete-eperson.header';
       modalRef.componentInstance.infoLabel = 'confirmation-modal.delete-eperson.info';
       modalRef.componentInstance.cancelLabel = 'confirmation-modal.delete-eperson.cancel';
diff --git a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts
index ce30062a69..41408c9e8f 100644
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts
@@ -454,7 +454,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
   delete() {
     this.epersonService.getActiveEPerson().pipe(take(1)).subscribe((eperson: EPerson) => {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = eperson;
+      modalRef.componentInstance.name = this.dsoNameService.getName(eperson);
       modalRef.componentInstance.headerLabel = 'confirmation-modal.delete-eperson.header';
       modalRef.componentInstance.infoLabel = 'confirmation-modal.delete-eperson.info';
       modalRef.componentInstance.cancelLabel = 'confirmation-modal.delete-eperson.cancel';
diff --git a/src/app/access-control/group-registry/group-form/group-form.component.ts b/src/app/access-control/group-registry/group-form/group-form.component.ts
index b837d80479..37d30c218c 100644
--- a/src/app/access-control/group-registry/group-form/group-form.component.ts
+++ b/src/app/access-control/group-registry/group-form/group-form.component.ts
@@ -416,7 +416,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   delete() {
     this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((group: Group) => {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = group;
+      modalRef.componentInstance.name = this.dsoNameService.getName(group);
       modalRef.componentInstance.headerLabel = this.messagePrefix + '.delete-group.modal.header';
       modalRef.componentInstance.infoLabel = this.messagePrefix + '.delete-group.modal.info';
       modalRef.componentInstance.cancelLabel = this.messagePrefix + '.delete-group.modal.cancel';
diff --git a/src/app/shared/confirmation-modal/confirmation-modal.component.html b/src/app/shared/confirmation-modal/confirmation-modal.component.html
index 02434b1fa1..ff82f5bc83 100644
--- a/src/app/shared/confirmation-modal/confirmation-modal.component.html
+++ b/src/app/shared/confirmation-modal/confirmation-modal.component.html
@@ -1,18 +1,18 @@
 <div>
-  <div class="modal-header">{{ headerLabel | translate:{ dsoName: dsoNameService.getName(dso) } }}
+  <div class="modal-header">{{ headerLabel | translate:{ dsoName: name } }}
     <button type="button" class="close" (click)="close()" aria-label="Close">
       <span aria-hidden="true">×</span>
     </button>
   </div>
   <div class="modal-body">
-    <p>{{ infoLabel | translate:{ dsoName: dsoNameService.getName(dso) } }}</p>
+    <p>{{ infoLabel | translate:{ dsoName: name } }}</p>
   </div>
   <div class="modal-footer">
     <button type="button" class="cancel btn btn-outline-secondary" (click)="cancelPressed()" aria-label="Cancel">
-      <i class="fas fa-times"></i> {{ cancelLabel | translate:{ dsoName: dsoNameService.getName(dso) } }}
+      <i class="fas fa-times"></i> {{ cancelLabel | translate:{ dsoName: name } }}
     </button>
     <button type="button" class="confirm btn btn-{{brandColor}}" (click)="confirmPressed()" aria-label="Confirm" ngbAutofocus>
-      <i *ngIf="confirmIcon" class="{{confirmIcon}}"></i> {{ confirmLabel | translate:{ dsoName: dsoNameService.getName(dso) } }}
+      <i *ngIf="confirmIcon" class="{{confirmIcon}}"></i> {{ confirmLabel | translate:{ dsoName: name } }}
     </button>
   </div>
 </div>
diff --git a/src/app/shared/confirmation-modal/confirmation-modal.component.ts b/src/app/shared/confirmation-modal/confirmation-modal.component.ts
index 46eb4cedc5..e48986d880 100644
--- a/src/app/shared/confirmation-modal/confirmation-modal.component.ts
+++ b/src/app/shared/confirmation-modal/confirmation-modal.component.ts
@@ -1,7 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { DSpaceObject } from '../../core/shared/dspace-object.model';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-confirmation-modal',
@@ -18,7 +16,7 @@ export class ConfirmationModalComponent {
    */
   @Input() brandColor = 'primary';
 
-  @Input() dso: DSpaceObject;
+  @Input() name: string;
 
   /**
    * An event fired when the cancel or confirm button is clicked, with respectively false or true
@@ -28,7 +26,6 @@ export class ConfirmationModalComponent {
 
   constructor(
     protected activeModal: NgbActiveModal,
-    public dsoNameService: DSONameService,
   ) {
   }
 
diff --git a/src/app/shared/dso-selector/modal-wrappers/export-batch-selector/export-batch-selector.component.ts b/src/app/shared/dso-selector/modal-wrappers/export-batch-selector/export-batch-selector.component.ts
index 0645e09029..e5f5eca350 100644
--- a/src/app/shared/dso-selector/modal-wrappers/export-batch-selector/export-batch-selector.component.ts
+++ b/src/app/shared/dso-selector/modal-wrappers/export-batch-selector/export-batch-selector.component.ts
@@ -20,6 +20,7 @@ import { RemoteData } from '../../../../core/data/remote-data';
 import { getProcessDetailRoute } from '../../../../process-page/process-page-routing.paths';
 import { AuthorizationDataService } from '../../../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../../../core/data/feature-authorization/feature-id';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * Component to wrap a list of existing dso's inside a modal
@@ -38,6 +39,7 @@ export class ExportBatchSelectorComponent extends DSOSelectorModalWrapperCompone
               protected notificationsService: NotificationsService, protected translationService: TranslateService,
               protected scriptDataService: ScriptDataService,
               protected authorizationDataService: AuthorizationDataService,
+              protected dsoNameService: DSONameService,
               private modalService: NgbModal) {
     super(activeModal, route);
   }
@@ -49,7 +51,7 @@ export class ExportBatchSelectorComponent extends DSOSelectorModalWrapperCompone
   navigate(dso: DSpaceObject): Observable<boolean> {
     if (dso instanceof Collection) {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = dso;
+      modalRef.componentInstance.name = this.dsoNameService.getName(dso);
       modalRef.componentInstance.headerLabel = 'confirmation-modal.export-batch.header';
       modalRef.componentInstance.infoLabel = 'confirmation-modal.export-batch.info';
       modalRef.componentInstance.cancelLabel = 'confirmation-modal.export-batch.cancel';
diff --git a/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts b/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts
index d4b4314a99..d1252bf485 100644
--- a/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts
+++ b/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts
@@ -21,6 +21,7 @@ import { RemoteData } from '../../../../core/data/remote-data';
 import { getProcessDetailRoute } from '../../../../process-page/process-page-routing.paths';
 import { AuthorizationDataService } from '../../../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../../../core/data/feature-authorization/feature-id';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * Component to wrap a list of existing dso's inside a modal
@@ -39,6 +40,7 @@ export class ExportMetadataSelectorComponent extends DSOSelectorModalWrapperComp
               protected notificationsService: NotificationsService, protected translationService: TranslateService,
               protected scriptDataService: ScriptDataService,
               protected authorizationDataService: AuthorizationDataService,
+              protected dsoNameService: DSONameService,
               private modalService: NgbModal) {
     super(activeModal, route);
   }
@@ -50,7 +52,7 @@ export class ExportMetadataSelectorComponent extends DSOSelectorModalWrapperComp
   navigate(dso: DSpaceObject): Observable<boolean> {
     if (dso instanceof Collection || dso instanceof Community) {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = dso;
+      modalRef.componentInstance.name = this.dsoNameService.getName(dso);
       modalRef.componentInstance.headerLabel = 'confirmation-modal.export-metadata.header';
       modalRef.componentInstance.infoLabel = 'confirmation-modal.export-metadata.info';
       modalRef.componentInstance.cancelLabel = 'confirmation-modal.export-metadata.cancel';

From 7998ef489cc4e30dc0f058d481329e2f39096caa Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 23 Jun 2023 23:38:06 +0200
Subject: [PATCH 02/24] 101731: Make ConfirmationModalComponent not dependent
 on DSpaceObject

---
 .../workspace-item-admin-workflow-actions.component.ts          | 2 +-
 .../subscription-view/subscription-view.component.ts            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.ts b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.ts
index 36678460da..8db862dd5a 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.ts
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.ts
@@ -124,7 +124,7 @@ export class WorkspaceItemAdminWorkflowActionsComponent implements OnInit {
    */
   deleteSupervisionOrder(supervisionOrderEntry: SupervisionOrderListEntry) {
     const modalRef = this.modalService.open(ConfirmationModalComponent);
-    modalRef.componentInstance.dso = supervisionOrderEntry.group;
+    modalRef.componentInstance.name = this.dsoNameService.getName(supervisionOrderEntry.group);
     modalRef.componentInstance.headerLabel = this.messagePrefix + '.delete-supervision.modal.header';
     modalRef.componentInstance.infoLabel = this.messagePrefix + '.delete-supervision.modal.info';
     modalRef.componentInstance.cancelLabel = this.messagePrefix + '.delete-supervision.modal.cancel';
diff --git a/src/app/shared/subscriptions/subscription-view/subscription-view.component.ts b/src/app/shared/subscriptions/subscription-view/subscription-view.component.ts
index 072b8d7828..0362ae6695 100644
--- a/src/app/shared/subscriptions/subscription-view/subscription-view.component.ts
+++ b/src/app/shared/subscriptions/subscription-view/subscription-view.component.ts
@@ -82,7 +82,7 @@ export class SubscriptionViewComponent {
   deleteSubscriptionPopup(subscription: Subscription) {
     if (hasValue(subscription.id)) {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = this.dso;
+      modalRef.componentInstance.name = this.dsoNameService.getName(this.dso);
       modalRef.componentInstance.headerLabel = 'confirmation-modal.delete-subscription.header';
       modalRef.componentInstance.infoLabel = 'confirmation-modal.delete-subscription.info';
       modalRef.componentInstance.cancelLabel = 'confirmation-modal.delete-subscription.cancel';

From 2f5370a08569045239fc73076552d70dfcffe6d8 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 00:55:46 +0100
Subject: [PATCH 03/24] Fixed accessibility issues related to dso selectors

- Fixed header ordering
- Fixed input field not having a description what it does (because the header isn't always shown I decided to use aria-labels instead of regular labels)
---
 .../dso-selector/dso-selector/dso-selector.component.html   | 1 +
 .../dso-selector/dso-selector/dso-selector.component.ts     | 5 +++++
 .../create-community-parent-selector.component.html         | 6 +++---
 .../create-item-parent-selector.component.html              | 2 +-
 .../dso-selector-modal-wrapper.component.html               | 2 +-
 .../edit-item-selector/edit-item-selector.component.html    | 2 +-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
index c4f5dbc4cd..295165d171 100644
--- a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
+++ b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
@@ -2,6 +2,7 @@
     <input type="search"
            class="form-control"
            (click)="$event.stopPropagation();"
+           [attr.aria-label]="'dso-selector.placeholder' | translate: { type: typesString }"
            placeholder="{{'dso-selector.placeholder' | translate: { type: typesString } }}"
            [formControl]="input" ngbAutofocus (keyup.enter)="selectSingleResult()">
 </div>
diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts b/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts
index 503e4c4412..4590e05363 100644
--- a/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts
+++ b/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts
@@ -75,6 +75,11 @@ export class DSOSelectorComponent implements OnInit, OnDestroy {
    */
   @Input() sort: SortOptions;
 
+  /**
+   * The id that should be given to the input box, this is required for accessibility reasons
+   */
+  @Input() searchBoxId: string | null = null;
+
   // list of allowed selectable dsoTypes
   typesString: string;
 
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
index a13be63880..8ae146b42c 100644
--- a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
@@ -6,14 +6,14 @@
     </div>
     <div class="modal-body">
         <button class="btn btn-outline-primary btn-lg btn-block" (click)="selectObject(undefined)">{{'dso-selector.create.community.top-level' | translate}}</button>
-        <h3 class="position-relative py-1 my-3 font-weight-normal">
+        <div class="h3 position-relative py-1 my-3 font-weight-normal">
             <hr>
             <div id="create-community-or-separator" class="text-center position-absolute w-100">
                 <span class="px-4 bg-white">{{'dso-selector.create.community.or-divider' | translate}}</span>
             </div>
-        </h3>
+        </div>
 
-        <h5 class="px-2">{{'dso-selector.create.community.sub-level' | translate}}</h5>
+        <span class="h5 px-2">{{'dso-selector.create.community.sub-level' | translate}}</span>
         <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
     </div>
 </div>
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
index 5fccd58f48..5288f08e02 100644
--- a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
@@ -5,7 +5,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
+    <span *ngIf="header" class="h5 px-2">{{header | translate}}</span>
     <ds-authorized-collection-selector [currentDSOId]="dsoRD?.payload.uuid"
                                        [entityType]="entityType"
                                        [types]="selectorTypes"
diff --git a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html
index 54044f5d79..6d3d45cb3d 100644
--- a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html
@@ -5,7 +5,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
+    <span *ngIf="header" class="h5 px-2">{{header | translate}}</span>
     <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
   </div>
 </div>
diff --git a/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
index 85d8797e66..999a96e730 100644
--- a/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
@@ -5,7 +5,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
+    <span *ngIf="header" class="h5 px-2">{{header | translate}}</span>
     <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" (onSelect)="selectObject($event)"></ds-dso-selector>
   </div>
 </div>

From 086c5463a8c1e84145139dd2ad084749d275a62a Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 00:56:30 +0100
Subject: [PATCH 04/24] Removed invisible buttons on the CommunityListComponent
 & fixed content displacement when expanding com/col

---
 .../community-list.component.html             | 46 +++++++++----------
 .../community-list.component.scss             |  4 ++
 .../community-list.component.spec.ts          | 35 +++++++-------
 .../community-list.component.ts               |  1 +
 src/assets/i18n/en.json5                      |  4 ++
 5 files changed, 51 insertions(+), 39 deletions(-)
 create mode 100644 src/app/community-list-page/community-list/community-list.component.scss

diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
index de67607bb4..5e3d6c5fa5 100644
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -4,9 +4,9 @@
   <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
                  class="example-tree-node show-more-node">
     <div class="btn-group">
-      <button type="button" class="btn btn-default" cdkTreeNodeToggle>
-        <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
-      </button>
+      <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
+        <span class="fa fa-chevron-right"></span>
+      </span>
       <div class="align-middle pt-2">
         <button *ngIf="!(dataSource.loading$ | async)" (click)="getNextPage(node)"
            class="btn btn-outline-primary btn-sm" role="button">
@@ -24,15 +24,18 @@
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                  class="example-tree-node expandable-node">
     <div class="btn-group">
-      <button type="button" class="btn btn-default" cdkTreeNodeToggle
-              [title]="'toggle ' + dsoNameService.getName(node.payload)"
-              [attr.aria-label]="'toggle ' + dsoNameService.getName(node.payload)"
+      <button *ngIf="hasChild(null, node) | async" type="button" class="btn btn-default" cdkTreeNodeToggle
+              [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
               (click)="toggleExpanded(node)"
-              [ngClass]="(hasChild(null, node)| async) ? 'visible' : 'invisible'"
-              [attr.data-test]="(hasChild(null, node)| async) ? 'expand-button' : ''">
+              data-test="expand-button">
         <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
               aria-hidden="true"></span>
+        <span class="sr-only">{{ (node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) } }}</span>
       </button>
+      <!--Don't render the button when non-expandable otherwise it's still accessible, instead render this placeholder-->
+      <span *ngIf="!(hasChild(null, node) | async)" aria-hidden="true" class="btn btn-default invisible">
+        <span class="fa fa-chevron-right"></span>
+      </span>
       <div class="d-flex flex-row">
         <span class="align-middle pt-2 lead">
           <a [routerLink]="node.route" class="lead">
@@ -46,10 +49,9 @@
     <ds-truncatable [id]="node.id">
       <div class="text-muted" cdkTreeNodePadding>
         <div class="d-flex" *ngIf="node.payload.shortDescription">
-          <button type="button" class="btn btn-default invisible">
-            <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
-                  aria-hidden="true"></span>
-          </button>
+          <span aria-hidden="true" class="btn btn-default invisible">
+            <span class="fa fa-chevron-right"></span>
+          </span>
           <ds-truncatable-part [id]="node.id" [minLines]="3">
             <span>{{node.payload.shortDescription}}</span>
           </ds-truncatable-part>
@@ -58,10 +60,9 @@
     </ds-truncatable>
     <div class="d-flex" *ngIf="node===loadingNode && dataSource.loading$ | async"
          cdkTreeNodePadding>
-      <button type="button" class="btn btn-default invisible">
-        <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
-              aria-hidden="true"></span>
-      </button>
+      <span aria-hidden="true" class="btn btn-default invisible">
+        <span class="fa fa-chevron-right"></span>
+      </span>
       <ds-themed-loading class="ds-themed-loading"></ds-themed-loading>
     </div>
   </cdk-tree-node>
@@ -69,9 +70,9 @@
   <cdk-tree-node *cdkTreeNodeDef="let node; when: !(hasChild && isShowMore)" cdkTreeNodePadding
                  class="example-tree-node childless-node">
     <div class="btn-group">
-      <button type="button" class="btn btn-default" cdkTreeNodeToggle>
-        <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
-      </button>
+      <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
+        <span class="fa fa-chevron-right"></span>
+      </span>
       <h6 class="align-middle pt-2">
         <a [routerLink]="node.route" class="lead">
           {{ dsoNameService.getName(node.payload) }}
@@ -81,10 +82,9 @@
     <ds-truncatable [id]="node.id">
       <div class="text-muted" cdkTreeNodePadding>
         <div class="d-flex" *ngIf="node.payload.shortDescription">
-          <button type="button" class="btn btn-default invisible">
-            <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
-                  aria-hidden="true"></span>
-          </button>
+          <span aria-hidden="true" class="btn btn-default invisible">
+            <span class="fa fa-chevron-right"></span>
+          </span>
           <ds-truncatable-part [id]="node.id" [minLines]="3">
             <span>{{node.payload.shortDescription}}</span>
           </ds-truncatable-part>
diff --git a/src/app/community-list-page/community-list/community-list.component.scss b/src/app/community-list-page/community-list/community-list.component.scss
new file mode 100644
index 0000000000..2e33380a29
--- /dev/null
+++ b/src/app/community-list-page/community-list/community-list.component.scss
@@ -0,0 +1,4 @@
+::ng-deep .fa-chevron-right::before {
+  display: block;
+  width: 16px;
+}
diff --git a/src/app/community-list-page/community-list/community-list.component.spec.ts b/src/app/community-list-page/community-list/community-list.component.spec.ts
index fb47f4994d..cec1b555ab 100644
--- a/src/app/community-list-page/community-list/community-list.component.spec.ts
+++ b/src/app/community-list-page/community-list/community-list.component.spec.ts
@@ -5,7 +5,7 @@ import { CommunityListService, showMoreFlatNode, toFlatNode } from '../community
 import { CdkTreeModule } from '@angular/cdk/tree';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Community } from '../../core/shared/community.model';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
@@ -300,12 +300,14 @@ describe('CommunityListComponent', () => {
 
   describe('second top community node is expanded and has more children (collections) than page size of collection', () => {
     describe('children of second top com are added (page-limited pageSize 2)', () => {
-      let allNodes;
+      let allNodes: DebugElement[];
       beforeEach(fakeAsync(() => {
-        const chevronExpand = fixture.debugElement.queryAll(By.css('.expandable-node button'));
-        const chevronExpandSpan = fixture.debugElement.queryAll(By.css('.expandable-node button span'));
-        if (chevronExpandSpan[1].nativeElement.classList.contains('fa-chevron-right')) {
-          chevronExpand[1].nativeElement.click();
+        const toggleButtons: DebugElement[] = fixture.debugElement.queryAll(By.css('.expandable-node button'));
+        const toggleButtonText: DebugElement = toggleButtons[1].query(By.css('span'));
+        expect(toggleButtonText).not.toBeNull();
+
+        if (toggleButtonText.nativeElement.classList.contains('fa-chevron-right')) {
+          toggleButtons[1].nativeElement.click();
           tick();
           fixture.detectChanges();
         }
@@ -315,17 +317,18 @@ describe('CommunityListComponent', () => {
         allNodes = [...expandableNodesFound, ...childlessNodesFound];
       }));
       it('tree contains 2 (page-limited) top com, 2 (page-limited) coll of 2nd top com, a show more for those page-limited coll and show more for page-limited top com', () => {
-        mockTopFlatnodesUnexpanded.slice(0, 2).map((topFlatnode: FlatNode) => {
-          expect(allNodes.find((foundEl) => {
-            return (foundEl.nativeElement.textContent.trim() === topFlatnode.name);
-          })).toBeTruthy();
-        });
-        mockCollectionsPage1.map((coll) => {
-          expect(allNodes.find((foundEl) => {
-            return (foundEl.nativeElement.textContent.trim() === coll.name);
-          })).toBeTruthy();
-        });
+        const allNodeNames: string[] = allNodes.map((node: DebugElement) => node.nativeElement.innerText.trim());
         expect(allNodes.length).toEqual(4);
+        const flatNodes: string[] = mockTopFlatnodesUnexpanded.slice(0, 2).map((flatNode: FlatNode) => flatNode.name);
+        for (const flatNode of flatNodes) {
+          expect(allNodeNames).toContain(flatNode);
+        }
+        expect(flatNodes.length).toBe(2);
+        const page1CollectionNames: string[] = mockCollectionsPage1.map((collection: Collection) => collection.name);
+        for (const collectionName of page1CollectionNames) {
+          expect(allNodeNames).toContain(collectionName);
+        }
+        expect(page1CollectionNames.length).toBe(2);
         const showMoreEl = fixture.debugElement.queryAll(By.css('.show-more-node'));
         expect(showMoreEl.length).toEqual(2);
       });
diff --git a/src/app/community-list-page/community-list/community-list.component.ts b/src/app/community-list-page/community-list/community-list.component.ts
index 6b5c6578e1..031a422469 100644
--- a/src/app/community-list-page/community-list/community-list.component.ts
+++ b/src/app/community-list-page/community-list/community-list.component.ts
@@ -19,6 +19,7 @@ import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 @Component({
   selector: 'ds-community-list',
   templateUrl: './community-list.component.html',
+  styleUrls: ['./community-list.component.scss'],
 })
 export class CommunityListComponent implements OnInit, OnDestroy {
 
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index d7c50b1a60..4f25ae0d0f 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1168,6 +1168,10 @@
 
   "communityList.showMore": "Show More",
 
+  "communityList.expand": "Expand {{ name }}",
+
+  "communityList.collapse": "Collapse {{ name }}",
+
   "community.create.head": "Create a Community",
 
   "community.create.notifications.success": "Successfully created the Community",

From 3c1243f6f183d12fa39a15984077086f41c264fc Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 01:31:34 +0100
Subject: [PATCH 05/24] Fixed search filters having empty input buttons

---
 .../org-unit-input-suggestions.component.html              | 4 +++-
 .../org-unit-input-suggestions.component.spec.ts           | 2 ++
 .../person-input-suggestions.component.html                | 4 +++-
 .../dso-input-suggestions.component.html                   | 4 +++-
 .../filter-input-suggestions.component.html                | 7 +++----
 .../input-suggestions/input-suggestions.component.html     | 4 +++-
 .../validation-suggestions.component.html                  | 4 +++-
 .../search-range-filter/search-range-filter.component.html | 7 +++----
 8 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html
index c4e31d3d81..58f39b8d0b 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html
@@ -11,7 +11,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    <input type="submit" class="d-none"/>
+    <button class="sr-only" type="submit">
+        {{'search.filters.search.submit' | translate}}
+    </button>
     <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
         <div class="dropdown-list">
             <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts
index 0981d895ec..a13af0067a 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts
@@ -2,6 +2,7 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { OrgUnitInputSuggestionsComponent } from './org-unit-input-suggestions.component';
 import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 
 let component: OrgUnitInputSuggestionsComponent;
 let fixture: ComponentFixture<OrgUnitInputSuggestionsComponent>;
@@ -21,6 +22,7 @@ describe('OrgUnitInputSuggestionsComponent', () => {
       declarations: [OrgUnitInputSuggestionsComponent],
       imports: [
         FormsModule,
+        TranslateModule.forRoot(),
       ],
       providers: [
       ],
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html
index b1621dbd2c..53260ceaa3 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html
@@ -12,7 +12,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    <input type="submit" class="d-none"/>
+    <button class="sr-only" type="submit">
+        {{'search.filters.search.submit' | translate}}
+    </button>
     <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
         <div class="dropdown-list">
             <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html b/src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html
index 7515b830b9..17e7197261 100644
--- a/src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html
+++ b/src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html
@@ -9,7 +9,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    <input type="submit" class="d-none"/>
+    <button class="sr-only" type="submit">
+        {{'search.filters.search.submit' | translate}}
+    </button>
     <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
         <div class="dropdown-list">
             <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
index 726dc9ca0e..d29163e09a 100644
--- a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
+++ b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
@@ -20,10 +20,9 @@
            [ngModelOptions]="{standalone: true}" autocomplete="off"
     />
   </ng-template>
-  <label class="d-none">
-    <input type="submit"/>
-    <span>{{'search.filters.search.submit' | translate}}</span>
-  </label>
+  <button class="sr-only" type="submit">
+    {{'search.filters.search.submit' | translate}}
+  </button>
   <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
     <div class="dropdown-list">
       <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/shared/input-suggestions/input-suggestions.component.html b/src/app/shared/input-suggestions/input-suggestions.component.html
index f137982fee..188dcbcb6a 100644
--- a/src/app/shared/input-suggestions/input-suggestions.component.html
+++ b/src/app/shared/input-suggestions/input-suggestions.component.html
@@ -9,7 +9,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    <input type="submit" class="d-none"/>
+    <button class="sr-only" type="submit">
+        {{'search.filters.search.submit' | translate}}
+    </button>
     <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
         <div class="dropdown-list">
             <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html b/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html
index d6e2ead6ea..c5d71e33fd 100644
--- a/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html
+++ b/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html
@@ -10,7 +10,9 @@
          [placeholder]="placeholder"
          ng-model-options="{standalone: true}"
          autocomplete="off">
-  <input type="submit" class="d-none"/>
+  <button class="sr-only" type="submit">
+    {{'search.filters.search.submit' | translate}}
+  </button>
   <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
     <div class="dropdown-list">
       <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
index 251e5ac420..6d4ba44920 100644
--- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
@@ -26,10 +26,9 @@
                     />
                 </label>
             </div>
-            <label class="d-none">
-                <input type="submit" class="d-none"/>
-                <span>{{'search.filters.search.submit' | translate}}</span>
-            </label>
+            <button class="sr-only" type="submit">
+                {{'search.filters.search.submit' | translate}}
+            </button>
         </form>
 
         <ng-container *ngIf="shouldShowSlider()">

From d876fadd2a79de5f4919eb10bf92d9e695708a0d Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 01:57:48 +0100
Subject: [PATCH 06/24] Fixed accessibility issues on
 SubmissionImportExternalSearchbarComponent

- Fixed input not describing itself
- Put the items from the dropdown in an ul
- Fixed broken aria labels
- Removed titles who where identical to the displayed value
---
 ...n-import-external-searchbar.component.html | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
index 535395e534..040987d37b 100644
--- a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
+++ b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
@@ -1,25 +1,28 @@
 <div *ngIf="(isXsOrSm$ | async)" class="input-group mb-2">
-  <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' |translate}}" aria-label="" aria-describedby="">
+  <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' | translate}}" [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
 </div>
 <div class="input-group mb-5">
-  <input *ngIf="!(isXsOrSm$ | async)" type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' |translate}}" aria-label="" aria-describedby="">
-  <div [ngClass]="{'input-group-append': !(isXsOrSm$ | async)}" ngbDropdown role="group" aria-label="">
-    <button class="btn btn-outline-secondary w-fx" title="{{'submission.import-external.search.source.hint' |translate}}" ngbDropdownToggle>{{'submission.import-external.source.' + selectedElement?.name | translate}}</button>
-    <div ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100"
+  <input *ngIf="!(isXsOrSm$ | async)" type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' | translate}}" [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
+  <div [ngClass]="{'input-group-append': !(isXsOrSm$ | async)}" ngbDropdown role="group">
+    <button [attr.aria-label]="'submission.import-external.search.source.hint' |translate"
+            class="btn btn-outline-secondary w-fx"
+            title="{{'submission.import-external.search.source.hint' |translate}}"
+            ngbDropdownToggle>
+      {{'submission.import-external.source.' + selectedElement?.name | translate}}
+    </button>
+    <ul ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100"
       aria-haspopup="true"
-      aria-expanded="false"
-      aria-labelledby="scrollableDropdownMenuButton">
-      <div class="scrollable-menu"
-        aria-labelledby="scrollableDropdownMenuButton"
+      aria-expanded="false">
+      <li class="scrollable-menu"
         infiniteScroll
         [infiniteScrollDistance]="2"
         [infiniteScrollThrottle]="50"
         (scrolled)="onScroll()"
         [scrollWindow]="false">
-        <button ngbDropdownItem class="dropdown-item text-truncate" title="{{'submission.import-external.source.' + source?.name | translate}}" (click)="makeSourceSelection(source)" *ngFor="let source of sourceList">{{'submission.import-external.source.' + source?.name | translate}}</button>
+        <button ngbDropdownItem class="dropdown-item text-truncate" (click)="makeSourceSelection(source)" *ngFor="let source of sourceList">{{'submission.import-external.source.' + source?.name | translate}}</button>
         <div ngbDropdownItem class="scrollable-dropdown-loading text-center" *ngIf="sourceListLoading"><p>{{'submission.import-external.source.loading' | translate}}</p></div>
-      </div>
-    </div>
-    <button type="button" class="btn btn-primary" [title]="(searchString === '')?('submission.import-external.search.button.hint' | translate):('submission.import-external.search.button' | translate)" [disabled]="searchString === ''" (click)="search()">{{'submission.import-external.search.button' | translate}}</button>
+      </li>
+    </ul>
+    <button type="button" class="btn btn-primary" [title]="(searchString === '')?('submission.import-external.search.button.hint' | translate):''" [disabled]="searchString === ''" (click)="search()">{{'submission.import-external.search.button' | translate}}</button>
   </div>
 </div>

From b8e040138874757581f178bcdee57f75982bf027 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 02:08:47 +0100
Subject: [PATCH 07/24] Fix header ordering

---
 src/app/access-control/bulk-access/bulk-access.component.html | 1 +
 .../admin-import-batch-page/batch-import-page.component.html  | 4 ++--
 .../metadata-registry/metadata-registry.component.html        | 2 +-
 .../metadata-schema-form/metadata-schema-form.component.html  | 4 ++--
 .../metadata-field-form/metadata-field-form.component.html    | 4 ++--
 .../metadata-schema/metadata-schema.component.html            | 4 ++--
 src/app/health-page/health-page.component.html                | 2 +-
 src/app/profile-page/profile-page.component.html              | 1 +
 8 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/app/access-control/bulk-access/bulk-access.component.html b/src/app/access-control/bulk-access/bulk-access.component.html
index 382caf85f4..c164cc5c31 100644
--- a/src/app/access-control/bulk-access/bulk-access.component.html
+++ b/src/app/access-control/bulk-access/bulk-access.component.html
@@ -1,4 +1,5 @@
 <div class="container">
+  <h1>{{ 'admin.access-control.bulk-access.title' | translate }}</h1>
   <ds-bulk-access-browse [listId]="listId"></ds-bulk-access-browse>
   <div class="clearfix mb-3"></div>
   <ds-bulk-access-settings #dsBulkSettings ></ds-bulk-access-settings>
diff --git a/src/app/admin/admin-import-batch-page/batch-import-page.component.html b/src/app/admin/admin-import-batch-page/batch-import-page.component.html
index 1092443436..c51ee7597c 100644
--- a/src/app/admin/admin-import-batch-page/batch-import-page.component.html
+++ b/src/app/admin/admin-import-batch-page/batch-import-page.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <h2 id="header">{{'admin.batch-import.page.header' | translate}}</h2>
+  <h1 id="header">{{'admin.batch-import.page.header' | translate}}</h1>
   <p>{{'admin.batch-import.page.help' | translate}}</p>
   <p *ngIf="dso">
     selected collection: <b>{{getDspaceObjectName()}}</b>&nbsp;
@@ -28,7 +28,7 @@
   <small class="form-text text-muted">
     {{'admin.batch-import.page.toggle.help' | translate}}
   </small>
-  
+
 
   <ds-file-dropzone-no-uploader
     *ngIf="isUpload"
diff --git a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
index 35bffad185..b39e4b8381 100644
--- a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
@@ -2,7 +2,7 @@
     <div class="metadata-registry row">
         <div class="col-12">
 
-            <h2 id="header" class="border-bottom pb-2">{{'admin.registries.metadata.head' | translate}}</h2>
+            <h1 id="header" class="border-bottom pb-2">{{'admin.registries.metadata.head' | translate}}</h1>
 
             <p id="description" class="pb-2">{{'admin.registries.metadata.description' | translate}}</p>
 
diff --git a/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.html b/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.html
index a4a4613565..85d1e90692 100644
--- a/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.html
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.html
@@ -1,11 +1,11 @@
 <div *ngIf="registryService.getActiveMetadataSchema() | async; then editheader; else createHeader"></div>
 
 <ng-template #createHeader>
-    <h4>{{messagePrefix + '.create' | translate}}</h4>
+    <h2>{{messagePrefix + '.create' | translate}}</h2>
 </ng-template>
 
 <ng-template #editheader>
-    <h4>{{messagePrefix + '.edit' | translate}}</h4>
+    <h2>{{messagePrefix + '.edit' | translate}}</h2>
 </ng-template>
 
 <ds-form [formId]="formId"
diff --git a/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.html b/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.html
index 4e29fbb6e8..44b6bfb697 100644
--- a/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.html
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.html
@@ -1,11 +1,11 @@
 <div *ngIf="registryService.getActiveMetadataField() | async; then editheader; else createHeader"></div>
 
 <ng-template #createHeader>
-    <h4>{{messagePrefix + '.create' | translate}}</h4>
+    <h2>{{messagePrefix + '.create' | translate}}</h2>
 </ng-template>
 
 <ng-template #editheader>
-    <h4>{{messagePrefix + '.edit' | translate}}</h4>
+    <h2>{{messagePrefix + '.edit' | translate}}</h2>
 </ng-template>
 
 <ds-form [formId]="formId"
diff --git a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
index 2fe53dfcd8..d51b8a8233 100644
--- a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
@@ -2,7 +2,7 @@
   <div class="metadata-schema row">
     <div class="col-12" *ngVar="(metadataSchema$ | async) as schema">
 
-      <h2 id="header" class="border-bottom pb-2">{{'admin.registries.schema.head' | translate}}: "{{schema?.prefix}}"</h2>
+      <h1 id="header" class="border-bottom pb-2">{{'admin.registries.schema.head' | translate}}: "{{schema?.prefix}}"</h1>
 
       <p id="description" class="pb-2">{{'admin.registries.schema.description' | translate:{ namespace: schema?.namespace } }}</p>
 
@@ -10,7 +10,7 @@
         [metadataSchema]="schema"
         (submitForm)="forceUpdateFields()"></ds-metadata-field-form>
 
-      <h3>{{'admin.registries.schema.fields.head' | translate}}</h3>
+      <h2>{{'admin.registries.schema.fields.head' | translate}}</h2>
 
       <ng-container *ngVar="(metadataFields$ | async)?.payload as fields">
         <ds-pagination
diff --git a/src/app/health-page/health-page.component.html b/src/app/health-page/health-page.component.html
index 15a8787894..14c577a8ee 100644
--- a/src/app/health-page/health-page.component.html
+++ b/src/app/health-page/health-page.component.html
@@ -1,5 +1,5 @@
 <div class="container" *ngIf="(healthResponseInitialised | async) && (healthInfoResponseInitialised | async)">
-  <h2>{{'health-page.heading' | translate}}</h2>
+  <h1>{{'health-page.heading' | translate}}</h1>
   <div *ngIf="(healthResponse | async) && (healthInfoResponse | async)">
     <ul ngbNav #nav="ngbNav" [activeId]="'status'" class="nav-tabs">
       <li [ngbNavItem]="'status'" role="presentation">
diff --git a/src/app/profile-page/profile-page.component.html b/src/app/profile-page/profile-page.component.html
index 187096b391..fd7246c08b 100644
--- a/src/app/profile-page/profile-page.component.html
+++ b/src/app/profile-page/profile-page.component.html
@@ -1,5 +1,6 @@
 <ng-container *ngVar="(user$ | async) as user">
   <div class="container" *ngIf="user">
+    <h1>{{'profile.title' | translate}}</h1>
     <ng-container *ngIf="isResearcherProfileEnabled() | async">
       <h2 class="mb-4">{{'profile.head' | translate}}</h2>
       <div class="card mb-4">

From 32e3141b1909d3e6e9e7d1ab55adc4f003f1bbf7 Mon Sep 17 00:00:00 2001
From: FrancescoMolinaro <francesco.molinaro@4science.com>
Date: Fri, 19 Jan 2024 08:57:12 +0100
Subject: [PATCH 08/24] add logo max costraints

---
 .../comcol/comcol-page-logo/comcol-page-logo.component.html   | 2 +-
 .../comcol/comcol-page-logo/comcol-page-logo.component.scss   | 4 ++++
 src/styles/_custom_variables.scss                             | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html b/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html
index 057c358223..3608c7153e 100644
--- a/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html
+++ b/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html
@@ -1,3 +1,3 @@
-<div *ngIf="logo" class="dso-logo mb-3">
+<div *ngIf="logo" class="dso-logo mb-3 logo-container">
     <img [src]="logo._links.content.href" class="img-fluid" [attr.alt]="alternateText ? alternateText : null" (error)="errorHandler($event)"/>
 </div>
diff --git a/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.scss b/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.scss
index e69de29bb2..f0dd5436d9 100644
--- a/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.scss
+++ b/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.scss
@@ -0,0 +1,4 @@
+.logo-container {
+  max-width: var(--ds-comcol-logo-max-width);
+  max-height: var(--ds-comcol-logo-max-height);
+}
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index c10a875f57..0e54ec200c 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -102,4 +102,7 @@
   --ds-dso-edit-lang-width: 90px;
   --ds-dso-edit-actions-width: 173px;
   --ds-dso-edit-virtual-tooltip-min-width: 300px;
+
+  --ds-comcol-logo-max-width: 500px;
+  --ds-comcol-logo-max-height: 500px;
 }

From c02b46ca7d4c5baad8c8902bd7a6dc56c4ee8a0b Mon Sep 17 00:00:00 2001
From: Jens Vannerum <jens.vannerum@atmire.com>
Date: Thu, 4 Jan 2024 17:29:28 +0100
Subject: [PATCH 09/24] 110088: new implementation for keyboard support in
 dropdowns

---
 ...dynamic-scrollable-dropdown.component.html |   5 +-
 .../dynamic-scrollable-dropdown.component.ts  | 131 +++++++++++++-----
 2 files changed, 103 insertions(+), 33 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
index 3be79b20f3..d840b696cc 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -27,7 +27,7 @@
            (keydown)="selectOnKeyDown($event, sdRef)">
   </div>
 
-  <div ngbDropdownMenu
+  <div #dropdownMenu ngbDropdownMenu
        class="dropdown-menu scrollable-dropdown-menu w-100"
        [attr.aria-label]="model.placeholder">
     <div class="scrollable-menu"
@@ -41,7 +41,8 @@
          [scrollWindow]="false">
 
       <button class="dropdown-item disabled" *ngIf="optionsList && optionsList.length == 0">{{'form.no-results' | translate}}</button>
-      <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList"
+      <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList; let i = index"
+              [class.active]="i === selectedIndex"
               (keydown.enter)="onSelect(listEntry); sdRef.close()" (mousedown)="onSelect(listEntry); sdRef.close()"
               title="{{ listEntry.display }}" role="option"
               [attr.id]="listEntry.display == (currentValue|async) ? ('combobox_' + id + '_selected') : null">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
index a4ca210193..5e0538a171 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
@@ -1,8 +1,17 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 
 import { Observable, of as observableOf } from 'rxjs';
-import { catchError, distinctUntilChanged, map, tap } from 'rxjs/operators';
+import { catchError, map, tap } from 'rxjs/operators';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 import { DynamicFormLayoutService, DynamicFormValidationService } from '@ng-dynamic-forms/core';
 
@@ -28,6 +37,8 @@ import { FormFieldMetadataValueObject } from '../../../models/form-field-metadat
   templateUrl: './dynamic-scrollable-dropdown.component.html'
 })
 export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyComponent implements OnInit {
+  @ViewChild('dropdownMenu', { read: ElementRef }) dropdownMenu: ElementRef;
+
   @Input() bindId = true;
   @Input() group: UntypedFormGroup;
   @Input() model: DynamicScrollableDropdownModel;
@@ -40,6 +51,9 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   public loading = false;
   public pageInfo: PageInfo;
   public optionsList: any;
+  public inputText: string = null;
+  public selectedIndex = 0;
+  public acceptableKeys = ['Space', 'NumpadMultiply', 'NumpadAdd', 'NumpadSubtract', 'NumpadDecimal', 'Semicolon', 'Equal', 'Comma', 'Minus', 'Period', 'Quote', 'Backquote'];
 
   constructor(protected vocabularyService: VocabularyService,
               protected cdr: ChangeDetectorRef,
@@ -54,32 +68,26 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
    */
   ngOnInit() {
     this.updatePageInfo(this.model.maxOptions, 1);
-    this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, this.pageInfo).pipe(
+    this.loadOptions();
+  }
+
+  loadOptions() {
+    this.loading = true;
+    this.vocabularyService.getVocabularyEntriesByValue(this.inputText, false, this.model.vocabularyOptions, this.pageInfo).pipe(
       getFirstSucceededRemoteDataPayload(),
-      catchError(() => observableOf(buildPaginatedList(
-        new PageInfo(),
-        []
-        ))
-      ))
-      .subscribe((list: PaginatedList<VocabularyEntry>) => {
-        this.optionsList = list.page;
-        if (this.model.value) {
-          this.setCurrentValue(this.model.value, true);
-        }
-
-        this.updatePageInfo(
-          list.pageInfo.elementsPerPage,
-          list.pageInfo.currentPage,
-          list.pageInfo.totalElements,
-          list.pageInfo.totalPages
-        );
-        this.cdr.detectChanges();
-      });
-
-    this.group.get(this.model.id).valueChanges.pipe(distinctUntilChanged())
-      .subscribe((value) => {
-        this.setCurrentValue(value);
-      });
+      catchError(() => observableOf(buildPaginatedList(new PageInfo(), []))),
+      tap(() => this.loading = false)
+    ).subscribe((list: PaginatedList<VocabularyEntry>) => {
+      this.optionsList = list.page;
+      this.updatePageInfo(
+        list.pageInfo.elementsPerPage,
+        list.pageInfo.currentPage,
+        list.pageInfo.totalElements,
+        list.pageInfo.totalPages
+      );
+      this.selectedIndex = 0;
+      this.cdr.detectChanges();
+    });
   }
 
   /**
@@ -94,10 +102,30 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   openDropdown(sdRef: NgbDropdown) {
     if (!this.model.readOnly) {
       this.group.markAsUntouched();
+      this.inputText = null;
+      this.updatePageInfo(this.model.maxOptions, 1);
+      this.loadOptions();
       sdRef.open();
     }
   }
 
+  navigateDropdown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown') {
+      this.selectedIndex = Math.min(this.selectedIndex + 1, this.optionsList.length - 1);
+    } else if (event.key === 'ArrowUp') {
+      this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+    }
+    this.scrollToSelected();
+  }
+
+  scrollToSelected() {
+    const dropdownItems = this.dropdownMenu.nativeElement.querySelectorAll('.dropdown-item');
+    const selectedItem = dropdownItems[this.selectedIndex];
+    if (selectedItem) {
+      selectedItem.scrollIntoView({ block: 'nearest' });
+    }
+  }
+
   /**
    * KeyDown handler to allow toggling the dropdown via keyboard
    * @param event KeyboardEvent
@@ -106,15 +134,56 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   selectOnKeyDown(event: KeyboardEvent, sdRef: NgbDropdown) {
     const keyName = event.key;
 
-    if (keyName === ' ' || keyName === 'Enter') {
+    if (keyName === 'Enter') {
       event.preventDefault();
       event.stopPropagation();
-      sdRef.toggle();
+      if (sdRef.isOpen()) {
+        this.onSelect(this.optionsList[this.selectedIndex]);
+        sdRef.close();
+      } else {
+        sdRef.open();
+      }
     } else if (keyName === 'ArrowDown' || keyName === 'ArrowUp') {
-      this.openDropdown(sdRef);
+      event.preventDefault();
+      event.stopPropagation();
+      this.navigateDropdown(event);
+    } else if (keyName === 'Backspace') {
+      this.removeKeyFromInput();
+    } else if (this.isAcceptableKey(keyName)) {
+      this.addKeyToInput(keyName);
     }
   }
 
+  addKeyToInput(keyName: string) {
+    if (this.inputText === null) {
+      this.inputText = '';
+    }
+    this.inputText += keyName;
+    // When a new key is added, we need to reset the page info
+    this.updatePageInfo(this.model.maxOptions, 1);
+    this.loadOptions();
+  }
+
+  removeKeyFromInput() {
+    if (this.inputText !== null) {
+      this.inputText = this.inputText.slice(0, -1);
+      if (this.inputText === '') {
+        this.inputText = null;
+      }
+      this.loadOptions();
+    }
+  }
+
+
+  isAcceptableKey(keyPress: string): boolean {
+    // allow all letters and numbers
+    if (keyPress.length === 1 && keyPress.match(/^[a-zA-Z0-9]*$/)) {
+      return true;
+    }
+    // Some other characters like space, dash, etc should be allowed as well
+    return this.acceptableKeys.includes(keyPress);
+  }
+
   /**
    * Loads any new entries
    */
@@ -127,7 +196,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
         this.pageInfo.totalElements,
         this.pageInfo.totalPages
       );
-      this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, this.pageInfo).pipe(
+      this.vocabularyService.getVocabularyEntriesByValue(this.inputText, false, this.model.vocabularyOptions, this.pageInfo).pipe(
         getFirstSucceededRemoteDataPayload(),
         catchError(() => observableOf(buildPaginatedList(
           new PageInfo(),

From d3c788a4e13ef1ccb23c64c025fcbcfa8af1c21f Mon Sep 17 00:00:00 2001
From: FrancescoMolinaro <francesco.molinaro@4science.com>
Date: Tue, 23 Jan 2024 09:16:06 +0100
Subject: [PATCH 10/24] adapt solution to prevent img overflow

---
 .../comcol/comcol-page-logo/comcol-page-logo.component.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.scss b/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.scss
index f0dd5436d9..db6e7daecf 100644
--- a/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.scss
+++ b/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.scss
@@ -1,4 +1,4 @@
-.logo-container {
+img {
   max-width: var(--ds-comcol-logo-max-width);
   max-height: var(--ds-comcol-logo-max-height);
 }

From d9e25882cebfa37a20553408f8863e907f96411a Mon Sep 17 00:00:00 2001
From: FrancescoMolinaro <francesco.molinaro@4science.com>
Date: Tue, 23 Jan 2024 09:17:18 +0100
Subject: [PATCH 11/24] remove class from template

---
 .../comcol/comcol-page-logo/comcol-page-logo.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html b/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html
index 3608c7153e..057c358223 100644
--- a/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html
+++ b/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html
@@ -1,3 +1,3 @@
-<div *ngIf="logo" class="dso-logo mb-3 logo-container">
+<div *ngIf="logo" class="dso-logo mb-3">
     <img [src]="logo._links.content.href" class="img-fluid" [attr.alt]="alternateText ? alternateText : null" (error)="errorHandler($event)"/>
 </div>

From f82ba8c5ad4fc5d64eacd0f0f0f5e9d50de5e2c8 Mon Sep 17 00:00:00 2001
From: FrancescoMolinaro <francesco.molinaro@4science.com>
Date: Thu, 25 Jan 2024 09:00:05 +0100
Subject: [PATCH 12/24] add width 100% to prevent overflow on mobile

---
 .../comcol/comcol-page-logo/comcol-page-logo.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html b/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html
index 057c358223..cb3feecbe5 100644
--- a/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html
+++ b/src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html
@@ -1,3 +1,3 @@
 <div *ngIf="logo" class="dso-logo mb-3">
-    <img [src]="logo._links.content.href" class="img-fluid" [attr.alt]="alternateText ? alternateText : null" (error)="errorHandler($event)"/>
+    <img [src]="logo._links.content.href" class="w-100 img-fluid" [attr.alt]="alternateText ? alternateText : null" (error)="errorHandler($event)"/>
 </div>

From 4b7798fcc75e46df54f36e6a59371965b8bad862 Mon Sep 17 00:00:00 2001
From: Sascha Szott <szott@gmx.de>
Date: Thu, 25 Jan 2024 16:10:00 +0100
Subject: [PATCH 13/24] fixed typo

---
 src/assets/i18n/en.json5 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index d7c50b1a60..21635807c7 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1914,7 +1914,7 @@
 
   "info.feedback.page-label": "Page",
 
-  "info.feedback.page_help": "Tha page related to your feedback",
+  "info.feedback.page_help": "The page related to your feedback",
 
   "item.alerts.private": "This item is non-discoverable",
 

From f40639de8672b047038e0ddba9242b11864e2231 Mon Sep 17 00:00:00 2001
From: William Welling <wwelling@tamu.edu>
Date: Fri, 26 Jan 2024 15:56:35 -0600
Subject: [PATCH 14/24] Dedupe patch operations by op and path

---
 .../json-patch-operations.reducer.ts          | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/app/core/json-patch/json-patch-operations.reducer.ts b/src/app/core/json-patch/json-patch-operations.reducer.ts
index 5e00027edb..86edd339e8 100644
--- a/src/app/core/json-patch/json-patch-operations.reducer.ts
+++ b/src/app/core/json-patch/json-patch-operations.reducer.ts
@@ -351,7 +351,28 @@ function addOperationToList(body: JsonPatchOperationObject[], actionType, target
       newBody.push(makeOperationEntry({ op: JsonPatchOperationType.move, from: fromPath, path: targetPath }));
       break;
   }
-  return newBody;
+  return dedupeOperationEntries(newBody);
+}
+
+/**
+ * Dedupe operation entries by op and path. This prevents processing unnecessary patches in a single PATCH request.
+ *
+ * @param body JSON patch operation object entries
+ * @returns deduped JSON patch operation object entries
+ */
+function dedupeOperationEntries(body: JsonPatchOperationObject[]): JsonPatchOperationObject[] {
+  const ops = new Map<string, any>();
+  for (let i = body.length - 1; i >= 0; i--) {
+    const patch = body[i].operation;
+    const key = `${patch.op}-${patch.path}`;
+    if (!ops.has(key)) {
+      ops.set(key, patch);
+    } else {
+      body.splice(i, 1);
+    }
+  }
+
+  return body;
 }
 
 function makeOperationEntry(operation) {

From 1989a6c04237c39b69de3dc53f02a02b4cbafadb Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 03:10:06 +0100
Subject: [PATCH 15/24] Fixed accessibility issues with pagination button

- Replaced the h6 tags with the role heading
- Gave the gear button the roles in order to be detected as an expandable menu
- Replaced the dropdown structure to render a menu of listboxes
- Added the aria-selected attribute
---
 .../pagination/pagination.component.html      | 32 +++++++++++++------
 .../shared/pagination/pagination.component.ts |  4 +--
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/app/shared/pagination/pagination.component.html b/src/app/shared/pagination/pagination.component.html
index b608c0168a..47e1c14d46 100644
--- a/src/app/shared/pagination/pagination.component.html
+++ b/src/app/shared/pagination/pagination.component.html
@@ -7,15 +7,29 @@
       </div>
       <div class="col">
         <div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right">
-          <button class="btn btn-secondary" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate"><i class="fas fa-cog" aria-hidden="true"></i></button>
-          <div id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" ngbDropdownMenu>
-            <h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
-            <button class="dropdown-item" *ngFor="let item of pageSizeOptions" (click)="doPageSizeChange(item)"><i [ngClass]="{'invisible': item != (pageSize$|async)}" class="fas fa-check" aria-hidden="true"></i> {{item}} </button>
-            <ng-container *ngIf="!hideSortOptions">
-              <h6 class="dropdown-header">{{ 'pagination.sort-direction' | translate}}</h6>
-              <button class="dropdown-item" *ngFor="let direction of (sortDirections | dsKeys)" (click)="doSortDirectionChange(direction.value)"><i [ngClass]="{'invisible': direction.value !== (sortDirection$ |async)}" class="fas fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}} </button>
-            </ng-container>
-          </div>
+          <button class="btn btn-secondary" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog" aria-hidden="true"></i></button>
+          <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu" ngbDropdownMenu>
+            <li role="menuitem">
+              <span class="dropdown-header" id="pagination-control_results-per-page" role="heading">{{ 'pagination.results-per-page' | translate}}</span>
+              <ul aria-labelledby="pagination-control_results-per-page" class="list-unstyled" role="listbox">
+                <li *ngFor="let item of pageSizeOptions" role="option" [attr.aria-selected]="item === (pageSize$ | async)">
+                  <button (click)="doPageSizeChange(item)" class="dropdown-item">
+                    <i [ngClass]="{'invisible': item !== (pageSize$ | async) }" class="fas fa-check" aria-hidden="true"></i> {{item}}
+                  </button>
+                </li>
+              </ul>
+            </li>
+            <li *ngIf="!hideSortOptions" role="menuitem">
+              <span class="dropdown-header" id="pagination-control_sort-direction" role="heading">{{ 'pagination.sort-direction' | translate}}</span>
+              <ul aria-labelledby="pagination-control_sort-direction" class="list-unstyled" role="listbox">
+                <li *ngFor="let direction of (sortDirections | dsKeys)" [attr.aria-selected]="direction.value === (sortDirection$ | async)" role="option">
+                  <button class="dropdown-item" (click)="doSortDirectionChange(direction.value)">
+                    <i [ngClass]="{'invisible': direction.value !== (sortDirection$ |async)}" class="fas fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}}
+                  </button>
+                </li>
+              </ul>
+            </li>
+          </ul>
         </div>
         <ds-rss></ds-rss>
       </div>
diff --git a/src/app/shared/pagination/pagination.component.ts b/src/app/shared/pagination/pagination.component.ts
index 1bfc1dfa59..a838f51e69 100644
--- a/src/app/shared/pagination/pagination.component.ts
+++ b/src/app/shared/pagination/pagination.component.ts
@@ -167,7 +167,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
   /**
    * Number of items per page.
    */
-  public pageSize$;
+  public pageSize$: Observable<number>;
 
   /**
    * Declare SortDirection enumeration to use it in the template
@@ -188,7 +188,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
   /**
    * Name of the field that's used to sort by
    */
-  public sortField$;
+  public sortField$: Observable<string>;
   public defaultSortField = 'name';
 
   /**

From 8ab4f1c074e927838a4e8d0b02b6ffb52fdb9ded Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 03:13:01 +0100
Subject: [PATCH 16/24] Fixed accessibility issues on MetadataSchemaComponent

- Removed empty label of the select box and replaced it with an aria-label
- Fixed empty table header
---
 .../metadata-schema/metadata-schema.component.html  | 13 ++++++-------
 src/assets/i18n/en.json5                            |  6 ++++++
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
index d51b8a8233..de968d63f2 100644
--- a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
@@ -24,7 +24,7 @@
             <table id="metadata-fields" class="table table-striped table-hover">
               <thead>
               <tr>
-                <th></th>
+                <th><span class="sr-only">{{'admin.registries.schema.fields.table.selected' | translate}}</span></th>
                 <th scope="col">{{'admin.registries.schema.fields.table.id' | translate}}</th>
                 <th scope="col">{{'admin.registries.schema.fields.table.field' | translate}}</th>
                 <th scope="col">{{'admin.registries.schema.fields.table.scopenote' | translate}}</th>
@@ -33,12 +33,11 @@
               <tbody>
               <tr *ngFor="let field of fields?.page"
                   [ngClass]="{'table-primary' : isActive(field) | async}">
-                <td>
-                  <label class="mb-0">
-                    <input type="checkbox"
-                           [checked]="isSelected(field) | async"
-                           (change)="selectMetadataField(field, $event)">
-                  </label>
+                <td *ngVar="(isSelected(field) | async) as selected">
+                  <input type="checkbox"
+                         [attr.aria-label]="(selected ? 'admin.registries.schema.fields.deselect' : 'admin.registries.schema.fields.select') | translate"
+                         [checked]="selected"
+                         (change)="selectMetadataField(field, $event)">
                 </td>
                 <td class="selectable-row" (click)="editField(field)">{{field.id}}</td>
                 <td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}{{field.qualifier ? '.' + field.qualifier : ''}}</td>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 4f25ae0d0f..2a0b606da3 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -174,6 +174,10 @@
 
   "admin.registries.schema.description": "This is the metadata schema for \"{{namespace}}\".",
 
+  "admin.registries.schema.fields.select": "Select",
+
+  "admin.registries.schema.fields.deselect": "Deselect",
+
   "admin.registries.schema.fields.head": "Schema metadata fields",
 
   "admin.registries.schema.fields.no-items": "No metadata fields to show.",
@@ -182,6 +186,8 @@
 
   "admin.registries.schema.fields.table.field": "Field",
 
+  "admin.registries.schema.fields.table.selected": "Selected metadata fields",
+
   "admin.registries.schema.fields.table.id": "ID",
 
   "admin.registries.schema.fields.table.scopenote": "Scope Note",

From 54ef97d6070fab289ee02cd47535d58b0f64047c Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 03:29:04 +0100
Subject: [PATCH 17/24] Fixed accessibility issues on MetadataRegistryComponent

- Removed empty label of the select box and replaced it with an aria-label
- Fixed empty table header
---
 .../metadata-registry/metadata-registry.component.html      | 3 ++-
 src/assets/i18n/en.json5                                    | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
index b39e4b8381..d3be5df08e 100644
--- a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
@@ -19,7 +19,7 @@
                     <table id="metadata-schemas" class="table table-striped table-hover">
                         <thead>
                         <tr>
-                            <th scope="col"></th>
+                            <th scope="col"><span class="sr-only">{{'admin.registries.metadata.schemas.table.selected' | translate}}</span></th>
                             <th scope="col">{{'admin.registries.metadata.schemas.table.id' | translate}}</th>
                             <th scope="col">{{'admin.registries.metadata.schemas.table.namespace' | translate}}</th>
                             <th scope="col">{{'admin.registries.metadata.schemas.table.name' | translate}}</th>
@@ -34,6 +34,7 @@
                                            [checked]="isSelected(schema) | async"
                                            (change)="selectMetadataSchema(schema, $event)"
                                     >
+                                    <span class="sr-only">{{((isSelected(schema) | async) ? 'admin.registries.metadata.schemas.deselect' : 'admin.registries.metadata.schemas.select') | translate}}</span>
                                 </label>
                             </td>
                             <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.id}}</a></td>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 2a0b606da3..3df358ba9f 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -160,8 +160,14 @@
 
   "admin.registries.metadata.schemas.no-items": "No metadata schemas to show.",
 
+  "admin.registries.metadata.schemas.select": "Select",
+
+  "admin.registries.metadata.schemas.deselect": "Deselect",
+
   "admin.registries.metadata.schemas.table.delete": "Delete selected",
 
+  "admin.registries.metadata.schemas.table.selected": "Selected schemas",
+
   "admin.registries.metadata.schemas.table.id": "ID",
 
   "admin.registries.metadata.schemas.table.name": "Name",

From c30a2eea45c9ad2e6bc773a44c720c7490ea4de6 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 03:34:28 +0100
Subject: [PATCH 18/24] Fixed accessibility issues on BitstreamFormatsComponent

- Removed empty label of the select box and replaced it with an aria-label
- Fixed empty table header
---
 .../bitstream-formats/bitstream-formats.component.html      | 3 ++-
 src/assets/i18n/en.json5                                    | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
index 37323d41d0..894ef3dc7e 100644
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
@@ -19,7 +19,7 @@
           <table id="formats" class="table table-striped table-hover">
             <thead>
             <tr>
-              <th scope="col" [attr.aria-label]="'admin.registries.bitstream-formats.select' | translate"></th>
+              <th scope="col"><span class="sr-only">{{'admin.registries.bitstream-formats.table.selected' | translate}}</span></th>
               <th scope="col">{{'admin.registries.bitstream-formats.table.id' | translate}}</th>
               <th scope="col">{{'admin.registries.bitstream-formats.table.name' | translate}}</th>
               <th scope="col">{{'admin.registries.bitstream-formats.table.mimetype' | translate}}</th>
@@ -35,6 +35,7 @@
                          [checked]="isSelected(bitstreamFormat) | async"
                          (change)="selectBitStreamFormat(bitstreamFormat, $event)"
                   >
+                  <span class="sr-only">{{'admin.registries.bitstream-formats.select' | translate}}}</span>
                 </label>
               </td>
               <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.id}}</a></td>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 3df358ba9f..99eb310f95 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -128,6 +128,8 @@
 
   "admin.registries.bitstream-formats.table.name": "Name",
 
+  "admin.registries.bitstream-formats.table.selected": "Selected bitstream formats",
+
   "admin.registries.bitstream-formats.table.id": "ID",
 
   "admin.registries.bitstream-formats.table.return": "Back",
@@ -142,7 +144,9 @@
 
   "admin.registries.bitstream-formats.title": "Bitstream Format Registry",
 
-  "admin.registries.bitstream-formats.select": "Select bitstream format",
+  "admin.registries.bitstream-formats.select": "Select",
+
+  "admin.registries.bitstream-formats.deselect": "Deselect",
 
   "admin.registries.metadata.breadcrumbs": "Metadata registry",
 

From 07e89acab5b2ce718dc7e997047c2a53cf827c6d Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 04:44:22 +0100
Subject: [PATCH 19/24] Fixed accessibility issues on
 AccessControlFormContainerComponent

- Replaced invisible label in AccessControlArrayFormComponent that was only used for styling with span
- Fixed radio buttons not being part of a fieldset
- Fixed empty table header
---
 .../access-control-array-form.component.html  |  2 +-
 ...cess-control-form-container.component.html | 26 +++++++++----------
 .../collection-select.component.html          |  2 +-
 .../item-select/item-select.component.html    |  2 +-
 src/assets/i18n/en.json5                      |  4 +++
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
index e6ebabd707..2ec3b51219 100644
--- a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
+++ b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
@@ -88,7 +88,7 @@
       </div>
 
       <div>
-        <label>&nbsp;</label>
+        <span aria-hidden="true" class="mb-2 d-inline-block">&nbsp;</span>
         <div class="input-group">
 
           <button type="button" class="btn btn-outline-danger"
diff --git a/src/app/shared/access-control-form-container/access-control-form-container.component.html b/src/app/shared/access-control-form-container/access-control-form-container.component.html
index 23c62abc6c..ce0f5845c6 100644
--- a/src/app/shared/access-control-form-container/access-control-form-container.component.html
+++ b/src/app/shared/access-control-form-container/access-control-form-container.component.html
@@ -23,10 +23,10 @@
               </ui-switch>
             </div>
 
-            <div class="row mt-3">
-              <div class="col-12 col-md-3">
+            <fieldset class="row mt-3">
+              <legend class="h4 col-12 col-md-3">
                 {{ 'access-control-mode' | translate }}
-              </div>
+              </legend>
               <div class="col-12 col-md-8">
                 <div class="form-check">
                   <input class="form-check-input" type="radio"
@@ -47,7 +47,7 @@
                   </label>
                 </div>
               </div>
-            </div>
+            </fieldset>
           </div>
 
           <div>
@@ -78,10 +78,10 @@
             </div>
 
             <div *ngIf="showLimitToSpecificBitstreams" class="row mt-3">
-            <div class="col-12">
-              {{'access-control-limit-to-specific' | translate}}
-            </div>
-            <div class="col-12">
+            <fieldset class="col-12">
+              <legend class="h4">
+                {{'access-control-limit-to-specific' | translate}}
+              </legend>
               <div class="form-check">
                 <input class="form-check-input" type="radio"
                        name="changesLimit" id="processAll" value="all"
@@ -111,14 +111,14 @@
 
                 </label>
               </div>
-            </div>
+            </fieldset>
             </div>
           </div>
 
-          <div class="row mt-3">
-            <div class="col-12 col-md-3">
+          <fieldset class="row mt-3">
+            <legend class="h4 col-12 col-md-3">
               {{'access-control-mode' | translate}}
-            </div>
+            </legend>
             <div class="col-12 col-md-8">
               <div class="form-check">
                 <input class="form-check-input" type="radio"
@@ -139,7 +139,7 @@
                 </label>
               </div>
             </div>
-          </div>
+          </fieldset>
 
           <div>
             <h3 class="h4 mt-3">{{'access-control-access-conditions' | translate}}</h3>
diff --git a/src/app/shared/object-select/collection-select/collection-select.component.html b/src/app/shared/object-select/collection-select/collection-select.component.html
index 7d4dadb2e3..135579aff7 100644
--- a/src/app/shared/object-select/collection-select/collection-select.component.html
+++ b/src/app/shared/object-select/collection-select/collection-select.component.html
@@ -11,7 +11,7 @@
       <table id="collection-select" class="table table-striped table-hover">
         <thead>
           <tr>
-            <th aria-hidden="true"></th>
+            <th><span class="sr-only">{{'collection.select.table.selected' | translate}}</span></th>
             <th scope="col">{{'collection.select.table.title' | translate}}</th>
           </tr>
         </thead>
diff --git a/src/app/shared/object-select/item-select/item-select.component.html b/src/app/shared/object-select/item-select/item-select.component.html
index 8cdc8ffb2d..d1d454b2e4 100644
--- a/src/app/shared/object-select/item-select/item-select.component.html
+++ b/src/app/shared/object-select/item-select/item-select.component.html
@@ -11,7 +11,7 @@
       <table id="item-select" class="table table-striped table-hover">
         <thead>
         <tr>
-          <th aria-hidden="true"></th>
+          <th><span class="sr-only">{{'item.select.table.selected' | translate}}</span></th>
           <th *ngIf="!hideCollection" scope="col">{{'item.select.table.collection' | translate}}</th>
           <th scope="col">{{'item.select.table.author' | translate}}</th>
           <th scope="col">{{'item.select.table.title' | translate}}</th>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 99eb310f95..9d4c7ace27 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1120,6 +1120,8 @@
 
   "collection.select.empty": "No collections to show",
 
+  "collection.select.table.selected": "Selected collections",
+
   "collection.select.table.select": "Select collection",
 
   "collection.select.table.deselect": "Deselect collection",
@@ -2554,6 +2556,8 @@
 
   "item.select.empty": "No items to show",
 
+  "item.select.table.selected": "Selected items",
+
   "item.select.table.select": "Select item",
 
   "item.select.table.deselect": "Deselect item",

From 7f0264ed1ced6120ad50c1a97313b6f28fd33135 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 15:25:44 +0100
Subject: [PATCH 20/24] Fixed remaining community/collection page accessibility
 issues

- Hide fontawesome icons for screen readers
- Replaced dangling labels with spans and added more descriptive aria label to browse link
- Fixed empty label/missing header in edit resource policy table
- Added missing comcol logo al text
- Refactored dso-edit-menu-section to not display empty link buttons and duplicate titles
---
 .../collection-page.component.html            |  2 +-
 .../collection-metadata.component.html        |  8 +++---
 .../community-page.component.html             |  2 +-
 .../delete-community-page.component.html      |  6 ++---
 .../comcol-form/comcol-form.component.html    |  9 ++++---
 .../edit-comcol-page.component.html           |  4 +--
 .../dso-edit-menu-section.component.html      | 26 ++++++++-----------
 .../dso-edit-menu-section.component.spec.ts   | 11 +++-----
 src/app/shared/form/form.component.html       |  5 ++--
 .../resource-policy-entry.component.html      |  8 +++---
 .../resource-policies.component.html          | 10 +++----
 .../upload/uploader/uploader.component.html   |  2 +-
 .../upload/uploader/uploader.component.ts     |  5 ++++
 src/assets/i18n/en.json5                      |  8 ++++++
 14 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/src/app/collection-page/collection-page.component.html b/src/app/collection-page/collection-page.component.html
index 3cbd08f132..9a5414952f 100644
--- a/src/app/collection-page/collection-page.component.html
+++ b/src/app/collection-page/collection-page.component.html
@@ -13,7 +13,7 @@
                   <!-- Collection logo -->
                   <ds-comcol-page-logo *ngIf="logoRD$"
                                    [logo]="(logoRD$ | async)?.payload"
-                                   [alternateText]="'Collection Logo'">
+                                   [alternateText]="'collection.logo' | translate">
                   </ds-comcol-page-logo>
 
                   <!-- Handle -->
diff --git a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
index ffd8f71343..1cf40159ec 100644
--- a/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
@@ -1,17 +1,17 @@
 <div class="container-fluid mb-2" *ngVar="(itemTemplateRD$ | async) as itemTemplateRD">
-  <label>{{ 'collection.edit.template.label' | translate}}</label>
+  <span class="d-inline-block mb-2">{{ 'collection.edit.template.label' | translate}}</span>
   <div class="button-row space-children-mr">
     <button *ngIf="!itemTemplateRD?.payload" class="btn btn-success" (click)="addItemTemplate()">
-      <i class="fas fa-plus"></i>
+      <i class="fas fa-plus" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.add-button" | translate}}</span>
     </button>
     <button *ngIf="itemTemplateRD?.payload" class="btn btn-danger" (click)="deleteItemTemplate()">
-      <i class="fas fa-trash-alt"></i>
+      <i class="fas fa-trash-alt" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.delete-button" | translate}}</span>
     </button>
     <button *ngIf="itemTemplateRD?.payload" class="btn btn-primary"
             [routerLink]="'/collections/' + (dsoRD$ | async)?.payload.uuid + '/itemtemplate'">
-      <i class="fas fa-edit"></i>
+      <i class="fas fa-edit" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.edit-button" | translate}}</span>
     </button>
   </div>
diff --git a/src/app/community-page/community-page.component.html b/src/app/community-page/community-page.component.html
index 671bf28fd1..194fb747d0 100644
--- a/src/app/community-page/community-page.component.html
+++ b/src/app/community-page/community-page.component.html
@@ -7,7 +7,7 @@
           <!-- Community name -->
           <ds-comcol-page-header [name]="dsoNameService.getName(communityPayload)"></ds-comcol-page-header>
           <!-- Community logo -->
-          <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'Community Logo'">
+          <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'community.logo' | translate">
           </ds-comcol-page-logo>
           <!-- Handle -->
           <ds-themed-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
diff --git a/src/app/community-page/delete-community-page/delete-community-page.component.html b/src/app/community-page/delete-community-page/delete-community-page.component.html
index ef5fdade73..1e71fb7f49 100644
--- a/src/app/community-page/delete-community-page/delete-community-page.component.html
+++ b/src/app/community-page/delete-community-page/delete-community-page.component.html
@@ -7,11 +7,11 @@
                 <div class="form-group row">
                     <div class="col text-right space-children-mr">
                         <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
-                            <i class="fas fa-times"></i> {{'community.delete.cancel' | translate}}
+                            <i class="fas fa-times" aria-hidden="true"></i> {{'community.delete.cancel' | translate}}
                         </button>
                         <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
-                            <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'community.delete.processing' | translate}}</span>
-                            <span *ngIf="!(processing$ | async)"><i class="fas fa-trash"></i> {{'community.delete.confirm' | translate}}</span>
+                            <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin' aria-hidden="true"></i> {{'community.delete.processing' | translate}}</span>
+                            <span *ngIf="!(processing$ | async)"><i class="fas fa-trash" aria-hidden="true"></i> {{'community.delete.confirm' | translate}}</span>
                         </button>
                     </div>
                 </div>
diff --git a/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html b/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
index b7b3d344b1..c79dba42b7 100644
--- a/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
+++ b/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
@@ -1,13 +1,13 @@
 <div class="container-fluid">
   <div class="row">
-    <div class="col-12 d-inline-block">
-      <label>{{type.value + '.edit.logo.label' | translate}}</label>
+    <div class="col-12 d-inline-block mb-1">
+      <span>{{type.value + '.edit.logo.label' | translate}}</span>
     </div>
     <ng-container *ngVar="(dso?.logo | async)?.payload as logo">
       <div class="col-12 d-inline-block alert" [ngClass]="{'alert-danger': markLogoForDeletion}" id="logo-section" *ngIf="logo">
         <div class="row">
           <div class="col-8 d-inline-block">
-            <ds-comcol-page-logo [logo]="logo"></ds-comcol-page-logo>
+            <ds-comcol-page-logo [alternateText]="type.value + '.logo.alt'" [logo]="logo"></ds-comcol-page-logo>
           </div>
           <div class="col-4 d-inline-block">
             <div *ngIf="logo" class="btn-group btn-group-sm float-right" role="group">
@@ -27,6 +27,7 @@
       </div>
       <div *ngIf="!logo" class="col-12 d-inline-block">
         <ds-uploader  *ngIf="initializedUploaderOptions | async"
+                      [ariaLabel]="type.value + '.browse.logo'"
                       [dropMsg]="type.value + '.edit.logo.upload'"
                       [dropOverDocumentMsg]="type.value + '.edit.logo.upload'"
                       [enableDragOverDocument]="true"
@@ -43,6 +44,6 @@
          [displayCancel]="false"
          (submitForm)="onSubmit()">
   <button before (click)="back.emit()" class="btn btn-outline-secondary" type="button">
-    <i class="fas fa-arrow-left"></i> {{ type.value + '.edit.return' | translate }}
+    <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ type.value + '.edit.return' | translate }}
   </button>
 </ds-form>
diff --git a/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html b/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
index d7f15ce06b..a8ca674c26 100644
--- a/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
+++ b/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
@@ -7,7 +7,7 @@
           <a class="btn btn-danger"
              [routerLink]="((type === 'community') ? '/communities/' : '/collections/') + (dsoRD$ | async)?.payload.uuid + '/delete'"
              data-test="delete-button">
-            <i class="fas fa-trash"></i> {{type + '.edit.delete' | translate}}</a>
+            <i class="fas fa-trash" aria-hidden="true"></i> {{type + '.edit.delete' | translate}}</a>
         </div>
       </div>
       <div class="pt-2">
@@ -27,7 +27,7 @@
           </div>
           <div class="col-12 text-right">
             <a *ngIf="!hideReturnButton" [routerLink]="getPageUrl((dsoRD$ | async)?.payload)" class="btn btn-outline-secondary">
-              <i class="fas fa-arrow-left"></i> {{ type + '.edit.return' | translate }}
+              <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ type + '.edit.return' | translate }}
             </a>
           </div>
         </div>
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html
index 16fda1caa8..bbc388a601 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html
@@ -1,25 +1,21 @@
 <div *ngIf="!canActivate" class="dso-button-menu mb-1"
-     [title]="itemModel.text | translate"
      [ngbTooltip]="itemModel.text | translate">
-    <a *ngIf="!section.model.disabled" class="d-flex flex-row flex-nowrap"
-       [routerLink]="itemModel.link"
-       href="javascript:void(0);">
-        <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" [disabled]="section.model.disabled">
-            <i class="fas fa-{{section.icon}} fa-fw"></i>
-        </button>
+    <a *ngIf="!section.model.disabled" class="btn btn-dark btn-sm"
+       [routerLink]="itemModel.link">
+        <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
+        <span class="sr-only">{{itemModel.text | translate}}</span>
     </a>
-    <div *ngIf="section.model.disabled" class="d-flex flex-row flex-nowrap">
-        <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" [disabled]="section.model.disabled">
-            <i class="fas fa-{{section.icon}} fa-fw"></i>
-        </button>
-    </div>
+    <button *ngIf="section.model.disabled" class="btn btn-dark btn-sm" [disabled]="true">
+        <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
+        <span class="sr-only">{{itemModel.text | translate}}</span>
+    </button>
 </div>
 
 <div *ngIf="canActivate" class="dso-button-menu mb-1"
-     [title]="itemModel.text | translate"
      [ngbTooltip]="itemModel.text | translate">
-    <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" [disabled]="section.model.disabled"
+    <button class="btn btn-dark btn-sm" [disabled]="section.model.disabled"
             (click)="activate($event)">
-        <i class="fas fa-{{section.icon}} fa-fw"></i>
+        <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
+        <span class="sr-only">{{itemModel.text | translate}}</span>
     </button>
 </div>
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.spec.ts b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.spec.ts
index f0815c5415..bdf121f799 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.spec.ts
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.spec.ts
@@ -96,7 +96,7 @@ describe('DsoEditMenuSectionComponent', () => {
     });
     describe('when the section model in a disabled link or text', () => {
       it('should show just the button', () => {
-        const textButton = fixture.debugElement.query(By.css('div div button'));
+        const textButton = fixture.debugElement.query(By.css('div a'));
         expect(textButton.nativeElement.innerHTML).toContain('fa-' + iconString);
       });
     });
@@ -144,7 +144,7 @@ describe('DsoEditMenuSectionComponent', () => {
 
   });
 
-  describe('link model', () => {
+  describe('when the section model in a non disabled link', () => {
     initAsync(dummySectionLink, menuService);
     beforeEach(() => {
       spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(observableOf([]));
@@ -154,11 +154,8 @@ describe('DsoEditMenuSectionComponent', () => {
       fixture.detectChanges();
     });
 
-    describe('when the section model in a non disabled link', () => {
-      it('should show a link element with the button in it', () => {
-        const link = fixture.debugElement.query(By.css('a'));
-        expect(link.nativeElement.innerHTML).toContain('button');
-      });
+    it('should show the link element', () => {
+      expect(fixture.debugElement.query(By.css('a'))).not.toBeNull();
     });
 
   });
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
index 1b27c9d308..5b39068ae2 100644
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -58,11 +58,12 @@
         <div class="col text-right space-children-mr">
           <ng-content select="[before]"></ng-content>
             <button *ngIf="displayCancel" type="reset" class="btn btn-outline-secondary" (click)="reset()">
-              <i class="fa fa-times"></i> {{cancelLabel | translate}}
+              <i class="fa fa-times" aria-hidden="true"></i> {{cancelLabel | translate}}
             </button>
             <ng-content select="[between]"></ng-content>
             <button *ngIf="displaySubmit" type="submit" class="btn btn-primary" (click)="onSubmit()"
-                    [disabled]="!(isValid() | async)"><i class="fas fa-save"></i> {{submitLabel | translate}}
+                    [disabled]="!(isValid() | async)">
+              <i class="fas fa-save" aria-hidden="true"></i> {{submitLabel | translate}}
             </button>
             <ng-content select="[after]"></ng-content>
         </div>
diff --git a/src/app/shared/resource-policies/entry/resource-policy-entry.component.html b/src/app/shared/resource-policies/entry/resource-policy-entry.component.html
index a14dde366e..9ad019c8c6 100644
--- a/src/app/shared/resource-policies/entry/resource-policy-entry.component.html
+++ b/src/app/shared/resource-policies/entry/resource-policy-entry.component.html
@@ -5,8 +5,8 @@
            [id]="entry.id"
            [ngModel]="entry.checked"
            (ngModelChange)="this.toggleCheckbox.emit($event);">
-    <label class="custom-control-label" [for]="entry.id"
-           [attr.aria-label]="(entry.checked ? 'resource-policies.table.headers.deselect' : 'resource-policies.table.headers.select') | translate">
+    <label class="custom-control-label" [for]="entry.id">
+      <span class="sr-only">{{(entry.checked ? 'resource-policies.table.headers.deselect' : 'resource-policies.table.headers.select') | translate}}</span>
     </label>
   </div>
 </td>
@@ -30,12 +30,12 @@
     <button class="btn btn-outline-primary btn-sm"
             [title]="'resource-policies.table.headers.edit.policy' | translate"
             (click)="redirectToResourcePolicyEditPage()">
-      <i class="fas fa-edit fa-fw"></i>
+      <i class="fas fa-edit fa-fw" aria-hidden="true"></i>
     </button>
     <button *ngIf="(groupName$ | async) !== undefined" class="btn btn-outline-primary btn-sm"
             [title]="'resource-policies.table.headers.edit.group' | translate"
             (click)="redirectToGroupEditPage()">
-      <i class="fas fa-users fa-fw"></i>
+      <i class="fas fa-users fa-fw" aria-hidden="true"></i>
     </button>
   </div>
 </td>
diff --git a/src/app/shared/resource-policies/resource-policies.component.html b/src/app/shared/resource-policies/resource-policies.component.html
index b3dda9091d..485166aabf 100644
--- a/src/app/shared/resource-policies/resource-policies.component.html
+++ b/src/app/shared/resource-policies/resource-policies.component.html
@@ -17,10 +17,10 @@
                       [title]="'resource-policies.delete.btn.title' | translate"
                       (click)="deleteSelectedResourcePolicies()">
                 <span *ngIf="(isProcessingDelete() | async)">
-                  <i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}
+                  <i class='fas fa-circle-notch fa-spin' aria-hidden="true"></i> {{'submission.workflow.tasks.generic.processing' | translate}}
                 </span>
                 <span *ngIf="!(isProcessingDelete() | async)">
-                  <i class='fas fa-trash-alt fa-fw'></i>
+                  <i class='fas fa-trash-alt fa-fw' aria-hidden="true"></i>
                   {{'resource-policies.delete.btn' | translate}}
                 </span>
               </button>
@@ -28,7 +28,7 @@
                       [disabled]="(isProcessingDelete() | async)"
                       [title]="'resource-policies.add.for.' + resourceType | translate"
                       (click)="redirectToResourcePolicyCreatePage()">
-                <i class='fas fa-plus'></i>
+                <i class='fas fa-plus' aria-hidden="true"></i>
                 {{'resource-policies.add.button' | translate}}
               </button>
             </div>
@@ -42,8 +42,8 @@
                    class="custom-control-input"
                    [id]="'selectAll_' + resourceUUID"
                    (change)="selectAllCheckbox($event)">
-            <label class="custom-control-label" [for]="'selectAll_' + resourceUUID"
-                   [attr.aria-label]="(selectAllBtn.checked ? 'resource-policies.table.headers.deselect-all' : 'resource-policies.table.headers.select-all') | translate">
+            <label class="custom-control-label" [for]="'selectAll_' + resourceUUID">
+              <span class="sr-only">{{(selectAllBtn.checked ? 'resource-policies.table.headers.deselect-all' : 'resource-policies.table.headers.select-all') | translate}}</span>
             </label>
           </div>
         </th>
diff --git a/src/app/shared/upload/uploader/uploader.component.html b/src/app/shared/upload/uploader/uploader.component.html
index 88dc5926e4..b1fd8199d8 100644
--- a/src/app/shared/upload/uploader/uploader.component.html
+++ b/src/app/shared/upload/uploader/uploader.component.html
@@ -23,7 +23,7 @@
           <i class="fas fa-upload" aria-hidden="true"></i>
           {{dropMsg | translate}}{{'uploader.or' | translate}}
           <label for="inputFileUploader-{{uploaderId}}" class="btn btn-link m-0 p-0 ml-1" tabindex="0" (keyup.enter)="$event.stopImmediatePropagation(); fileInput.click()">
-            <span role="button" [attr.aria-label]="'uploader.browse' | translate">{{'uploader.browse' | translate}}</span>
+            <span role="button" [attr.aria-label]="ariaLabel | translate">{{'uploader.browse' | translate}}</span>
           </label>
           <input #fileInput id="inputFileUploader-{{uploaderId}}" class="d-none" type="file" ng2FileSelect [uploader]="uploader" multiple tabindex="0" />
         </span>
diff --git a/src/app/shared/upload/uploader/uploader.component.ts b/src/app/shared/upload/uploader/uploader.component.ts
index ef4ce4ee45..2072cb4c83 100644
--- a/src/app/shared/upload/uploader/uploader.component.ts
+++ b/src/app/shared/upload/uploader/uploader.component.ts
@@ -53,6 +53,11 @@ export class UploaderComponent {
    */
   @Input() uploadProperties: UploaderProperties;
 
+  /**
+   * The aria label to describe what kind of files need to be uploaded
+   */
+  @Input() ariaLabel: string;
+
   /**
    * The function to call when upload is completed
    */
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 9d4c7ace27..bd2f320525 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -908,6 +908,8 @@
 
   "claimed-declined-task-search-result-list-element.title": "Declined, sent back to Review Manager's workflow",
 
+  "collection.browse.logo": "Browse for a collection logo",
+
   "collection.create.head": "Create a Collection",
 
   "collection.create.notifications.success": "Successfully created the Collection",
@@ -1104,6 +1106,8 @@
 
   "collection.listelement.badge": "Collection",
 
+  "collection.logo": "Collection logo",
+
   "collection.page.browse.recent.head": "Recent Submissions",
 
   "collection.page.browse.recent.empty": "No items to show",
@@ -1190,6 +1194,8 @@
 
   "communityList.collapse": "Collapse {{ name }}",
 
+  "community.browse.logo": "Browse for a community logo",
+
   "community.create.head": "Create a Community",
 
   "community.create.notifications.success": "Successfully created the Community",
@@ -1266,6 +1272,8 @@
 
   "community.listelement.badge": "Community",
 
+  "community.logo": "Community logo",
+
   "comcol-role.edit.no-group": "None",
 
   "comcol-role.edit.create": "Create",

From 8ad1b4b0d4a88b437feb43b20d3ca0c608d77715 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 15:33:07 +0100
Subject: [PATCH 21/24] Fixed feedback form page accessibility issue

- The form used a fieldset tag instead of a form tag
---
 .../feedback-form.component.html              | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/app/info/feedback/feedback-form/feedback-form.component.html b/src/app/info/feedback/feedback-form/feedback-form.component.html
index 25be4ba445..a5de058854 100644
--- a/src/app/info/feedback/feedback-form/feedback-form.component.html
+++ b/src/app/info/feedback/feedback-form/feedback-form.component.html
@@ -1,45 +1,43 @@
 <div class="row row-offcanvas row-offcanvas-right">
   <div class="col-xs-12 col-sm-12 col-md-9">
-    <form class="primary" [formGroup]="feedbackForm" (ngSubmit)="createFeedback()">
-      <h1>{{ 'info.feedback.head' | translate }}</h1>
-      <p>{{ 'info.feedback.info' | translate }}</p>
-      <fieldset class="col p-0">
-        <div class="row">
-          <div class="control-group col-sm-12">
-            <label class="control-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label>
-            <input id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus" title="{{ 'info.feedback.email_help' | translate }}">
-            <small class="text-muted">{{ 'info.feedback.email_help' | translate }}</small>
-          </div>
+    <h1>{{ 'info.feedback.head' | translate }}</h1>
+    <p>{{ 'info.feedback.info' | translate }}</p>
+    <form [formGroup]="feedbackForm" (ngSubmit)="createFeedback()" class="col p-0">
+      <div class="row">
+        <div class="control-group col-sm-12">
+          <label class="control-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label>
+          <input id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus" title="{{ 'info.feedback.email_help' | translate }}">
+          <small class="text-muted">{{ 'info.feedback.email_help' | translate }}</small>
         </div>
+      </div>
 
-        <ng-container *ngIf="feedbackForm.controls.email.invalid && (feedbackForm.controls.email.dirty || feedbackForm.controls.email.touched)"
-          class="alert">
-          <ds-error *ngIf="feedbackForm.controls.email.errors?.required" message="{{'info.feedback.error.email.required' | translate}}"></ds-error>
-          <ds-error *ngIf="feedbackForm.controls.email.errors?.pattern" message="{{'info.feedback.error.email.required' | translate}}"></ds-error>
-        </ng-container>
-        <div class="row">
-          <div class="control-group col-sm-12">
-            <label class="control-label" for="comments">{{ 'info.feedback.comments' | translate }}:&nbsp;</label>
-            <textarea id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
-          </div>
+      <ng-container *ngIf="feedbackForm.controls.email.invalid && (feedbackForm.controls.email.dirty || feedbackForm.controls.email.touched)"
+        class="alert">
+        <ds-error *ngIf="feedbackForm.controls.email.errors?.required" message="{{'info.feedback.error.email.required' | translate}}"></ds-error>
+        <ds-error *ngIf="feedbackForm.controls.email.errors?.pattern" message="{{'info.feedback.error.email.required' | translate}}"></ds-error>
+      </ng-container>
+      <div class="row">
+        <div class="control-group col-sm-12">
+          <label class="control-label" for="comments">{{ 'info.feedback.comments' | translate }}:&nbsp;</label>
+          <textarea id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
         </div>
-        <ng-container *ngIf="feedbackForm.controls.message.invalid && (feedbackForm.controls.message.dirty || feedbackForm.controls.message.touched)"
-          class="alert">
-          <ds-error *ngIf="feedbackForm.controls.message.errors?.required" message="{{'info.feedback.error.message.required' | translate}}"></ds-error>
-        </ng-container>
-        <div class="row">
-          <div class="control-group col-sm-12">
-            <label class="control-label" for="page">{{ 'info.feedback.page-label' | translate }}&nbsp;</label>
-            <input id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus" title="{{ 'info.feedback.page_help' | translate }}">
-            <small class="text-muted">{{ 'info.feedback.page_help' | translate }}</small>
-          </div>
+      </div>
+      <ng-container *ngIf="feedbackForm.controls.message.invalid && (feedbackForm.controls.message.dirty || feedbackForm.controls.message.touched)"
+        class="alert">
+        <ds-error *ngIf="feedbackForm.controls.message.errors?.required" message="{{'info.feedback.error.message.required' | translate}}"></ds-error>
+      </ng-container>
+      <div class="row">
+        <div class="control-group col-sm-12">
+          <label class="control-label" for="page">{{ 'info.feedback.page-label' | translate }}&nbsp;</label>
+          <input id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus" title="{{ 'info.feedback.page_help' | translate }}">
+          <small class="text-muted">{{ 'info.feedback.page_help' | translate }}</small>
         </div>
-        <div class="row py-2">
-          <div class="control-group col-sm-12 text-right">
-            <button [disabled]="!feedbackForm.valid" class="btn btn-primary" name="submit" type="submit">{{ 'info.feedback.send' | translate }}</button>
-          </div>
+      </div>
+      <div class="row py-2">
+        <div class="control-group col-sm-12 text-right">
+          <button [disabled]="!feedbackForm.valid" class="btn btn-primary" name="submit" type="submit">{{ 'info.feedback.send' | translate }}</button>
         </div>
-      </fieldset>
+      </div>
     </form>
   </div>
 </div>

From e36bf645f4848171d3301e61155a30dac58f9770 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 16:01:46 +0100
Subject: [PATCH 22/24] Fixed edit metadata page accessibility issue

- Hide fontawesome icons for screen readers
- Added missing aria-label to metadata field input
---
 .../dso-edit-metadata.component.html            | 17 ++++++++++-------
 .../metadata-field-selector.component.html      |  5 +++--
 src/assets/i18n/en.json5                        |  4 ++++
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
index 24c3dc5cd7..8fb676a724 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
@@ -2,23 +2,23 @@
   <div class="button-row top d-flex my-2 space-children-mr ml-gap">
     <button class="mr-auto btn btn-success" id="dso-add-btn" [disabled]="form.newValue || (saving$ | async)"
             [title]="dsoType + '.edit.metadata.add-button' | translate"
-            (click)="add()"><i class="fas fa-plus"></i>
+            (click)="add()"><i class="fas fa-plus" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.add-button' | translate }}</span>
     </button>
     <button class="btn btn-warning ml-1" id="dso-reinstate-btn" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
             [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
-            (click)="reinstate()"><i class="fas fa-undo-alt"></i>
+            (click)="reinstate()"><i class="fas fa-undo-alt" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.reinstate-button' | translate }}</span>
     </button>
     <button class="btn btn-primary ml-1" id="dso-save-btn" [disabled]="!hasChanges || (saving$ | async)"
             [title]="dsoType + '.edit.metadata.save-button' | translate"
-            (click)="submit()"><i class="fas fa-save"></i>
+            (click)="submit()"><i class="fas fa-save" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.save-button' | translate }}</span>
     </button>
     <button class="btn btn-danger ml-1" id="dso-discard-btn" *ngIf="!isReinstatable"
             [title]="dsoType + '.edit.metadata.discard-button' | translate"
             [disabled]="!hasChanges || (saving$ | async)"
-            (click)="discard()"><i class="fas fa-times"></i>
+            (click)="discard()"><i class="fas fa-times" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.discard-button' | translate }}</span>
     </button>
   </div>
@@ -74,16 +74,19 @@
     <div class="mt-2 float-right space-children-mr ml-gap">
       <button class="btn btn-warning" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
               [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
-              (click)="reinstate()"><i class="fas fa-undo-alt"></i> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
+              (click)="reinstate()">
+        <i class="fas fa-undo-alt" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
       </button>
       <button class="btn btn-primary" [disabled]="!hasChanges || (saving$ | async)"
               [title]="dsoType + '.edit.metadata.save-button' | translate"
-              (click)="submit()"><i class="fas fa-save"></i> {{ dsoType + '.edit.metadata.save-button' | translate }}
+              (click)="submit()">
+        <i class="fas fa-save" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.save-button' | translate }}
       </button>
       <button class="btn btn-danger" *ngIf="!isReinstatable"
               [title]="dsoType + '.edit.metadata.discard-button' | translate"
               [disabled]="!hasChanges || (saving$ | async)"
-              (click)="discard()"><i class="fas fa-times"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
+              (click)="discard()">
+        <i class="fas fa-times" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
       </button>
     </div>
   </div>
diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html
index 4c310bd81b..3f5af76051 100644
--- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html
@@ -1,6 +1,7 @@
 <div class="w-100 position-relative">
   <input type="text" #mdFieldInput
          class="form-control" [ngClass]="{ 'is-invalid': showInvalid }"
+         [attr.aria-label]="(dsoType + '.edit.metadata.metadatafield') | translate"
          [value]="mdField"
          [formControl]="input"
          (focusin)="query$.next(mdField)"
@@ -10,9 +11,9 @@
   <div class="autocomplete dropdown-menu" [ngClass]="{'show': (mdFieldOptions$ | async)?.length > 0}">
     <div class="dropdown-list">
       <div *ngFor="let mdFieldOption of (mdFieldOptions$ | async)">
-        <a href="javascript:void(0);" class="d-block dropdown-item" (click)="select(mdFieldOption)">
+        <button class="d-block dropdown-item" (click)="select(mdFieldOption)">
           <span [innerHTML]="mdFieldOption"></span>
-        </a>
+        </button>
       </div>
     </div>
   </div>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index bd2f320525..44c9184d3c 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2172,6 +2172,8 @@
 
   "item.edit.metadata.headers.value": "Value",
 
+  "item.edit.metadata.metadatafield": "Edit field",
+
   "item.edit.metadata.metadatafield.error": "An error occurred validating the metadata field",
 
   "item.edit.metadata.metadatafield.invalid": "Please choose a valid metadata field",
@@ -2696,6 +2698,8 @@
 
   "itemtemplate.edit.metadata.headers.value": "Value",
 
+  "itemtemplate.edit.metadata.metadatafield": "Edit field",
+
   "itemtemplate.edit.metadata.metadatafield.error": "An error occurred validating the metadata field",
 
   "itemtemplate.edit.metadata.metadatafield.invalid": "Please choose a valid metadata field",

From 9e29cfb68d617f6316d4882608a50f4e6039bea9 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Wed, 20 Dec 2023 21:18:56 +0100
Subject: [PATCH 23/24] Fixed user authentication/registration accessibility
 issue

- Added the correct autocomplete value
- Removed dangling labels, because aria labels already describe those input fields & we can't use ids in this component because otherwise there are duplicate ids on the /login page
---
 .../forgot-password-form.component.html                  | 8 ++++----
 .../forgot-password-form.component.spec.ts               | 8 ++++++--
 .../profile-page-metadata-form.component.ts              | 8 ++++++--
 .../profile-page-security-form.component.ts              | 9 ++++++---
 src/app/profile-page/profile-page.component.html         | 3 +--
 .../methods/password/log-in-password.component.html      | 6 ++----
 src/assets/i18n/en.json5                                 | 4 +---
 7 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
index 5fb0006279..189d0bee40 100644
--- a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
+++ b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
@@ -1,13 +1,13 @@
 <div class="container" *ngIf="(registration$ |async)">
-    <h3 class="mb-4">{{'forgot-password.form.head' | translate}}</h3>
+    <h1 class="mb-4">{{'forgot-password.form.head' | translate}}</h1>
     <div class="card mb-4">
         <div class="card-header">{{'forgot-password.form.identification.header' | translate}}</div>
         <div class="card-body">
             <div class="row">
                 <div class="col-12">
-                    <label class="font-weight-bold"
-                           for="email">{{'forgot-password.form.identification.email' | translate}}</label>
-                    <span id="email">{{(registration$ |async).email}}</span></div>
+                    <span class="font-weight-bold">{{'forgot-password.form.identification.email' | translate}} </span>
+                    <span [attr.data-test]="'email' | dsBrowserOnly">{{(registration$ |async).email}}</span>
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.spec.ts b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.spec.ts
index 92d72d83df..05f5df72f1 100644
--- a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.spec.ts
+++ b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.spec.ts
@@ -21,6 +21,7 @@ import {
   createSuccessfulRemoteDataObject$
 } from '../../shared/remote-data.utils';
 import { CoreState } from '../../core/core-state.model';
+import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
 
 describe('ForgotPasswordFormComponent', () => {
   let comp: ForgotPasswordFormComponent;
@@ -54,7 +55,10 @@ describe('ForgotPasswordFormComponent', () => {
 
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), ReactiveFormsModule],
-      declarations: [ForgotPasswordFormComponent],
+      declarations: [
+        BrowserOnlyPipe,
+        ForgotPasswordFormComponent,
+      ],
       providers: [
         {provide: Router, useValue: router},
         {provide: ActivatedRoute, useValue: route},
@@ -75,7 +79,7 @@ describe('ForgotPasswordFormComponent', () => {
 
   describe('init', () => {
     it('should initialise mail address', () => {
-      const elem = fixture.debugElement.queryAll(By.css('span#email'))[0].nativeElement;
+      const elem = fixture.debugElement.queryAll(By.css('span[data-test="email"]'))[0].nativeElement;
       expect(elem.innerHTML).toContain('test@email.org');
     });
   });
diff --git a/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.ts b/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.ts
index c4e164a7e8..53f9acdb45 100644
--- a/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.ts
+++ b/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.ts
@@ -43,7 +43,8 @@ export class ProfilePageMetadataFormComponent implements OnInit {
     new DynamicInputModel({
       id: 'email',
       name: 'email',
-      readOnly: true
+      readOnly: true,
+      disabled: true,
     }),
     new DynamicInputModel({
       id: 'firstname',
@@ -55,6 +56,7 @@ export class ProfilePageMetadataFormComponent implements OnInit {
       errorMessages: {
         required: 'This field is required'
       },
+      autoComplete: 'given-name',
     }),
     new DynamicInputModel({
       id: 'lastname',
@@ -66,10 +68,12 @@ export class ProfilePageMetadataFormComponent implements OnInit {
       errorMessages: {
         required: 'This field is required'
       },
+      autoComplete: 'family-name',
     }),
     new DynamicInputModel({
       id: 'phone',
-      name: 'eperson.phone'
+      name: 'eperson.phone',
+      autoComplete: 'tel',
     }),
     new DynamicSelectModel<string>({
       id: 'language',
diff --git a/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts b/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts
index 04292ea96e..940e382c78 100644
--- a/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts
+++ b/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts
@@ -39,12 +39,14 @@ export class ProfilePageSecurityFormComponent implements OnInit {
     new DynamicInputModel({
       id: 'password',
       name: 'password',
-      inputType: 'password'
+      inputType: 'password',
+      autoComplete: 'new-password',
     }),
     new DynamicInputModel({
       id: 'passwordrepeat',
       name: 'passwordrepeat',
-      inputType: 'password'
+      inputType: 'password',
+      autoComplete: 'new-password',
     })
   ];
 
@@ -79,7 +81,8 @@ export class ProfilePageSecurityFormComponent implements OnInit {
         id: 'current-password',
         name: 'current-password',
         inputType: 'password',
-        required: true
+        required: true,
+        autoComplete: 'current-password',
       }));
     }
     if (this.passwordCanBeEmpty) {
diff --git a/src/app/profile-page/profile-page.component.html b/src/app/profile-page/profile-page.component.html
index fd7246c08b..331c360054 100644
--- a/src/app/profile-page/profile-page.component.html
+++ b/src/app/profile-page/profile-page.component.html
@@ -1,8 +1,7 @@
 <ng-container *ngVar="(user$ | async) as user">
   <div class="container" *ngIf="user">
     <h1>{{'profile.title' | translate}}</h1>
-    <ng-container *ngIf="isResearcherProfileEnabled() | async">
-      <h2 class="mb-4">{{'profile.head' | translate}}</h2>
+    <ng-container>
       <div class="card mb-4">
         <div class="card-header">{{'profile.card.researcher' | translate}}</div>
         <div class="card-body">
diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.html b/src/app/shared/log-in/methods/password/log-in-password.component.html
index 60477d141d..94f6ef870d 100644
--- a/src/app/shared/log-in/methods/password/log-in-password.component.html
+++ b/src/app/shared/log-in/methods/password/log-in-password.component.html
@@ -1,9 +1,8 @@
 <form class="form-login"
       (ngSubmit)="submit()"
       [formGroup]="form" novalidate>
-  <label class="sr-only">{{"login.form.email" | translate}}</label>
   <input [attr.aria-label]="'login.form.email' |translate"
-         autocomplete="off"
+         autocomplete="username"
          autofocus
          class="form-control form-control-lg position-relative"
          formControlName="email"
@@ -11,9 +10,8 @@
          required
          type="email"
          [attr.data-test]="'email' | dsBrowserOnly">
-  <label class="sr-only">{{"login.form.password" | translate}}</label>
   <input [attr.aria-label]="'login.form.password' |translate"
-         autocomplete="off"
+         autocomplete="current-password"
          class="form-control form-control-lg position-relative mb-3"
          placeholder="{{'login.form.password' | translate}}"
          formControlName="password"
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 44c9184d3c..462d2f2c92 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1720,7 +1720,7 @@
 
   "forgot-password.form.label.passwordrepeat": "Retype to confirm",
 
-  "forgot-password.form.error.empty-password": "Please enter a password in the box below.",
+  "forgot-password.form.error.empty-password": "Please enter a password in the boxes above.",
 
   "forgot-password.form.error.matching-passwords": "The passwords do not match.",
 
@@ -3490,8 +3490,6 @@
 
   "profile.special.groups.head": "Authorization special groups you belong to",
 
-  "profile.head": "Update Profile",
-
   "profile.metadata.form.error.firstname.required": "First Name is required",
 
   "profile.metadata.form.error.lastname.required": "Last Name is required",

From ca24713d6d36afa275bd9d85a486c47931ca2ce5 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 26 Dec 2023 11:26:08 +0100
Subject: [PATCH 24/24] Fixed dropdown accessibility issue

- Removed non-existing dropdownMenuButton references
- Added appropriate roles to dropdown menus
---
 ...space-new-external-dropdown.component.html |  4 +--
 ...ace-new-submission-dropdown.component.html |  4 +--
 .../collection-dropdown.component.html        | 22 +++++++++-------
 .../collection-dropdown.component.scss        |  3 ++-
 .../shared/ds-select/ds-select.component.html |  2 +-
 .../entity-dropdown.component.html            | 26 ++++++++++---------
 .../entity-dropdown.component.scss            | 10 ++++---
 .../entity-dropdown.component.spec.ts         |  2 +-
 .../lookup/dynamic-lookup.component.html      |  1 -
 .../submission-form-collection.component.html |  2 +-
 src/assets/i18n/en.json5                      |  2 ++
 11 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html
index 392134dbce..23438c205f 100644
--- a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html
+++ b/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>
diff --git a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html
index 73fbeb30c2..566e40d98a 100644
--- a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html
+++ b/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>
diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html
index 470291373f..a27aafa31d 100644
--- a/src/app/shared/collection-dropdown/collection-dropdown.component.html
+++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html
@@ -1,4 +1,4 @@
-<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();"
@@ -6,9 +6,9 @@
          [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>
diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.scss b/src/app/shared/collection-dropdown/collection-dropdown.component.scss
index 907a111900..8a28a3ff7e 100644
--- a/src/app/shared/collection-dropdown/collection-dropdown.component.scss
+++ b/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);
 }
 
diff --git a/src/app/shared/ds-select/ds-select.component.html b/src/app/shared/ds-select/ds-select.component.html
index 5a15155d4f..c12ea61347 100644
--- a/src/app/shared/ds-select/ds-select.component.html
+++ b/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>
diff --git a/src/app/shared/entity-dropdown/entity-dropdown.component.html b/src/app/shared/entity-dropdown/entity-dropdown.component.html
index a4d539625f..38b4ecc53e 100644
--- a/src/app/shared/entity-dropdown/entity-dropdown.component.html
+++ b/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>
diff --git a/src/app/shared/entity-dropdown/entity-dropdown.component.scss b/src/app/shared/entity-dropdown/entity-dropdown.component.scss
index a5f43f359b..4f9ca62310 100644
--- a/src/app/shared/entity-dropdown/entity-dropdown.component.scss
+++ b/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);
 }
 
diff --git a/src/app/shared/entity-dropdown/entity-dropdown.component.spec.ts b/src/app/shared/entity-dropdown/entity-dropdown.component.spec.ts
index 13e6dbc9c5..2f3aa763bc 100644
--- a/src/app/shared/entity-dropdown/entity-dropdown.component.spec.ts
+++ b/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());
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
index c624c46d2d..0ecddf9278 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
+++ b/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"
diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html
index a78d737640..f967ffe132 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.html
+++ b/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
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 462d2f2c92..20199cf9cc 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -4600,6 +4600,8 @@
 
   "submission.sections.general.no-collection": "No collection found",
 
+  "submission.sections.general.no-entity": "No entity types found",
+
   "submission.sections.general.no-sections": "No options available",
 
   "submission.sections.general.save_error_notice": "There was an issue when saving the item, please try again later.",