From e229be44d6450f9c50ed2d53f4b5d9cb7939fcd1 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 25 Nov 2023 14:21:57 +0100
Subject: [PATCH 01/21] Added missing aria labels to edit bitstream tab

---
 .../item-bitstreams/item-bitstreams.component.html         | 7 +++++++
 .../item-edit-bitstream-bundle.component.html              | 1 +
 2 files changed, 8 insertions(+)

diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
index 4cb9577fcb5..bd4c9334ad3 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
@@ -1,21 +1,25 @@
 <div class="item-bitstreams" *ngVar="(bundles$ | async) as bundles">
   <div class="button-row top d-flex mt-2 space-children-mr">
     <button class="mr-auto btn btn-success"
+            [attr.aria-label]="'item.edit.bitstreams.upload-button' | translate"
             [routerLink]="[itemPageRoute, 'bitstreams', 'new']"><i
             class="fas fa-upload"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.upload-button" | translate}}</span>
     </button>
     <button class="btn btn-warning" *ngIf="isReinstatable() | async"
+            [attr.aria-label]="'item.edit.bitstreams.reinstate-button' | translate"
             (click)="reinstate()"><i
             class="fas fa-undo-alt"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
     </button>
     <button class="btn btn-primary" [disabled]="!(hasChanges() | async) || submitting"
+            [attr.aria-label]="'item.edit.bitstreams.save-button' | translate"
             (click)="submit()"><i
             class="fas fa-save"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
     </button>
     <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
+            [attr.aria-label]="'item.edit.bitstreams.discard-button' | translate"
             [disabled]="!(hasChanges() | async) || submitting"
             (click)="discard()"><i
             class="fas fa-times"></i>
@@ -49,16 +53,19 @@
   <div class="button-row bottom">
     <div class="mt-4 float-right space-children-mr ml-gap">
       <button class="btn btn-warning" *ngIf="isReinstatable() | async"
+              [attr.aria-label]="'item.edit.bitstreams.reinstate-button' | translate"
               (click)="reinstate()"><i
         class="fas fa-undo-alt"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
       </button>
       <button class="btn btn-primary" [disabled]="!(hasChanges() | async) || submitting"
+              [attr.aria-label]="'item.edit.bitstreams.save-button' | translate"
               (click)="submit()"><i
         class="fas fa-save"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
       </button>
       <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
+              [attr.aria-label]="'item.edit.bitstreams.discard-button' | translate"
               [disabled]="!(hasChanges() | async) || submitting"
               (click)="discard()"><i
         class="fas fa-times"></i>
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
index 62170235a3a..42b9b9eb647 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
@@ -10,6 +10,7 @@
       <div class="btn-group bundle-action-buttons">
         <button [routerLink]="[itemPageRoute, 'bitstreams', 'new']"
                 [queryParams]="{bundle: bundle.id}"
+                [attr.aria-label]="'item.edit.bitstreams.bundle.edit.buttons.upload' | translate"
                 class="btn btn-outline-success btn-sm"
                 title="{{'item.edit.bitstreams.bundle.edit.buttons.upload' | translate}}">
           <i class="fas fa-upload fa-fw"></i>

From 9ab30231aad9983cc2d961e639e4a12a22fe1633 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 26 Nov 2023 00:16:50 +0100
Subject: [PATCH 02/21] Replaced uncrawlable links with buttons

---
 .../admin-sidebar/admin-sidebar.component.html      | 13 ++++++-------
 .../admin-sidebar/admin-sidebar.component.spec.ts   |  2 +-
 src/app/footer/footer.component.html                |  7 ++++---
 src/app/footer/footer.component.scss                |  5 +++--
 .../expandable-navbar-section.component.html        |  6 +++---
 .../expandable-navbar-section.component.scss        |  9 +++++++++
 .../expandable-navbar-section.component.spec.ts     |  8 ++++----
 src/app/navbar/navbar.component.scss                |  4 ++--
 src/themes/dspace/app/navbar/navbar.component.html  |  2 +-
 src/themes/dspace/app/navbar/navbar.component.scss  |  4 ++--
 10 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html
index fe7e5595ab0..ca69501382e 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html
@@ -34,22 +34,21 @@ <h4 class="section-header-text mb-0">{{ 'menu.header.admin' | translate }}</h4>
     </div>
     <div class="navbar-nav">
         <div class="sidebar-section" id="sidebar-collapse-toggle">
-            <a class="nav-item nav-link sidebar-section d-flex flex-row flex-nowrap"
-               href="javascript:void(0);"
+            <button class="nav-item nav-link sidebar-section d-flex flex-row flex-nowrap border-0" type="button"
                (click)="toggle($event)"
                (keyup.space)="toggle($event)"
             >
-              <div class="shortcut-icon">
+              <span class="shortcut-icon">
                 <i *ngIf="(menuCollapsed | async)" class="fas fa-fw fa-angle-double-right"
                    [title]="'menu.section.icon.pin' | translate"></i>
                 <i *ngIf="!(menuCollapsed | async)" class="fas fa-fw fa-angle-double-left"
                    [title]="'menu.section.icon.unpin' | translate"></i>
-              </div>
-              <div class="sidebar-collapsible">
+              </span>
+              <span class="sidebar-collapsible text-left">
                 <span *ngIf="menuCollapsed | async" class="section-header-text">{{'menu.section.pin' | translate }}</span>
                 <span *ngIf="!(menuCollapsed | async)" class="section-header-text">{{'menu.section.unpin' | translate }}</span>
-              </div>
-            </a>
+              </span>
+            </button>
         </div>
     </div>
 </nav>
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
index 88efd2a711e..9522be29ce3 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
@@ -143,7 +143,7 @@ describe('AdminSidebarComponent', () => {
   describe('when the collapse link is clicked', () => {
     beforeEach(() => {
       spyOn(menuService, 'toggleMenu');
-      const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle > a'));
+      const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle > button'));
       sidebarToggler.triggerEventHandler('click', {
         preventDefault: () => {/**/
         }
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index 13d84e6e2e1..d4c0cd1a377 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -62,10 +62,11 @@ <h5 class="text-uppercase">Footer Content</h5>
         <a class="text-white"
            href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
       </p>
-      <ul class="footer-info list-unstyled small d-flex justify-content-center mb-0">
+      <ul class="footer-info list-unstyled d-flex justify-content-center mb-0">
         <li>
-            <a class="text-white" href="javascript:void(0);"
-             (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
+          <button class="btn btn-link text-white" type="button" (click)="showCookieSettings()">
+            {{ 'footer.link.cookies' | translate}}
+          </button>
         </li>
         <li *ngIf="showPrivacyPolicy">
           <a class="text-white"
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 350295b8704..4dfdc3267ba 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -26,9 +26,10 @@
         li {
           display: inline-flex;
 
-          a {
+          a, .btn-link {
             padding: 0 calc(var(--bs-spacer) / 2);
-            color: inherit
+            color: inherit;
+            font-size: .875em;
           }
 
           &:not(:last-child) {
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
index 053968834e1..44ca82b61da 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -5,13 +5,13 @@
     (keydown.space)="$event.preventDefault()"
     (mouseenter)="activateSection($event)"
     (mouseleave)="deactivateSection($event)">
-    <a href="javascript:void(0);" class="nav-link dropdown-toggle" routerLinkActive="active"
+    <button class="btn btn-link nav-link dropdown-toggle" routerLinkActive="active" type="button"
        [class.disabled]="section.model?.disabled"
-       id="browseDropdown" (click)="toggleSection($event)"
+       (click)="toggleSection($event)"
        data-toggle="dropdown">
         <ng-container
                 *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-    </a>
+    </button>
     <ul @slide *ngIf="(active | async)" (click)="deactivateSection($event)"
         class="m-0 shadow-none border-top-0 dropdown-menu show">
         <li *ngFor="let subSection of (subSections$ | async)">
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index 28db981f115..ff48341b0f7 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -5,6 +5,15 @@
   justify-content: center;
 }
 
+.btn.nav-link {
+  text-align: left;
+  border: none;
+
+  &:active, &:focus {
+    box-shadow: none !important;
+  }
+}
+
 .dropdown-menu {
     background-color: var(--ds-expandable-navbar-bg);
     overflow: hidden;
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
index 488c9ab2518..f4c72e12375 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
@@ -152,7 +152,7 @@ describe('ExpandableNavbarSectionComponent', () => {
     describe('when a click occurs on the section header', () => {
       beforeEach(() => {
         spyOn(menuService, 'toggleActiveSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > a'));
+        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
         sidebarToggler.triggerEventHandler('click', {
           preventDefault: () => {/**/
           }
@@ -195,7 +195,7 @@ describe('ExpandableNavbarSectionComponent', () => {
     describe('when the mouse enters the section header', () => {
       beforeEach(() => {
         spyOn(menuService, 'activateSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > a'));
+        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
         sidebarToggler.triggerEventHandler('mouseenter', {
           preventDefault: () => {/**/
           }
@@ -210,7 +210,7 @@ describe('ExpandableNavbarSectionComponent', () => {
     describe('when the mouse leaves the section header', () => {
       beforeEach(() => {
         spyOn(menuService, 'deactivateSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > a'));
+        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
         sidebarToggler.triggerEventHandler('mouseleave', {
           preventDefault: () => {/**/
           }
@@ -225,7 +225,7 @@ describe('ExpandableNavbarSectionComponent', () => {
     describe('when a click occurs on the section header link', () => {
       beforeEach(() => {
         spyOn(menuService, 'toggleActiveSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > a'));
+        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
         sidebarToggler.triggerEventHandler('click', {
           preventDefault: () => {/**/
           }
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index dac8c0927f3..d9a09013747 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -37,8 +37,8 @@ nav.navbar {
     }
 }
 
-.navbar-nav {
-  ::ng-deep a.nav-link {
+.navbar-nav ::ng-deep {
+  a.nav-link, .btn.nav-link {
     color: var(--ds-navbar-link-color);
 
     &:hover, &:focus {
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index f2e231d46ce..9f7e977961e 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -8,7 +8,7 @@
     <div id="collapsingNav" class="w-100 h-100">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
         <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
-            <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
+            <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
         </li>
         <li *ngFor="let section of (sections | async)">
           <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
index 28ead2f1def..f1f17d9f768 100644
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -54,8 +54,8 @@ a.navbar-brand img {
   max-height: var(--ds-header-logo-height);
 }
 
-.navbar-nav {
-  ::ng-deep a.nav-link {
+.navbar-nav ::ng-deep {
+  a.nav-link, .btn.nav-link {
     color: var(--ds-navbar-link-color);
 
     &:hover, &:focus {

From 8a7bdfe18ffd2a9451f17d4f7280ba5a60336986 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 26 Nov 2023 01:30:20 +0100
Subject: [PATCH 03/21] Added aria-labels & fixed aria-controls on myDSpace
 page

- Added aria-label to the new submission buttons (for repositories with more than 1 entity type)
- Fixed aria-controls pointing to non-existing ids
---
 .../my-dspace-new-external-dropdown.component.html           | 5 +++--
 .../my-dspace-new-submission-dropdown.component.html         | 5 +++--
 .../search/search-sidebar/search-sidebar.component.html      | 5 +++--
 src/app/shared/search/search.component.html                  | 3 ++-
 4 files changed, 11 insertions(+), 7 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 7db6db9a8da..392134dbce5 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
@@ -1,5 +1,6 @@
   <div class="add" *ngIf="!(moreThanOne$ | async)">
-    <button class="btn btn-lg btn-outline-primary mt-1 ml-2" [disabled]="!(initialized$|async)"
+    <button class="btn btn-lg btn-outline-primary mt-1 ml-2"
+            [attr.aria-label]="'mydspace.new-submission-external' | translate" [disabled]="!(initialized$|async)"
             (click)="openPage(singleEntity)" role="button"
             title="{{'mydspace.new-submission-external' | translate}}">
       <i class="fa fa-file-import" aria-hidden="true"></i>
@@ -10,7 +11,7 @@
        *ngIf="(moreThanOne$ | async)">
     <button class="btn btn-lg btn-outline-primary mt-1 ml-2" id="dropdownImport" ngbDropdownToggle
             type="button" [disabled]="!(initialized$|async)"
-            attr.aria-label="{{'mydspace.new-submission-external' | translate}}"
+            [attr.aria-label]="'mydspace.new-submission-external' | translate"
             [attr.data-test]="'import-dropdown' | dsBrowserOnly"
             title="{{'mydspace.new-submission-external' | translate}}">
       <i class="fa fa-file-import" aria-hidden="true"></i>
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 84d06492771..73fbeb30c2b 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
@@ -1,5 +1,6 @@
   <div class="add" *ngIf="!(moreThanOne$ | async)">
-    <button class="btn btn-lg btn-primary mt-1 ml-2" [disabled]="!(initialized$|async)" (click)="openDialog(singleEntity)" role="button">
+    <button class="btn btn-lg btn-primary mt-1 ml-2" [attr.aria-label]="'mydspace.new-submission' | translate"
+            [disabled]="!(initialized$|async)" (click)="openDialog(singleEntity)" role="button">
       <i class="fa fa-plus-circle" aria-hidden="true"></i>
     </button>
   </div>
@@ -8,7 +9,7 @@
        *ngIf="(moreThanOne$ | async)">
     <button class="btn btn-lg btn-primary mt-1 ml-2" id="dropdownSubmission" ngbDropdownToggle
             type="button"  [disabled]="!(initialized$|async)"
-            attr.aria-label="{{'mydspace.new-submission' | translate}}"
+            [attr.aria-label]="'mydspace.new-submission' | translate"
             [attr.data-test]="'submission-dropdown' | dsBrowserOnly"
             title="{{'mydspace.new-submission' | translate}}">
       <i class="fa fa-plus-circle" aria-hidden="true"></i>
diff --git a/src/app/shared/search/search-sidebar/search-sidebar.component.html b/src/app/shared/search/search-sidebar/search-sidebar.component.html
index f489de5d289..529f1de8870 100644
--- a/src/app/shared/search/search-sidebar/search-sidebar.component.html
+++ b/src/app/shared/search/search-sidebar/search-sidebar.component.html
@@ -2,9 +2,10 @@
     <div id="sidebar-options" class="d-block d-md-none search-controls clearfix">
         <small class="results">{{resultCount}} {{"search.sidebar.results" | translate}}</small>
         <button (click)="toggleSidebar.emit()"
-                aria-controls="#search-body"
+                [attr.aria-label]="'search.sidebar.close' | translate"
+                aria-controls="search-content"
                 class="btn btn-outline-primary float-right close-sidebar"><i
-                class="fas fa-arrow-right" [title]="'search.sidebar.close' | translate"></i> {{"search.sidebar.close" | translate}}
+                class="fas fa-arrow-right"></i> {{'search.sidebar.close' | translate}}
         </button>
     </div>
     <div id="search-sidebar-content">
diff --git a/src/app/shared/search/search.component.html b/src/app/shared/search/search.component.html
index d43f506866f..e7dd02e2863 100644
--- a/src/app/shared/search/search.component.html
+++ b/src/app/shared/search/search.component.html
@@ -23,7 +23,8 @@
         <div id="search-content" class="col-12">
             <div class="d-block d-md-none search-controls clearfix">
                 <ds-view-mode-switch [viewModeList]="viewModeList" [inPlaceSearch]="inPlaceSearch"></ds-view-mode-switch>
-                <button (click)="openSidebar()" aria-controls="#search-body"
+                <button [attr.aria-label]="'search.sidebar.open' | translate" (click)="openSidebar()"
+                        aria-controls="search-sidebar-content"
                         class="btn btn-outline-primary float-right open-sidebar"><i
                         class="fas fa-sliders"></i> {{"search.sidebar.open"
                         | translate}}

From cc71d60ebb5c696422958fb00a041d9b40175834 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 26 Nov 2023 02:16:56 +0100
Subject: [PATCH 04/21] Fixed duplicate search-navbar-container id & renabled
 accessibility tests for header

---
 cypress/e2e/header.cy.ts                      |  7 +------
 .../search-navbar.component.html              |  2 +-
 .../search-navbar.component.spec.ts           | 21 ++++++-------------
 3 files changed, 8 insertions(+), 22 deletions(-)

diff --git a/cypress/e2e/header.cy.ts b/cypress/e2e/header.cy.ts
index 1a9b841eb7d..9852216e438 100644
--- a/cypress/e2e/header.cy.ts
+++ b/cypress/e2e/header.cy.ts
@@ -8,11 +8,6 @@ describe('Header', () => {
         cy.get('ds-header').should('be.visible');
 
         // Analyze <ds-header> for accessibility
-        testA11y({
-            include: ['ds-header'],
-            exclude: [
-                ['#search-navbar-container'] // search in navbar has duplicative ID. Will be fixed in #1174
-            ],
-        });
+        testA11y('ds-header');
     });
 });
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
index 02a98905021..e9b5f285fbc 100644
--- a/src/app/search-navbar/search-navbar.component.html
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -1,4 +1,4 @@
-<div id="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
+<div [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
diff --git a/src/app/search-navbar/search-navbar.component.spec.ts b/src/app/search-navbar/search-navbar.component.spec.ts
index b67f5f0eb45..7edae293e12 100644
--- a/src/app/search-navbar/search-navbar.component.spec.ts
+++ b/src/app/search-navbar/search-navbar.component.spec.ts
@@ -8,7 +8,6 @@ import { SearchService } from '../core/shared/search/search.service';
 import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock';
 
 import { SearchNavbarComponent } from './search-navbar.component';
-import { PaginationServiceStub } from '../shared/testing/pagination-service.stub';
 import { RouterTestingModule } from '@angular/router/testing';
 import { BrowserOnlyMockPipe } from '../shared/testing/browser-only-mock.pipe';
 
@@ -17,8 +16,6 @@ describe('SearchNavbarComponent', () => {
   let fixture: ComponentFixture<SearchNavbarComponent>;
   let mockSearchService: any;
   let router: Router;
-  let routerStub;
-  let paginationService;
 
   beforeEach(waitForAsync(() => {
     mockSearchService = {
@@ -27,12 +24,6 @@ describe('SearchNavbarComponent', () => {
       }
     };
 
-    routerStub = {
-      navigate: (commands) => commands
-    };
-
-    paginationService = new PaginationServiceStub();
-
     TestBed.configureTestingModule({
       imports: [
         FormsModule,
@@ -72,7 +63,7 @@ describe('SearchNavbarComponent', () => {
       spyOn(component, 'expand').and.callThrough();
       spyOn(component, 'onSubmit').and.callThrough();
       spyOn(router, 'navigate');
-      const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+      const searchIcon = fixture.debugElement.query(By.css('form .submit-icon'));
       searchIcon.triggerEventHandler('click', {
         preventDefault: () => {/**/
         }
@@ -88,7 +79,7 @@ describe('SearchNavbarComponent', () => {
     describe('empty query', () => {
       describe('press submit button', () => {
         beforeEach(fakeAsync(() => {
-          const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+          const searchIcon = fixture.debugElement.query(By.css('form .submit-icon'));
           searchIcon.triggerEventHandler('click', {
             preventDefault: () => {/**/
             }
@@ -97,7 +88,7 @@ describe('SearchNavbarComponent', () => {
           fixture.detectChanges();
         }));
         it('to search page with empty query', () => {
-          const extras: NavigationExtras = {queryParams: { query: '' }, queryParamsHandling: 'merge'};
+          const extras: NavigationExtras = { queryParams: { query: '' }, queryParamsHandling: 'merge' };
           expect(component.onSubmit).toHaveBeenCalledWith({ query: '' });
           expect(router.navigate).toHaveBeenCalledWith(['search'], extras);
         });
@@ -109,20 +100,20 @@ describe('SearchNavbarComponent', () => {
       beforeEach(async () => {
         await fixture.whenStable();
         fixture.detectChanges();
-        searchInput = fixture.debugElement.query(By.css('#search-navbar-container form input'));
+        searchInput = fixture.debugElement.query(By.css('form input'));
         searchInput.nativeElement.value = 'test';
         searchInput.nativeElement.dispatchEvent(new Event('input'));
         fixture.detectChanges();
       });
       describe('press submit button', () => {
         beforeEach(fakeAsync(() => {
-          const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+          const searchIcon = fixture.debugElement.query(By.css('form .submit-icon'));
           searchIcon.triggerEventHandler('click', null);
           tick();
           fixture.detectChanges();
         }));
         it('to search page with query', async () => {
-          const extras: NavigationExtras = { queryParams: { query: 'test' }, queryParamsHandling: 'merge'};
+          const extras: NavigationExtras = { queryParams: { query: 'test' }, queryParamsHandling: 'merge' };
           expect(component.onSubmit).toHaveBeenCalledWith({ query: 'test' });
 
           expect(router.navigate).toHaveBeenCalledWith(['search'], extras);

From c300123b785a75499d1362cecf2b6102660c4508 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 26 Nov 2023 21:28:12 +0100
Subject: [PATCH 05/21] Fix Bulk Access Management usability issues

- Added aria-labels to trash & select bitstream icon
- Added aria-labels ui-switch components (had to upgrade ngx-ui-switch to 14.1.0)
- Fixed aria-controls pointing to non-existing ids
- Fixed bulk-access-browse not having the tab role on it's tabs
- Fixed role="tablist" not having direct role="tab" by adding role="presentation" on the li elements
- Fixed aria-expanded being set to true when collapsed and backwards for BulkAccessBrowseComponent & BulkAccessSettingsComponent
---
 package.json                                  |   2 +-
 .../browse/bulk-access-browse.component.html  | 102 +++++++++---------
 .../bulk-access-settings.component.html       |  12 +--
 .../access-control-array-form.component.html  |   1 +
 ...cess-control-form-container.component.html |   8 +-
 src/assets/i18n/en.json5                      |  12 +++
 yarn.lock                                     |   8 +-
 7 files changed, 82 insertions(+), 63 deletions(-)

diff --git a/package.json b/package.json
index 553962dfeb7..e5347742c8c 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,7 @@
     "ngx-infinite-scroll": "^15.0.0",
     "ngx-pagination": "6.0.3",
     "ngx-sortablejs": "^11.1.0",
-    "ngx-ui-switch": "^14.0.3",
+    "ngx-ui-switch": "^14.1.0",
     "nouislider": "^15.7.1",
     "pem": "1.14.7",
     "prop-types": "^15.8.1",
diff --git a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html
index c716aedb8b3..6e967b53b5e 100644
--- a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html
+++ b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html
@@ -1,15 +1,15 @@
 <ngb-accordion #acc="ngbAccordion" [activeIds]="'browse'">
   <ngb-panel [id]="'browse'">
     <ng-template ngbPanelHeader>
-      <div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('browse')"
+      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('browse')"
            data-test="browse">
         <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
-                [attr.aria-expanded]="!acc.isExpanded('browse')"
-                aria-controls="collapsePanels">
+                [attr.aria-expanded]="acc.isExpanded('browse')"
+                aria-controls="bulk-access-browse-panel-content">
           {{ 'admin.access-control.bulk-access-browse.header' | translate }}
         </button>
-        <div class="text-right d-flex">
-          <div class="ml-3 d-inline-block">
+        <div class="text-right d-flex gap-2">
+          <div class="d-flex my-auto">
             <span *ngIf="acc.isExpanded('browse')" class="fas fa-chevron-up fa-fw"></span>
             <span *ngIf="!acc.isExpanded('browse')" class="fas fa-chevron-down fa-fw"></span>
           </div>
@@ -17,51 +17,53 @@
       </div>
     </ng-template>
     <ng-template ngbPanelContent>
-      <ul ngbNav #nav="ngbNav" [(activeId)]="activateId" class="nav-pills">
-        <li [ngbNavItem]="'search'">
-          <a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
-          <ng-template ngbNavContent>
-            <div class="mx-n3">
-              <ds-themed-search [configuration]="'administrativeBulkAccess'"
-                                [selectable]="true"
-                                [selectionConfig]="{ repeatable: true, listId: listId }"
-                                [showThumbnails]="false"></ds-themed-search>
-            </div>
-          </ng-template>
-        </li>
-        <li [ngbNavItem]="'selected'">
-          <a ngbNavLink>
-            {{'admin.access-control.bulk-access-browse.selected.header' | translate: {number: ((objectsSelected$ | async)?.payload?.totalElements) ? (objectsSelected$ | async)?.payload?.totalElements : '0'} }}
-          </a>
-          <ng-template ngbNavContent>
-            <ds-pagination
-              [paginationOptions]="(paginationOptions$ | async)"
-              [pageInfoState]="(objectsSelected$|async)?.payload.pageInfo"
-              [collectionSize]="(objectsSelected$|async)?.payload?.totalElements"
-              [objects]="(objectsSelected$|async)"
-              [showPaginator]="false"
-              (prev)="pagePrev()"
-              (next)="pageNext()">
-              <ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ml-4">
-                <li *ngFor='let object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
-                            currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; let i = index; let last = last '
-                    class="mt-4 mb-4 d-flex"
-                    [attr.data-test]="'list-object' | dsBrowserOnly">
-                  <ds-selectable-list-item-control [index]="i"
-                                                   [object]="object"
-                                                   [selectionConfig]="{ repeatable: true, listId: listId }"></ds-selectable-list-item-control>
-                  <ds-listable-object-component-loader [listID]="listId"
-                                                       [index]="i"
-                                                       [object]="object"
-                                                       [showThumbnails]="false"
-                                                       [viewMode]="'list'"></ds-listable-object-component-loader>
-                </li>
-              </ul>
-            </ds-pagination>
-          </ng-template>
-        </li>
-      </ul>
-      <div [ngbNavOutlet]="nav" class="mt-5"></div>
+      <div id="bulk-access-browse-panel-content">
+        <ul ngbNav #nav="ngbNav" [(activeId)]="activateId" class="nav-pills">
+          <li [ngbNavItem]="'search'" role="presentation">
+            <a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
+            <ng-template ngbNavContent>
+              <div class="mx-n3">
+                <ds-themed-search [configuration]="'administrativeBulkAccess'"
+                                  [selectable]="true"
+                                  [selectionConfig]="{ repeatable: true, listId: listId }"
+                                  [showThumbnails]="false"></ds-themed-search>
+              </div>
+            </ng-template>
+          </li>
+          <li [ngbNavItem]="'selected'" role="presentation">
+            <a ngbNavLink>
+              {{'admin.access-control.bulk-access-browse.selected.header' | translate: {number: ((objectsSelected$ | async)?.payload?.totalElements) ? (objectsSelected$ | async)?.payload?.totalElements : '0'} }}
+            </a>
+            <ng-template ngbNavContent>
+              <ds-pagination
+                [paginationOptions]="(paginationOptions$ | async)"
+                [pageInfoState]="(objectsSelected$|async)?.payload.pageInfo"
+                [collectionSize]="(objectsSelected$|async)?.payload?.totalElements"
+                [objects]="(objectsSelected$|async)"
+                [showPaginator]="false"
+                (prev)="pagePrev()"
+                (next)="pageNext()">
+                <ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ml-4">
+                  <li *ngFor='let object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
+                              currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; let i = index; let last = last '
+                      class="mt-4 mb-4 d-flex"
+                      [attr.data-test]="'list-object' | dsBrowserOnly">
+                    <ds-selectable-list-item-control [index]="i"
+                                                     [object]="object"
+                                                     [selectionConfig]="{ repeatable: true, listId: listId }"></ds-selectable-list-item-control>
+                    <ds-listable-object-component-loader [listID]="listId"
+                                                         [index]="i"
+                                                         [object]="object"
+                                                         [showThumbnails]="false"
+                                                         [viewMode]="'list'"></ds-listable-object-component-loader>
+                  </li>
+                </ul>
+              </ds-pagination>
+            </ng-template>
+          </li>
+        </ul>
+        <div [ngbNavOutlet]="nav" class="mt-5"></div>
+      </div>
     </ng-template>
   </ngb-panel>
 </ngb-accordion>
diff --git a/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html b/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html
index 01f36ef03f4..c41053874e7 100644
--- a/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html
+++ b/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html
@@ -1,13 +1,13 @@
 <ngb-accordion #acc="ngbAccordion" [activeIds]="'settings'">
   <ngb-panel [id]="'settings'">
     <ng-template ngbPanelHeader>
-      <div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('settings')" data-test="settings">
-        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!acc.isExpanded('browse')"
-                aria-controls="collapsePanels">
+      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('settings')" data-test="settings">
+        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded('settings')"
+                aria-controls="bulk-access-settings-panel-content">
           {{ 'admin.access-control.bulk-access-settings.header' | translate }}
         </button>
-        <div class="text-right d-flex">
-          <div class="ml-3 d-inline-block">
+        <div class="text-right d-flex gap-2">
+          <div class="d-flex my-auto">
             <span *ngIf="acc.isExpanded('settings')" class="fas fa-chevron-up fa-fw"></span>
             <span *ngIf="!acc.isExpanded('settings')" class="fas fa-chevron-down fa-fw"></span>
           </div>
@@ -15,7 +15,7 @@
       </div>
     </ng-template>
     <ng-template ngbPanelContent>
-      <ds-access-control-form-container #dsAccessControlForm [showSubmit]="false"></ds-access-control-form-container>
+      <ds-access-control-form-container id="bulk-access-settings-panel-content" #dsAccessControlForm [showSubmit]="false"></ds-access-control-form-container>
     </ng-template>
   </ngb-panel>
 </ngb-accordion>
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 cd56904bd7f..e6ebabd707b 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
@@ -92,6 +92,7 @@
         <div class="input-group">
 
           <button type="button" class="btn btn-outline-danger"
+                  [attr.aria-label]="'access-control-remove' | translate"
                   [disabled]="ngForm.disabled || form.accessControls.length === 1"
                   (click)="removeAccessControlItem(control.id)">
             <i class="fas fa-trash"></i>
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 a5173d10d7d..263bf60ac7b 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
@@ -4,10 +4,11 @@
       <ds-alert
         *ngIf="titleMessage"
         [type]="AlertType.Info"
-        [content]="titleMessage">
+        [content]="titleMessage"
+        class="d-block pb-3">
       </ds-alert>
 
-      <div class="row mt-5">
+      <div class="row">
         <div class="col-12 col-md-6 border-right d-flex flex-column justify-content-between">
 
           <div>
@@ -16,6 +17,7 @@ <h4 class="mb-0 mr-4">
                 {{ 'access-control-item-header-toggle' | translate }}
               </h4>
               <ui-switch
+                [ariaLabel]="(state.bitstream.toggleStatus ? 'access-control-item-toggle.disable' : 'access-control-item-toggle.enable') | translate"
                 [(ngModel)]="state.item.toggleStatus"
                 (ngModelChange)="handleStatusChange('item', $event)">
               </ui-switch>
@@ -69,6 +71,7 @@ <h4 class="mb-0 mr-4">
                 {{'access-control-bitstream-header-toggle' | translate}}
               </h4>
               <ui-switch
+                [ariaLabel]="(state.bitstream.toggleStatus ? 'access-control-bitstream-toggle.disable' : 'access-control-bitstream-toggle.enable') | translate"
                 [(ngModel)]="state.bitstream.toggleStatus"
                 (ngModelChange)="handleStatusChange('bitstream', $event)">
               </ui-switch>
@@ -99,6 +102,7 @@ <h4 class="mb-0 mr-4">
 
                   <button
                     *ngIf="itemRD"
+                    [attr.aria-label]="'access-control-bitstreams-select' | translate"
                     [disabled]="!state.bitstream.toggleStatus || state.bitstream.changesLimit !== 'selected'"
                     (click)="openSelectBitstreamsModal(itemRD.payload)"
                     class="btn btn-outline-dark border-0" type="button">
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 6dee5d54e66..ebe515921d4 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -5190,8 +5190,16 @@
 
   "access-control-item-header-toggle": "Item's Metadata",
 
+  "access-control-item-toggle.enable": "Enable option to perform changes on the item's metadata",
+
+  "access-control-item-toggle.disable": "Disable option to perform changes on the item's metadata",
+
   "access-control-bitstream-header-toggle": "Bitstreams",
 
+  "access-control-bitstream-toggle.enable": "Enable option to perform changes on the bitstreams",
+
+  "access-control-bitstream-toggle.disable": "Disable option to perform changes on the bitstreams",
+
   "access-control-mode": "Mode",
 
   "access-control-access-conditions": "Access conditions",
@@ -5208,12 +5216,16 @@
 
   "access-control-bitstreams-selected": "bitstreams selected",
 
+  "access-control-bitstreams-select": "Select bitstreams",
+
   "access-control-cancel": "Cancel",
 
   "access-control-execute": "Execute",
 
   "access-control-add-more": "Add more",
 
+  "access-control-remove": "Remove access condition",
+
   "access-control-select-bitstreams-modal.title": "Select bitstreams",
 
   "access-control-select-bitstreams-modal.no-items": "No items to show.",
diff --git a/yarn.lock b/yarn.lock
index 27307aefa2f..6e04ab27b2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8369,10 +8369,10 @@ ngx-sortablejs@^11.1.0:
   dependencies:
     tslib "^2.0.0"
 
-ngx-ui-switch@^14.0.3:
-  version "14.0.3"
-  resolved "https://registry.npmjs.org/ngx-ui-switch/-/ngx-ui-switch-14.0.3.tgz"
-  integrity sha512-SZ8ZnTCuNJgNWuY3/mOG3TdsRUNPCX3vGdCKKx1ZHVMTUynerJQlTWck2JrYlnrexNnd7wy4P10jDvdtDwoYeg==
+ngx-ui-switch@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/ngx-ui-switch/-/ngx-ui-switch-14.1.0.tgz#32248361a684257c5ae64cfde61b95de920b901c"
+  integrity sha512-uGGLppBP1FXjyD+x7f8Pm6I3JQTMmsBqPtwERAX27jSZxDWFp/sewnl75fuDvu75qFofJd/BIOtV4xHxzgZOvw==
   dependencies:
     tslib "^2.3.0"
 

From 3628c84844aeccafa0bc91a44c6710596ba6a3f7 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 26 Nov 2023 23:53:44 +0100
Subject: [PATCH 06/21] Fix Health Panel usability issues

- Fixed aria-controls on HealthComponentComponent, HealthInfoComponent, HealthInfoComponentComponent, HealthPanelComponent pointing to non-existing id
- Fixed the tabs not having the role tab on its tabs
- Fixed aria-expanded being set to true when collapsed and backwards for HealthPanelComponent & HealthInfoComponent
- Fixed role="tablist" not having direct role="tab" by adding role="presentation" on the li elements
- Fixed minor alignment issues
---
 .../health-info-component.component.html      |  8 +++----
 .../health-info/health-info.component.html    | 15 ++++++-------
 .../health-page/health-page.component.html    |  6 +++---
 src/app/health-page/health-page.component.ts  |  3 +++
 .../health-component.component.html           |  8 +++----
 .../health-panel/health-panel.component.html  | 21 +++++++++++--------
 .../health-status.component.html              |  6 +++---
 .../health-status.component.scss              |  3 +++
 8 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/app/health-page/health-info/health-info-component/health-info-component.component.html b/src/app/health-page/health-info/health-info-component/health-info-component.component.html
index dbaaa7a6b6e..84cba4d92f3 100644
--- a/src/app/health-page/health-info/health-info-component/health-info-component.component.html
+++ b/src/app/health-page/health-info/health-info-component/health-info-component.component.html
@@ -1,16 +1,16 @@
 <div *ngFor="let entry of healthInfoComponent | dsObjNgFor" data-test="collapse">
   <div *ngIf="entry && !isPlainProperty(entry.value)" class="mb-3 border-bottom">
-    <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
+    <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="collapse.toggle()">
       <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!collapse.collapsed"
-              aria-controls="collapseExample">
+              [attr.aria-controls]="'health-info-component-' + entry.key + '-content'">
         {{ entry.key | titlecase }}
       </button>
-      <div class="d-inline-block">
+      <div class="d-flex my-auto">
         <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
         <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
       </div>
     </div>
-    <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+    <div #collapse="ngbCollapse" [id]="'health-info-component-' + entry.key + '-content'" [ngbCollapse]="isCollapsed">
       <div class="card border-0">
         <div class="card-body">
           <ds-health-info-component [healthInfoComponent]="entry.value"
diff --git a/src/app/health-page/health-info/health-info.component.html b/src/app/health-page/health-info/health-info.component.html
index 4bafcaa2d8a..b590695b0b0 100644
--- a/src/app/health-page/health-info/health-info.component.html
+++ b/src/app/health-page/health-info/health-info.component.html
@@ -2,14 +2,14 @@
   <ngb-accordion #acc="ngbAccordion" [activeIds]="activeId">
     <ngb-panel [id]="entry.key" *ngFor="let entry of healthInfoResponse | dsObjNgFor">
       <ng-template ngbPanelHeader>
-        <div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle(entry.key)" data-test="info-component">
-          <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!acc.isExpanded(entry.key)"
-                  aria-controls="collapsePanels">
+        <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle(entry.key)" data-test="info-component">
+          <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded(entry.key)"
+                  [attr.aria-controls]="'health-info-' + entry.key + '-content'">
             {{ getPanelLabel(entry.key) | titlecase }}
           </button>
-          <div class="text-right d-flex">
+          <div class="text-right d-flex gap-2">
             <ds-health-status [status]="entry.value?.status"></ds-health-status>
-            <div class="ml-3 d-inline-block">
+            <div class="d-flex my-auto">
               <span *ngIf="acc.isExpanded(entry.key)" class="fas fa-chevron-up fa-fw"></span>
               <span *ngIf="!acc.isExpanded(entry.key)" class="fas fa-chevron-down fa-fw"></span>
             </div>
@@ -17,8 +17,9 @@
         </div>
       </ng-template>
       <ng-template ngbPanelContent>
-        <ds-health-info-component [healthInfoComponentName]="entry.key"
-                                  [healthInfoComponent]="entry.value"></ds-health-info-component>
+        <ds-health-info-component [healthInfoComponentName]="entry.key" [healthInfoComponent]="entry.value"
+                                  [id]="'health-info-' + entry.key + '-content'">
+        </ds-health-info-component>
       </ng-template>
     </ngb-panel>
   </ngb-accordion>
diff --git a/src/app/health-page/health-page.component.html b/src/app/health-page/health-page.component.html
index 8083389e1b4..15a87878941 100644
--- a/src/app/health-page/health-page.component.html
+++ b/src/app/health-page/health-page.component.html
@@ -2,7 +2,7 @@
   <h2>{{'health-page.heading' | translate}}</h2>
   <div *ngIf="(healthResponse | async) && (healthInfoResponse | async)">
     <ul ngbNav #nav="ngbNav" [activeId]="'status'" class="nav-tabs">
-      <li [ngbNavItem]="'status'">
+      <li [ngbNavItem]="'status'" role="presentation">
         <a ngbNavLink>{{'health-page.status-tab' | translate}}</a>
         <ng-template ngbNavContent>
           <div id="status">
@@ -10,7 +10,7 @@ <h2>{{'health-page.heading' | translate}}</h2>
           </div>
         </ng-template>
       </li>
-      <li [ngbNavItem]="'info'">
+      <li [ngbNavItem]="'info'" role="presentation">
         <a ngbNavLink>{{'health-page.info-tab' | translate}}</a>
         <ng-template ngbNavContent>
           <div id="info">
@@ -21,7 +21,7 @@ <h2>{{'health-page.heading' | translate}}</h2>
     </ul>
     <div [ngbNavOutlet]="nav" class="mt-2"></div>
   </div>
-  <ds-alert *ngIf="!(healthResponse | async) || !(healthInfoResponse | async)" [type]="'alert-danger'" [content]="'health-page.error.msg'"></ds-alert>
+  <ds-alert *ngIf="!(healthResponse | async) || !(healthInfoResponse | async)" [type]="AlertType.Error" [content]="'health-page.error.msg'"></ds-alert>
 </div>
 
 
diff --git a/src/app/health-page/health-page.component.ts b/src/app/health-page/health-page.component.ts
index aa7bd7cba46..5c3c7ed70e2 100644
--- a/src/app/health-page/health-page.component.ts
+++ b/src/app/health-page/health-page.component.ts
@@ -5,6 +5,7 @@ import { take } from 'rxjs/operators';
 
 import { HealthService } from './health.service';
 import { HealthInfoResponse, HealthResponse } from './models/health-component.model';
+import { AlertType } from '../shared/alert/alert-type';
 
 @Component({
   selector: 'ds-health-page',
@@ -33,6 +34,8 @@ export class HealthPageComponent implements OnInit {
    */
   healthInfoResponseInitialised: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
+  readonly AlertType = AlertType;
+
   constructor(private healthDataService: HealthService) {
   }
 
diff --git a/src/app/health-page/health-panel/health-component/health-component.component.html b/src/app/health-page/health-panel/health-component/health-component.component.html
index 1f29c8c9fcc..f962e66052e 100644
--- a/src/app/health-page/health-panel/health-component/health-component.component.html
+++ b/src/app/health-page/health-panel/health-component/health-component.component.html
@@ -1,16 +1,16 @@
 <ng-container *ngIf="healthComponent?.components">
   <div *ngFor="let entry of healthComponent?.components | dsObjNgFor" class="mb-3 border-bottom" data-test="collapse">
-    <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
+    <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="collapse.toggle()">
       <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!collapse.collapsed"
-              aria-controls="collapseExample">
+              [attr.aria-controls]="'health-component-' + entry.key + 'content'">
         {{ entry.key | titlecase }}
       </button>
-      <div class="d-inline-block">
+      <div class="d-flex my-auto">
         <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
         <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
       </div>
     </div>
-    <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+    <div #collapse="ngbCollapse" [id]="'health-component-' + entry.key + 'content'" [ngbCollapse]="isCollapsed">
       <div class="card border-0">
         <div class="card-body">
           <ds-health-component [healthComponent]="entry.value"
diff --git a/src/app/health-page/health-panel/health-panel.component.html b/src/app/health-page/health-panel/health-panel.component.html
index 2d67fa537b6..ec2a27ce408 100644
--- a/src/app/health-page/health-panel/health-panel.component.html
+++ b/src/app/health-page/health-panel/health-panel.component.html
@@ -1,15 +1,18 @@
-<p class="h4">{{'health-page.status' | translate}} : <ds-health-status [status]="healthResponse.status"></ds-health-status></p>
+<p class="h4">
+  {{'health-page.status' | translate}}:
+  <ds-health-status [status]="healthResponse.status" class="d-inline-flex"></ds-health-status>
+</p>
 <ngb-accordion #acc="ngbAccordion" [activeIds]="activeId">
   <ngb-panel [id]="entry.key" *ngFor="let entry of healthResponse.components | dsObjNgFor">
     <ng-template ngbPanelHeader>
-      <div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle(entry.key)" data-test="component">
-        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!acc.isExpanded(entry.key)"
-                aria-controls="collapsePanels">
+      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle(entry.key)" data-test="component">
+        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded(entry.key)"
+                [attr.aria-controls]="'health-panel-' + entry.key + '-content'">
           {{ getPanelLabel(entry.key) | titlecase }}
         </button>
-        <div class="text-right d-flex">
+        <div class="text-right d-flex gap-2">
           <ds-health-status [status]="entry.value?.status"></ds-health-status>
-          <div class="ml-3 d-inline-block">
+          <div class="d-flex my-auto">
             <span *ngIf="acc.isExpanded(entry.key)" class="fas fa-chevron-up fa-fw"></span>
             <span *ngIf="!acc.isExpanded(entry.key)" class="fas fa-chevron-down fa-fw"></span>
           </div>
@@ -17,9 +20,9 @@
       </div>
     </ng-template>
     <ng-template ngbPanelContent>
-      <ds-health-component [healthComponent]="entry.value" [healthComponentName]="entry.key"></ds-health-component>
+      <ds-health-component [healthComponent]="entry.value" [healthComponentName]="entry.key"
+                           [id]="'health-panel-' + entry.key + '-content'" role="presentation">
+      </ds-health-component>
     </ng-template>
   </ngb-panel>
 </ngb-accordion>
-
-
diff --git a/src/app/health-page/health-panel/health-status/health-status.component.html b/src/app/health-page/health-panel/health-status/health-status.component.html
index 38a6f726018..e8710a07600 100644
--- a/src/app/health-page/health-panel/health-status/health-status.component.html
+++ b/src/app/health-page/health-panel/health-status/health-status.component.html
@@ -1,12 +1,12 @@
 <ng-container [ngSwitch]="status">
   <i *ngSwitchCase="HealthStatus.UP"
-     class="fa fa-check-circle text-success ml-2 mt-1"
+     class="fa fa-check-circle text-success my-auto"
      ngbTooltip="{{'health-page.status.ok.info' | translate}}" container="body" ></i>
   <i *ngSwitchCase="HealthStatus.UP_WITH_ISSUES"
-     class="fa fa-exclamation-triangle text-warning ml-2 mt-1"
+     class="fa fa-exclamation-triangle text-warning my-auto"
      ngbTooltip="{{'health-page.status.warning.info' | translate}}" container="body"></i>
   <i *ngSwitchCase="HealthStatus.DOWN"
-     class="fa fa-times-circle text-danger ml-2 mt-1"
+     class="fa fa-times-circle text-danger my-auto"
      ngbTooltip="{{'health-page.status.error.info' | translate}}" container="body"></i>
 
 </ng-container>
diff --git a/src/app/health-page/health-panel/health-status/health-status.component.scss b/src/app/health-page/health-panel/health-status/health-status.component.scss
index e69de29bb2d..79ff2d52696 100644
--- a/src/app/health-page/health-panel/health-status/health-status.component.scss
+++ b/src/app/health-page/health-panel/health-status/health-status.component.scss
@@ -0,0 +1,3 @@
+:host {
+  display: flex;
+}

From 3bdfc386e9d40321794c118dae55fd672bb06f76 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Mon, 27 Nov 2023 23:03:05 +0100
Subject: [PATCH 07/21] Fix System-wide Alert accessibility issues

- Added missing aria-label to buttons
---
 .../alert-form/system-wide-alert-form.component.html        | 6 ++++--
 src/assets/i18n/en.json5                                    | 2 ++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
index 169081e2777..d1de00bea6e 100644
--- a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
+++ b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
@@ -30,6 +30,7 @@ <h2 id="header">{{'system-wide-alert.form.header' | translate}}</h2>
     <div class="row">
         <div class="col mb-2 d-flex align-items-end">
             <ui-switch size="small"
+                       [ariaLabel]="'system-wide-alert.form.label.countdownTo.enable' | translate"
                        [checked]="counterEnabled$ |async"
                        (change)="setCounterEnabled($event)"></ui-switch>
             <span class="ml-2">{{ 'system-wide-alert.form.label.countdownTo.enable' | translate }}</span>
@@ -49,8 +50,9 @@ <h2 id="header">{{'system-wide-alert.form.header' | translate}}</h2>
                             #d="ngbDatepicker"
                             (ngModelChange)="updatePreviewTime()"
                     />
-                    <button class="btn btn-outline-secondary fas fa-calendar" (click)="d.toggle()"
-                            type="button"></button>
+                    <button [attr.aria-label]="'system-wide-alert-form.select-date-by-calendar' | translate"
+                            (click)="d.toggle()" class="btn btn-outline-secondary fas fa-calendar" type="button">
+                    </button>
                 </div>
             </div>
             <div class="col-12 d-md-none">
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index ebe515921d4..7392b3da7ac 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -5168,6 +5168,8 @@
 
   "system-wide-alert.form.label.countdownTo.hint": "Hint: Set a countdown timer. When enabled, a date can be set in the future and the system-wide alert banner will perform a countdown to the set date. When this timer ends, it will disappear from the alert. The server will NOT be automatically stopped.",
 
+  "system-wide-alert-form.select-date-by-calendar": "Select date using calendar",
+
   "system-wide-alert.form.label.preview": "System-wide alert preview",
 
   "system-wide-alert.form.update.success": "The system-wide alert was successfully updated",

From 4ea487cc0d9df74bee2ca286f5b4f1745bb31a1f Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Mon, 27 Nov 2023 23:18:56 +0100
Subject: [PATCH 08/21] Fix Processes Overview accessibility issues

- Added missing aria-label to delete button
---
 .../process-page/overview/process-overview.component.html | 8 +++++---
 src/assets/i18n/en.json5                                  | 2 ++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
index 5bf5fee79f2..dcad265490a 100644
--- a/src/app/process-page/overview/process-overview.component.html
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -44,9 +44,11 @@ <h2 class="flex-grow-1">{{'process.overview.title' | translate}}</h2>
                     <td>{{process.endTime | date:dateFormat:'UTC'}}</td>
                     <td>{{process.processStatus}}</td>
                     <td>
-                        <button class="btn btn-outline-danger"
-                                (click)="processBulkDeleteService.toggleDelete(process.processId)"><i
-                                class="fas fa-trash"></i></button>
+                        <button [attr.aria-label]="'process.overview.delete-process' | translate"
+                                (click)="processBulkDeleteService.toggleDelete(process.processId)"
+                                class="btn btn-outline-danger">
+                          <i class="fas fa-trash"></i>
+                        </button>
                     </td>
                 </tr>
                 </tbody>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 7392b3da7ac..f6630d594db 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3242,6 +3242,8 @@
 
   "process.overview.delete": "Delete {{count}} processes",
 
+  "process.overview.delete-process": "Delete process",
+
   "process.overview.delete.clear": "Clear delete selection",
 
   "process.overview.delete.processing": "{{count}} process(es) are being deleted. Please wait for the deletion to fully complete. Note that this can take a while.",

From 52c0977489063689dba99caf004e4120a85e9fc9 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 28 Nov 2023 00:20:35 +0100
Subject: [PATCH 09/21] Fix Create a new process page accessibility issues

- Added missing aria-label to delete buttons
- Moved hardcoded translation to translation files
- Fix color contrast issues on buttons
- Fix minor alignment issues
- Added missing aria labels to input and select elements
---
 .../process-page/form/process-form.component.html    |  6 +++---
 .../parameter-select/parameter-select.component.html | 12 ++++++++----
 .../parameter-select.component.spec.ts               |  7 +++++--
 .../boolean-value-input.component.html               |  2 +-
 .../boolean-value-input.component.spec.ts            |  5 ++++-
 .../date-value-input/date-value-input.component.html |  4 ++--
 .../date-value-input/date-value-input.component.scss |  5 +++++
 .../file-value-input/file-value-input.component.html |  2 +-
 .../string-value-input.component.html                |  4 ++--
 .../string-value-input.component.scss                |  5 +++++
 src/assets/i18n/en.json5                             |  8 ++++++++
 11 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/src/app/process-page/form/process-form.component.html b/src/app/process-page/form/process-form.component.html
index ce6d62efec3..c55592f3e77 100644
--- a/src/app/process-page/form/process-form.component.html
+++ b/src/app/process-page/form/process-form.component.html
@@ -3,12 +3,12 @@
         <h2 class="col-12">
             {{headerKey | translate}}
         </h2>
-        <div class="col-12 col-md-6">
+        <div class="col-12 col-md-6 mb-2">
             <form #form="ngForm" (ngSubmit)="submitForm(form)">
                 <ds-scripts-select [script]="selectedScript" (select)="selectedScript = $event; parameters = undefined"></ds-scripts-select>
                 <ds-process-parameters [initialParams]="parameters" [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
-                <button [routerLink]="['/processes']" class="btn btn-light float-left">{{ 'process.new.cancel' | translate }}</button>
-                <button type="submit" class="btn btn-light float-right">{{ 'process.new.submit' | translate }}</button>
+                <a [routerLink]="['/processes']" class="btn btn-danger float-left">{{ 'process.new.cancel' | translate }}</a>
+                <button type="submit" class="btn btn-primary float-right">{{ 'process.new.submit' | translate }}</button>
             </form>
         </div>
         <div class="col-12 col-md-6">
diff --git a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
index 4bf06bbadec..1f1559b50bd 100644
--- a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
+++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
@@ -1,16 +1,20 @@
-<div class="form-row mb-2 mx-0">
+<div class="form-row gap-2 mb-2 mx-0">
     <select id="process-parameters"
             class="form-control col"
             name="parameter-{{index}}"
+            [attr.aria-label]="'process.new.select-parameter' | translate"
             [(ngModel)]="selectedParameter"
             #param="ngModel">
-        <option [ngValue]="undefined">Add a parameter...</option>
+        <option [ngValue]="undefined">{{ 'process.new.add-parameter' | translate }}</option>
         <option *ngFor="let param of parameters" [ngValue]="param.name">
             {{param.nameLong || param.name}}
         </option>
     </select>
-    <ds-parameter-value-input [initialValue]="parameterValue.value" [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col" [index]="index"></ds-parameter-value-input>
-    <button *ngIf="removable" class="btn btn-light col-1 remove-button" (click)="removeParameter.emit(parameterValue);"><span class="fas fa-trash"></span></button>
+    <ds-parameter-value-input [initialValue]="parameterValue.value" [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col px-0" [index]="index"></ds-parameter-value-input>
+    <button *ngIf="removable" [attr.aria-label]="'process.new.delete-parameter' | translate"
+            (click)="removeParameter.emit(parameterValue);" class="btn btn-danger col-1 remove-button">
+      <i class="fas fa-trash"></i>
+    </button>
     <span *ngIf="!removable" class="col-1"></span>
 </div>
 
diff --git a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts
index 56fece56b40..818a292e338 100644
--- a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts
+++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts
@@ -1,5 +1,5 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { TranslateModule } from '@ngx-translate/core';
 import { ParameterSelectComponent } from './parameter-select.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -33,7 +33,10 @@ describe('ParameterSelectComponent', () => {
   beforeEach(waitForAsync(() => {
     init();
     TestBed.configureTestingModule({
-      imports: [FormsModule],
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot(),
+      ],
       declarations: [ParameterSelectComponent],
       schemas: [NO_ERRORS_SCHEMA]
     })
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
index 914b331413b..68171a23b29 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
@@ -1 +1 @@
-<input type="hidden" value="true" name="boolean-value-{{index}}" id="boolean-value-{{index}}"/>
+<input [attr.aria-label]="'process.new.parameter.label' | translate" type="hidden" value="true" name="boolean-value-{{index}}" id="boolean-value-{{index}}"/>
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
index 38f119ad5bb..76b01b87096 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
+import { TranslateModule } from '@ngx-translate/core';
 import { BooleanValueInputComponent } from './boolean-value-input.component';
 
 describe('BooleanValueInputComponent', () => {
@@ -8,6 +8,9 @@ describe('BooleanValueInputComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+      ],
       declarations: [BooleanValueInputComponent]
     })
       .compileComponents();
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
index f367d3779f2..4e77f4ed1b9 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
@@ -1,6 +1,6 @@
-<input required #string="ngModel" type="text" class="form-control" name="date-value-{{index}}" id="date-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
+<input [attr.aria-label]="'process.new.parameter.label' | translate" required #string="ngModel" type="text" class="form-control" name="date-value-{{index}}" id="date-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
 <div *ngIf="string.invalid && (string.dirty || string.touched)"
-     class="alert alert-danger validation-error">
+     class="alert alert-danger validation-error mb-0">
     <div *ngIf="string.errors.required">
         {{'process.new.parameter.string.required' | translate}}
     </div>
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss
index e69de29bb2d..8c6325f95a1 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--bs-spacer) / 2);
+}
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
index cac3fbd82d5..a741eacc867 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
@@ -1,5 +1,5 @@
 <label for="file-upload-{{index}}" class="d-flex align-items-center m-0">
-    <span class="btn btn-light">
+    <span class="btn btn-primary">
         {{'process.new.parameter.file.upload-button' | translate}}
     </span>
     <span class="file-name ml-1">{{fileObject?.name}}</span>
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
index 246c62a0f61..bf60f9f0249 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
@@ -1,6 +1,6 @@
-<input required #string="ngModel" type="text" name="string-value-{{index}}" class="form-control" id="string-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
+<input [attr.aria-label]="'process.new.parameter.label' | translate" required #string="ngModel" type="text" name="string-value-{{index}}" class="form-control" id="string-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
 <div *ngIf="string.invalid && (string.dirty || string.touched)"
-     class="alert alert-danger validation-error">
+     class="alert alert-danger validation-error mb-0">
     <div *ngIf="string.errors.required">
         {{'process.new.parameter.string.required' | translate}}
     </div>
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss
index e69de29bb2d..8c6325f95a1 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--bs-spacer) / 2);
+}
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index f6630d594db..133d63feb50 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3136,6 +3136,14 @@
 
   "process.new.select-parameters": "Parameters",
 
+  "process.new.select-parameter": "Select parameter",
+
+  "process.new.add-parameter": "Add a parameter...",
+
+  "process.new.delete-parameter": "Delete parameter",
+
+  "process.new.parameter.label": "Parameter value",
+
   "process.new.cancel": "Cancel",
 
   "process.new.submit": "Save",

From 120835cfcde75162e26ba7c52574327513e725d3 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 28 Nov 2023 00:36:16 +0100
Subject: [PATCH 10/21] Fix Process detail accessibility issues

- Made Process Output keyboard accessible
---
 .../process-detail-field/process-detail-field.component.spec.ts | 2 +-
 src/app/process-page/detail/process-detail.component.html       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/process-page/detail/process-detail-field/process-detail-field.component.spec.ts b/src/app/process-page/detail/process-detail-field/process-detail-field.component.spec.ts
index 57b596b8b60..ba0c946bfdf 100644
--- a/src/app/process-page/detail/process-detail-field/process-detail-field.component.spec.ts
+++ b/src/app/process-page/detail/process-detail-field/process-detail-field.component.spec.ts
@@ -32,7 +32,7 @@ describe('ProcessDetailFieldComponent', () => {
   });
 
   it('should display the given title', () => {
-    const header = fixture.debugElement.query(By.css('h4')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
     expect(header.textContent).toContain(title);
   });
 });
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index 5f905cbfff3..c52ef3827d8 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -53,7 +53,7 @@ <h2 class="flex-grow-1">
         </button>
         <ds-themed-loading *ngIf="retrievingOutputLogs$ | async" class="ds-themed-loading"
                            message="{{ 'process.detail.logs.loading' | translate }}"></ds-themed-loading>
-        <pre class="font-weight-bold text-secondary bg-light p-3"
+        <pre class="font-weight-bold text-secondary bg-light p-3" tabindex="0"
              *ngIf="showOutputLogs && (outputLogs$ | async)?.length > 0">{{ (outputLogs$ | async) }}</pre>
         <p id="no-output-logs-message" *ngIf="(!(retrievingOutputLogs$ | async) && showOutputLogs)
       && !(outputLogs$ | async) || (outputLogs$ | async)?.length == 0 || !process._links.output">

From 57cc34cdd1ee23c36f87d4ef7a621482ee16a049 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 28 Nov 2023 01:03:17 +0100
Subject: [PATCH 11/21] Fix Bitstream format accessibility issues

- Added missing aria-labels to input checkboxes
- Fixed minor css alignment
---
 .../add-bitstream-format/add-bitstream-format.component.html | 4 ++--
 .../bitstream-formats/bitstream-formats.component.html       | 5 +++--
 .../edit-bitstream-format.component.html                     | 4 ++--
 src/assets/i18n/en.json5                                     | 2 ++
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html b/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html
index 2b65b369b29..24c97051c55 100644
--- a/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html
+++ b/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html
@@ -2,10 +2,10 @@
     <div class="row">
         <div class="col-12 mb-4">
             <h2 id="sub-header"
-                class="border-bottom mb-2">{{ 'admin.registries.bitstream-formats.create.new' | translate }}</h2>
+                class="border-bottom pb-2">{{ 'admin.registries.bitstream-formats.create.new' | translate }}</h2>
 
             <ds-bitstream-format-form (updatedFormat)="createBitstreamFormat($event)"></ds-bitstream-format-form>
 
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
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 0a2e9f0f926..45d8ed5d11c 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
@@ -2,7 +2,7 @@
   <div class="bitstream-formats row">
     <div class="col-12">
 
-      <h2 id="header" class="border-bottom pb-2 ">{{'admin.registries.bitstream-formats.head' | translate}}</h2>
+      <h2 id="header" class="border-bottom pb-2">{{'admin.registries.bitstream-formats.head' | translate}}</h2>
 
       <p id="description">{{'admin.registries.bitstream-formats.description' | translate}}</p>
       <p id="create-new" class="mb-2"><a [routerLink]="'add'" class="btn btn-success">{{'admin.registries.bitstream-formats.create.new' | translate}}</a></p>
@@ -19,7 +19,7 @@ <h2 id="header" class="border-bottom pb-2 ">{{'admin.registries.bitstream-format
           <table id="formats" class="table table-striped table-hover">
             <thead>
             <tr>
-              <th scope="col"></th>
+              <th scope="col" [attr.aria-label]="'admin.registries.bitstream-formats.select' | translate"></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>
@@ -31,6 +31,7 @@ <h2 id="header" class="border-bottom pb-2 ">{{'admin.registries.bitstream-format
               <td>
                 <label class="mb-0">
                   <input type="checkbox"
+                         [attr.aria-label]="'admin.registries.bitstream-formats.select' | translate"
                          [checked]="isSelected(bitstreamFormat) | async"
                          (change)="selectBitStreamFormat(bitstreamFormat, $event)"
                   >
diff --git a/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.html b/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.html
index f57ec9cd382..43bfbd0de01 100644
--- a/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.html
+++ b/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.html
@@ -2,10 +2,10 @@
     <div class="row">
         <div class="col-12 mb-4">
             <h2 id="sub-header"
-                class="border-bottom mb-2">{{'admin.registries.bitstream-formats.edit.head' | translate:{format: (bitstreamFormatRD$ | async)?.payload.shortDescription} }}</h2>
+                class="border-bottom pb-2">{{'admin.registries.bitstream-formats.edit.head' | translate:{format: (bitstreamFormatRD$ | async)?.payload.shortDescription} }}</h2>
 
              <ds-bitstream-format-form [bitstreamFormat]="(bitstreamFormatRD$ | async)?.payload" (updatedFormat)="updateFormat($event)"></ds-bitstream-format-form>
 
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 133d63feb50..dbf32bb7074 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -142,6 +142,8 @@
 
   "admin.registries.bitstream-formats.title": "Bitstream Format Registry",
 
+  "admin.registries.bitstream-formats.select": "Select bitstream format",
+
   "admin.registries.metadata.breadcrumbs": "Metadata registry",
 
   "admin.registries.metadata.description": "The metadata registry maintains a list of all metadata fields available in the repository. These fields may be divided amongst multiple schemas. However, DSpace requires the qualified Dublin Core schema.",

From 09bf8af03cbb9fccba459bc9bcb8a7b70716f3c5 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 3 Dec 2023 05:15:04 +0100
Subject: [PATCH 12/21] Fix resource policy accessibility issues

---
 .../entry/resource-policy-entry.component.html            | 4 +++-
 .../resource-policies/resource-policies.component.html    | 6 ++++--
 src/assets/i18n/en.json5                                  | 8 ++++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

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 5a9494fe00b..a14dde366e6 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,7 +5,9 @@
            [id]="entry.id"
            [ngModel]="entry.checked"
            (ngModelChange)="this.toggleCheckbox.emit($event);">
-    <label class="custom-control-label" [for]="entry.id"></label>
+    <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>
   </div>
 </td>
 <th scope="row">
diff --git a/src/app/shared/resource-policies/resource-policies.component.html b/src/app/shared/resource-policies/resource-policies.component.html
index 277f6e49988..b3dda9091d9 100644
--- a/src/app/shared/resource-policies/resource-policies.component.html
+++ b/src/app/shared/resource-policies/resource-policies.component.html
@@ -38,11 +38,13 @@
       <tr *ngIf="(getResourcePolicies() | async)?.length > 0" class="text-center">
         <th>
           <div class="custom-control custom-checkbox">
-            <input type="checkbox"
+            <input #selectAllBtn type="checkbox"
                    class="custom-control-input"
                    [id]="'selectAll_' + resourceUUID"
                    (change)="selectAllCheckbox($event)">
-            <label class="custom-control-label" [for]="'selectAll_' + resourceUUID"></label>
+            <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>
           </div>
         </th>
         <th>{{'resource-policies.table.headers.id' | translate}}</th>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index dbf32bb7074..1522723bdd3 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3610,6 +3610,14 @@
 
   "resource-policies.table.headers.group": "Group",
 
+  "resource-policies.table.headers.select-all": "Select all",
+
+  "resource-policies.table.headers.deselect-all": "Deselect all",
+
+  "resource-policies.table.headers.select": "Select",
+
+  "resource-policies.table.headers.deselect": "Deselect",
+
   "resource-policies.table.headers.id": "ID",
 
   "resource-policies.table.headers.name": "Name",

From 5b21d14583f8b1ca22f889ee4c24fc7e54579fa7 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 3 Dec 2023 15:15:52 +0100
Subject: [PATCH 13/21] Fix item mapper accessibility issues

- Added missing aria-labels to input checkboxes
- Fixed role="tablist" not having direct role="tab" by adding role="presentation" on the li elements
---
 .../collection-item-mapper.component.html                     | 4 ++--
 .../object-select/item-select/item-select.component.html      | 4 ++--
 src/assets/i18n/en.json5                                      | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html b/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html
index a48c4d15bfd..649aa9b43db 100644
--- a/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html
+++ b/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html
@@ -6,7 +6,7 @@ <h2>{{'collection.edit.item-mapper.head' | translate}}</h2>
       <p>{{'collection.edit.item-mapper.description' | translate}}</p>
 
       <ul ngbNav (navChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbNav" class="nav-tabs">
-        <li [ngbNavItem]="'browseTab'">
+        <li [ngbNavItem]="'browseTab'" role="presentation">
           <a ngbNavLink>{{'collection.edit.item-mapper.tabs.browse' | translate}}</a>
           <ng-template ngbNavContent>
             <div class="mt-2">
@@ -23,7 +23,7 @@ <h2>{{'collection.edit.item-mapper.head' | translate}}</h2>
             </div>
           </ng-template>
         </li>
-        <li [ngbNavItem]="'mapTab'">
+        <li [ngbNavItem]="'mapTab'" role="presentation">
           <a ngbNavLink>{{'collection.edit.item-mapper.tabs.map' | translate}}</a>
           <ng-template ngbNavContent>
             <div class="row mt-2">
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 7f8ff943a37..8cdc8ffb2d3 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></th>
+          <th aria-hidden="true"></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>
@@ -19,7 +19,7 @@
         </thead>
         <tbody>
         <tr *ngFor="let item of itemsRD?.payload?.page">
-          <td><input [disabled]="!(canSelect(item) | async)" class="item-checkbox" [ngModel]="getSelected(item.id) | async" (change)="switch(item.id)" type="checkbox" name="{{item.id}}"></td>
+          <td><input #selectItemBtn [attr.aria-label]="(selectItemBtn.checked ? 'item.select.table.deselect' : 'item.select.table.select') | translate" [disabled]="!(canSelect(item) | async)" class="item-checkbox" [ngModel]="getSelected(item.id) | async" (change)="switch(item.id)" type="checkbox" name="{{item.id}}"></td>
           <td *ngIf="!hideCollection">
             <span *ngVar="(item.owningCollection | async)?.payload as collection">
               <a *ngIf="collection" [routerLink]="['/collections', collection?.id]">
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 1522723bdd3..3fa71678b86 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2508,6 +2508,10 @@
 
   "item.select.empty": "No items to show",
 
+  "item.select.table.select": "Select item",
+
+  "item.select.table.deselect": "Deselect item",
+
   "item.select.table.author": "Author",
 
   "item.select.table.collection": "Collection",

From 1db83ba3c5529fdf8dadddf8431b2dac029cfa0e Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 3 Dec 2023 15:42:13 +0100
Subject: [PATCH 14/21] Fix collection mapper accessibility issues

- Added missing aria-labels to input checkboxes
- Fixed multiple tab related accessibility issues
---
 .../item-page/edit-item-page/edit-item-page.component.html  | 6 ++++--
 .../item-collection-mapper.component.html                   | 4 ++--
 .../collection-select/collection-select.component.html      | 4 ++--
 src/assets/i18n/en.json5                                    | 4 ++++
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/item-page/edit-item-page/edit-item-page.component.html b/src/app/item-page/edit-item-page/edit-item-page.component.html
index c370fe4f20d..4aa4c9af161 100644
--- a/src/app/item-page/edit-item-page/edit-item-page.component.html
+++ b/src/app/item-page/edit-item-page/edit-item-page.component.html
@@ -4,11 +4,13 @@
             <h2 class="border-bottom">{{'item.edit.head' | translate}}</h2>
             <div class="pt-2">
                 <ul class="nav nav-tabs justify-content-start" role="tablist">
-                    <li *ngFor="let page of pages" class="nav-item" [attr.aria-selected]="page.page === currentPage" role="tab">
+                    <li *ngFor="let page of pages" class="nav-item" role="presentation">
                         <a *ngIf="(page.enabled | async)"
+                           [attr.aria-selected]="page.page === currentPage"
                            class="nav-link"
                            [ngClass]="{'active' : page.page === currentPage}"
-                           [routerLink]="['./' + page.page]">
+                           [routerLink]="['./' + page.page]"
+                           role="tab">
                             {{'item.edit.tabs.' + page.page + '.head' | translate}}
                         </a>
                         <span [ngbTooltip]="'item.edit.tabs.disabled.tooltip' | translate">
diff --git a/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html b/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
index c522b8a9c53..1d025f65141 100644
--- a/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
+++ b/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
@@ -6,7 +6,7 @@ <h2>{{'item.edit.item-mapper.head' | translate}}</h2>
       <p>{{'item.edit.item-mapper.description' | translate}}</p>
 
       <ul ngbNav (navChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbNav" class="nav-tabs">
-        <li [ngbNavItem]="'browseTab'">
+        <li [ngbNavItem]="'browseTab'" role="presentation">
           <a ngbNavLink>{{'item.edit.item-mapper.tabs.browse' | translate}}</a>
           <ng-template ngbNavContent>
             <div class="mt-2">
@@ -22,7 +22,7 @@ <h2>{{'item.edit.item-mapper.head' | translate}}</h2>
             </div>
           </ng-template>
         </li>
-        <li [ngbNavItem]="'mapTab'">
+        <li [ngbNavItem]="'mapTab'" role="presentation">
           <a ngbNavLink>{{'item.edit.item-mapper.tabs.map' | translate}}</a>
           <ng-template ngbNavContent>
             <div class="row mt-2">
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 9b87f69c040..7d4dadb2e32 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,13 +11,13 @@
       <table id="collection-select" class="table table-striped table-hover">
         <thead>
           <tr>
-            <th></th>
+            <th aria-hidden="true"></th>
             <th scope="col">{{'collection.select.table.title' | translate}}</th>
           </tr>
         </thead>
         <tbody>
           <tr *ngFor="let collection of collectionsRD?.payload?.page">
-            <td><input class="collection-checkbox" [ngModel]="getSelected(collection.id) | async" (change)="switch(collection.id)" type="checkbox" name="{{collection.id}}"></td>
+            <td><input #selectCollectionBtn [attr.aria-label]="(selectCollectionBtn.checked ? 'collection.select.table.deselect' : 'collection.select.table.select') | translate" class="collection-checkbox" [ngModel]="getSelected(collection.id) | async" (change)="switch(collection.id)" type="checkbox" name="{{collection.id}}"></td>
             <td><a [routerLink]="['/collections', collection.id]">{{ dsoNameService.getName(collection) }}</a></td>
           </tr>
         </tbody>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 3fa71678b86..b71bb6df145 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1092,6 +1092,10 @@
 
   "collection.select.empty": "No collections to show",
 
+  "collection.select.table.select": "Select collection",
+
+  "collection.select.table.deselect": "Deselect collection",
+
   "collection.select.table.title": "Title",
 
   "collection.source.controls.head": "Harvest Controls",

From 8ba17c991e76199fe03aed872ac9974309a7702f Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 3 Dec 2023 16:37:08 +0100
Subject: [PATCH 15/21] Fixed item page accessibility issues

---
 .../bitstream-download-page.component.html             |  2 +-
 .../dso-edit-metadata-value.component.html             |  2 ++
 .../bitstreams/upload/upload-bitstream.component.html  |  2 +-
 .../file-section/full-file-section.component.html      |  4 ++--
 .../tabbed-related-entities-search.component.html      |  2 +-
 .../item-page/versions/item-versions.component.html    |  7 ++++---
 .../file-download-link.component.html                  |  2 +-
 .../file-download-link.component.spec.ts               |  4 ++++
 .../dynamic-lookup-relation-modal.component.html       |  6 +++---
 .../form/resource-policy-form.component.html           |  4 ++--
 src/assets/i18n/en.json5                               | 10 ++++++++++
 11 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.html b/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.html
index af3afe98f87..1467ffb0cc8 100644
--- a/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.html
+++ b/src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <h3>{{'bitstream.download.page' | translate:{ bitstream: dsoNameService.getName((bitstream$ | async)) } }}</h3>
+  <h1 class="h2">{{'bitstream.download.page' | translate:{ bitstream: dsoNameService.getName((bitstream$ | async)) } }}</h1>
   <div class="pt-3">
     <button (click)="back()" class="btn btn-outline-secondary">
       <i class="fas fa-arrow-left"></i> {{'bitstream.download.page.back' | translate}}
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
index 525b42610b4..2701ee24ab3 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
@@ -4,6 +4,7 @@
   <div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex align-items-center" *ngVar="(mdRepresentation$ | async) as mdRepresentation" role="cell">
     <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing && !mdRepresentation">{{ mdValue.newValue.value }}</div>
     <textarea class="form-control" rows="5" *ngIf="mdValue.editing && !mdRepresentation" [(ngModel)]="mdValue.newValue.value"
+              [attr.aria-label]="(dsoType + '.edit.metadata.edit.value') | translate"
               [dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
     <div class="d-flex" *ngIf="mdRepresentation">
       <a class="mr-2" target="_blank" [routerLink]="mdRepresentationItemRoute$ | async">{{ mdRepresentationName$ | async }}</a>
@@ -13,6 +14,7 @@
   <div class="ds-flex-cell ds-lang-cell" role="cell">
     <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing">{{ mdValue.newValue.language }}</div>
     <input class="form-control" type="text" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.language"
+           [attr.aria-label]="(dsoType + '.edit.metadata.edit.language') | translate"
            [dsDebounce]="300" (onDebounce)="confirm.emit(false)" />
   </div>
   <div class="text-center ds-flex-cell ds-edit-cell" role="cell">
diff --git a/src/app/item-page/bitstreams/upload/upload-bitstream.component.html b/src/app/item-page/bitstreams/upload/upload-bitstream.component.html
index 1732da1235f..530471135c0 100644
--- a/src/app/item-page/bitstreams/upload/upload-bitstream.component.html
+++ b/src/app/item-page/bitstreams/upload/upload-bitstream.component.html
@@ -2,7 +2,7 @@
   <ng-container *ngIf="bundles">
     <div class="row">
       <div class="col-12 mb-2">
-        <h2>{{'item.bitstreams.upload.title' | translate}}</h2>
+        <h1>{{'item.bitstreams.upload.title' | translate}}</h1>
         <ng-container *ngVar="(itemRD$ | async)?.payload as item">
           <div *ngIf="item">
             <span class="font-weight-bold">{{'item.bitstreams.upload.item' | translate}}</span>
diff --git a/src/app/item-page/full/field-components/file-section/full-file-section.component.html b/src/app/item-page/full/field-components/file-section/full-file-section.component.html
index 8b8603011d5..77747540794 100644
--- a/src/app/item-page/full/field-components/file-section/full-file-section.component.html
+++ b/src/app/item-page/full/field-components/file-section/full-file-section.component.html
@@ -1,7 +1,7 @@
 <ds-metadata-field-wrapper [label]="label | translate">
     <div *ngVar="(originals$ | async)?.payload as originals">
         <div *ngIf="hasValuesInBundle(originals)">
-            <h5 class="simple-view-element-header">{{"item.page.filesection.original.bundle" | translate}}</h5>
+            <h3 class="h5 simple-view-element-header">{{"item.page.filesection.original.bundle" | translate}}</h3>
             <ds-pagination *ngIf="originals?.page?.length > 0"
                            [hideGear]="true"
                            [hidePagerWhenSinglePage]="true"
@@ -44,7 +44,7 @@ <h5 class="simple-view-element-header">{{"item.page.filesection.original.bundle"
     </div>
     <div *ngVar="(licenses$ | async)?.payload as licenses">
         <div *ngIf="hasValuesInBundle(licenses)">
-            <h5 class="simple-view-element-header">{{"item.page.filesection.license.bundle" | translate}}</h5>
+            <h3 class="h5 simple-view-element-header">{{"item.page.filesection.license.bundle" | translate}}</h3>
             <ds-pagination *ngIf="licenses?.page?.length > 0"
                            [hideGear]="true"
                            [hidePagerWhenSinglePage]="true"
diff --git a/src/app/item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.html b/src/app/item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.html
index 223d4a6ed0c..1b6cc273df7 100644
--- a/src/app/item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.html
+++ b/src/app/item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="relationTypes.length > 1">
   <ul ngbNav #tabs="ngbNav" [destroyOnHide]="true" [activeId]="activeTab$ | async" (navChange)="onTabChange($event)" class="nav-tabs">
-    <li *ngFor="let relationType of relationTypes" [ngbNavItem]="relationType.filter">
+    <li *ngFor="let relationType of relationTypes" [ngbNavItem]="relationType.filter" rel="presentation">
       <a ngbNavLink>{{'item.page.relationships.' + relationType.label | translate}}</a>
       <ng-template ngbNavContent>
         <div class="mt-4">
diff --git a/src/app/item-page/versions/item-versions.component.html b/src/app/item-page/versions/item-versions.component.html
index 176c1f0cde6..0722878f2e0 100644
--- a/src/app/item-page/versions/item-versions.component.html
+++ b/src/app/item-page/versions/item-versions.component.html
@@ -1,7 +1,7 @@
 <div *ngVar="(versionsRD$ | async)?.payload as versions">
   <div *ngVar="(versionRD$ | async)?.payload as itemVersion">
     <div class="mb-2" *ngIf="versions?.page?.length > 0 || displayWhenEmpty">
-      <h2 *ngIf="displayTitle">{{"item.version.history.head" | translate}}</h2>
+      <h2 *ngIf="displayTitle" class="h4">{{"item.version.history.head" | translate}}</h2>
       <ds-alert [type]="AlertTypeEnum.Info" *ngIf="itemVersion">
         {{ "item.version.history.selected.alert" | translate : {version: itemVersion.version} }}
       </ds-alert>
@@ -98,8 +98,9 @@ <h2 *ngIf="displayTitle">{{"item.version.history.head" | translate}}</h2>
                 <ng-container *ngIf="isThisBeingEdited(version); then editSummary else showSummary"></ng-container>
                 <ng-template #showSummary>{{version?.summary}}</ng-template>
                 <ng-template #editSummary>
-                  <input class="form-control" type="text" [(ngModel)]="versionBeingEditedSummary"
-                         (keyup.enter)="onSummarySubmit()"/>
+                  <input [attr.aria-label]="'item.version.history.table.action.editSummary' | translate"
+                         [(ngModel)]="versionBeingEditedSummary" (keyup.enter)="onSummarySubmit()"
+                         class="form-control" type="text"/>
                 </ng-template>
               </div>
 
diff --git a/src/app/shared/file-download-link/file-download-link.component.html b/src/app/shared/file-download-link/file-download-link.component.html
index 8ebe622a5ba..7a5729cc2da 100644
--- a/src/app/shared/file-download-link/file-download-link.component.html
+++ b/src/app/shared/file-download-link/file-download-link.component.html
@@ -1,5 +1,5 @@
 <a [routerLink]="(bitstreamPath$| async)?.routerLink" class="dont-break-out" [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses">
-  <span *ngIf="!(canDownload$ |async)" class="pr-1"><i class="fas fa-lock"></i></span>
+  <span *ngIf="!(canDownload$ |async)" [attr.aria-label]="'file-download-link.restricted' | translate" class="pr-1"><i class="fas fa-lock"></i></span>
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </a>
 
diff --git a/src/app/shared/file-download-link/file-download-link.component.spec.ts b/src/app/shared/file-download-link/file-download-link.component.spec.ts
index 61e9ecb4aad..21e1cdae192 100644
--- a/src/app/shared/file-download-link/file-download-link.component.spec.ts
+++ b/src/app/shared/file-download-link/file-download-link.component.spec.ts
@@ -10,6 +10,7 @@ import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import { Item } from '../../core/shared/item.model';
 import { getItemModuleRoute } from '../../item-page/item-page-routing-paths';
 import { RouterLinkDirectiveStub } from '../testing/router-link-directive.stub';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('FileDownloadLinkComponent', () => {
   let component: FileDownloadLinkComponent;
@@ -41,6 +42,9 @@ describe('FileDownloadLinkComponent', () => {
 
   function initTestbed() {
     TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+      ],
       declarations: [FileDownloadLinkComponent, RouterLinkDirectiveStub],
       providers: [
         {provide: AuthorizationDataService, useValue: authorizationService},
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
index f7f07152067..6d249a9b1e5 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
@@ -9,7 +9,7 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
     <ds-themed-loading *ngIf="!item || !collection"></ds-themed-loading>
     <ng-container *ngIf="item && collection">
         <ul ngbNav #nav="ngbNav" class="nav-tabs">
-            <li ngbNavItem>
+            <li ngbNavItem role="presentation">
                 <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate  : { count: (totalInternal$ | async)} }}</a>
                 <ng-template ngbNavContent>
                     <ds-themed-dynamic-lookup-relation-search-tab
@@ -31,7 +31,7 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
                     </ds-themed-dynamic-lookup-relation-search-tab>
                 </ng-template>
             </li>
-            <li ngbNavItem *ngFor="let source of (externalSourcesRD$ | async); let idx = index">
+            <li ngbNavItem *ngFor="let source of (externalSourcesRD$ | async); let idx = index" role="presentation">
                 <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + source.id | translate  : { count: (totalExternal$ | async)[idx] } }}</a>
                 <ng-template ngbNavContent>
                     <ds-themed-dynamic-lookup-relation-external-source-tab
@@ -49,7 +49,7 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
                     </ds-themed-dynamic-lookup-relation-external-source-tab>
                 </ng-template>
             </li>
-            <li ngbNavItem *ngIf="!isEditRelationship">
+            <li ngbNavItem *ngIf="!isEditRelationship" role="presentation">
                 <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.selection-tab.tab-title' | translate : { count: (selection$ | async)?.length } }}</a>
                 <ng-template ngbNavContent>
                     <ds-dynamic-lookup-relation-selection-tab
diff --git a/src/app/shared/resource-policies/form/resource-policy-form.component.html b/src/app/shared/resource-policies/form/resource-policy-form.component.html
index 66c1fc400e9..283ff4d753f 100644
--- a/src/app/shared/resource-policies/form/resource-policy-form.component.html
+++ b/src/app/shared/resource-policies/form/resource-policy-form.component.html
@@ -9,13 +9,13 @@
     <label for="ResourcePolicyObject">{{'resource-policies.form.eperson-group-list.label' | translate}}</label>
     <input id="ResourcePolicyObject" class="form-control mb-3" type="text" [value]="resourcePolicyTargetName$ | async">
     <ul ngbNav #nav="ngbNav" class="nav-pills" [(activeId)]="navActiveId" (navChange)="onNavChange($event)">
-      <li [ngbNavItem]="'eperson'">
+      <li [ngbNavItem]="'eperson'" role="presentation">
         <a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.eperson' | translate}}</a>
         <ng-template ngbNavContent>
           <ds-eperson-group-list (select)="updateObjectSelected($event, true)"></ds-eperson-group-list>
         </ng-template>
       </li>
-      <li [ngbNavItem]="'group'">
+      <li [ngbNavItem]="'group'" role="presentation">
         <a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.group' | translate}}</a>
         <ng-template ngbNavContent>
           <ds-eperson-group-list [isListOfEPerson]="false"
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index b71bb6df145..250465fad95 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1622,6 +1622,8 @@
 
   "feed.description": "Syndication feed",
 
+  "file-download-link.restricted": "Restricted bitstream",
+
   "file-section.error.header": "Error obtaining files for this item",
 
   "footer.copyright": "copyright © 2002-{{ year }}",
@@ -2096,6 +2098,10 @@
 
   "item.edit.metadata.discard-button": "Discard",
 
+  "item.edit.metadata.edit.language": "Edit language",
+
+  "item.edit.metadata.edit.value": "Edit value",
+
   "item.edit.metadata.edit.buttons.confirm": "Confirm",
 
   "item.edit.metadata.edit.buttons.drag": "Drag to reorder",
@@ -2616,6 +2622,10 @@
 
   "itemtemplate.edit.metadata.discard-button": "Discard",
 
+  "itemtemplate.edit.metadata.edit.language": "Edit language",
+
+  "itemtemplate.edit.metadata.edit.value": "Edit value",
+
   "itemtemplate.edit.metadata.edit.buttons.confirm": "Confirm",
 
   "itemtemplate.edit.metadata.edit.buttons.drag": "Drag to reorder",

From 30fe424cc5e079759398ac4ec8706acde476b2aa Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 3 Dec 2023 17:42:19 +0100
Subject: [PATCH 16/21] Fixed browse by vocabulary treeview accessibility
 issues

---
 .../vocabulary-treeview.component.html        | 22 +++++++++----------
 .../vocabulary-treeview.component.scss        |  4 ----
 .../vocabulary-treeview.component.ts          |  3 +++
 src/assets/i18n/en.json5                      |  2 ++
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
index db3dc31948f..432098b4637 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
@@ -1,8 +1,9 @@
-<ds-alert [content]="'vocabulary-treeview.info' | translate" [type]="'alert-info'"></ds-alert>
-<div class="treeview-header row">
+<ds-alert [content]="'vocabulary-treeview.info' | translate" [type]="AlertType.Info"></ds-alert>
+<div class="treeview-header row mb-1">
   <div class="col-12">
     <div class="input-group">
-      <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()">
+      <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()"
+             [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
       <div class="input-group-append" id="button-addon4">
         <button class="btn btn-outline-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()">
           {{'vocabulary-treeview.search.form.search' | translate}}
@@ -19,15 +20,15 @@
 </div>
 <div class="treeview-container">
   <ds-themed-loading *ngIf="loading | async" [showMessage]="false"></ds-themed-loading>
-  <h4 *ngIf="!(loading | async) && dataSource.data.length === 0" class="text-center text-muted mt-4" >
+  <h2 *ngIf="!(loading | async) && dataSource.data.length === 0" class="h4 text-center text-muted mt-4" >
     <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
-  </h4>
+  </h2>
   <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
     <!-- Leaf node -->
     <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="d-flex">
-        <button type="button" class="btn btn-default" cdkTreeNodeToggle>
-          <span class="fas fa-fw fa-angle-right invisible" aria-hidden="true"></span>
-        </button>
+      <span aria-hidden="true" type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle>
+        <i class="fas fa-fw fa-angle-right invisible"></i>
+      </span>
           <label *ngIf="multiSelect" class="d-flex align-items-center m-0 p-0 form-check"
                  [class.text-success]="node.isSelected"
                  [ngbTooltip]="node.item?.otherInformation?.note"
@@ -55,11 +56,10 @@ <h4 *ngIf="!(loading | async) && dataSource.data.length === 0" class="text-cente
 
     <!-- expandable node -->
     <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChildren" cdkTreeNodePadding class="d-flex">
-        <button type="button" class="btn btn-default" cdkTreeNodeToggle
+        <button type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle
                 [attr.aria-label]="'toggle ' + node.name"
                 (click)="loadChildren(node)">
-          <span class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"
-                aria-hidden="true"></span>
+          <i class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"></i>
         </button>
 
           <label *ngIf="multiSelect" class="d-flex align-items-center m-0 p-0 form-check"
diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.scss b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.scss
index 3f0cea10d25..3d32acac5bb 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.scss
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.scss
@@ -2,10 +2,6 @@
   text-align:left;
 }
 
-cdk-tree .btn:focus {
-  box-shadow: none !important;
-}
-
 label {
   cursor: pointer;
 }
diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
index d5a5dee1f5e..b1edda461e5 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
@@ -17,6 +17,7 @@ import { VocabularyTreeFlatDataSource } from './vocabulary-tree-flat-data-source
 import { CoreState } from '../../../core/core-state.model';
 import { VocabularyService } from '../../../core/submission/vocabularies/vocabulary.service';
 import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
+import { AlertType } from '../../alert/alert-type';
 
 /**
  * Component that shows a hierarchical vocabulary in a tree view
@@ -105,6 +106,8 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
    */
   private subs: Subscription[] = [];
 
+  readonly AlertType = AlertType;
+
   /**
    * Initialize instance variables
    *
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 250465fad95..432a0b33b40 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -4790,6 +4790,8 @@
 
   "vocabulary-treeview.search.form.search": "Search",
 
+  "vocabulary-treeview.search.form.search-placeholder": "Filter results by typing the first few letters",
+
   "vocabulary-treeview.search.no-result": "There were no items to show",
 
   "vocabulary-treeview.tree.description.nsi": "The Norwegian Science Index",

From 5566c99625d86af3222cfd3f58614bbcc3c8b23b Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 3 Dec 2023 17:43:16 +0100
Subject: [PATCH 17/21] Fixed accessibility issues about header ordering

---
 .../epeople-registry.component.html           |  8 ++++----
 .../eperson-form/eperson-form.component.html  |  6 +++---
 .../group-form/group-form.component.html      | 11 +++++-----
 .../members-list/members-list.component.html  |  8 ++++----
 .../groups-registry.component.html            |  4 ++--
 .../admin-curation-tasks.component.html       |  2 +-
 .../metadata-import-page.component.html       |  2 +-
 .../add-bitstream-format.component.html       |  4 ++--
 .../bitstream-formats.component.html          |  2 +-
 .../edit-bitstream-format.component.html      |  4 ++--
 .../edit-bitstream-page.component.html        |  2 +-
 .../browse-by-taxonomy-page.component.html    |  1 +
 .../delete-collection-page.component.html     |  2 +-
 .../collection-curate.component.html          |  2 +-
 .../collection-source.component.html          |  2 +-
 .../edit-item-template-page.component.html    |  2 +-
 .../delete-community-page.component.html      |  2 +-
 .../community-curate.component.html           |  2 +-
 .../feedback-form.component.html              |  2 +-
 ...tstream-request-a-copy-page.component.html |  2 +-
 .../edit-item-page.component.html             |  2 +-
 .../item-curate/item-curate.component.html    |  2 +-
 .../item-delete/item-delete.component.html    |  2 +-
 .../item-delete/item-delete.component.spec.ts |  2 +-
 .../item-move/item-move.component.html        |  2 +-
 .../item-private.component.spec.ts            |  2 +-
 .../item-public/item-public.component.spec.ts |  2 +-
 .../item-reinstate.component.spec.ts          |  2 +-
 .../edit-relationship-list.component.html     |  4 ++--
 .../item-withdraw.component.spec.ts           |  2 +-
 ...abstract-simple-item-action.component.html |  2 +-
 ...tract-simple-item-action.component.spec.ts |  2 +-
 .../orcid-auth/orcid-auth.component.html      |  2 +-
 .../orcid-page/orcid-page.component.html      | 20 +++++++++----------
 .../process-detail-field.component.html       |  2 +-
 .../detail/process-detail.component.html      |  4 ++--
 .../form/process-form.component.html          |  6 +++---
 .../script-help/script-help.component.html    |  2 +-
 .../overview/process-overview.component.html  |  2 +-
 .../profile-page/profile-page.component.html  |  6 +++---
 .../register-email-form.component.html        |  2 +-
 ...cess-control-form-container.component.html | 12 +++++------
 .../shared/browse-by/browse-by.component.html |  2 +-
 .../comcol-role/comcol-role.component.html    |  4 ++--
 .../edit-comcol-page.component.html           |  4 ++--
 .../comcol-page-handle.component.html         |  8 ++++----
 .../comcol-page-handle.component.scss         |  5 -----
 .../edit/resource-policy-edit.component.html  |  2 +-
 ...search-switch-configuration.component.html |  2 +-
 .../statistics-page.component.html            |  4 ++--
 .../statistics-table.component.html           |  4 ++--
 .../submission-import-external.component.html | 10 +++++-----
 .../submission-import-external.component.ts   |  3 +++
 .../subscriptions-page.component.html         |  4 ++--
 .../subscriptions-page.component.ts           |  3 +++
 .../system-wide-alert-form.component.html     |  2 +-
 src/assets/i18n/en.json5                      |  2 ++
 src/styles/_bootstrap_variables.scss          |  8 ++++++++
 58 files changed, 116 insertions(+), 105 deletions(-)

diff --git a/src/app/access-control/epeople-registry/epeople-registry.component.html b/src/app/access-control/epeople-registry/epeople-registry.component.html
index 4979f858193..bf7b9a2060d 100644
--- a/src/app/access-control/epeople-registry/epeople-registry.component.html
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.html
@@ -2,7 +2,7 @@
   <div class="epeople-registry row">
     <div class="col-12">
       <div class="d-flex justify-content-between border-bottom mb-3">
-        <h2 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h2>
+        <h1 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h1>
 
         <div>
           <button class="mr-auto btn btn-success addEPerson-button"
@@ -13,9 +13,9 @@ <h2 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h2>
         </div>
       </div>
 
-      <h3 id="search" class="border-bottom pb-2">{{labelPrefix + 'search.head' | translate}}
-
-      </h3>
+      <h2 id="search" class="border-bottom pb-2">
+        {{labelPrefix + 'search.head' | translate}}
+      </h2>
       <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
         <div>
           <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
diff --git a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
index 6a7b8b931ff..747d30bb897 100644
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
@@ -5,11 +5,11 @@
       <div *ngIf="epersonService.getActiveEPerson() | async; then editHeader; else createHeader"></div>
 
       <ng-template #createHeader>
-        <h2 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h2>
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h1>
       </ng-template>
 
       <ng-template #editHeader>
-        <h2 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h2>
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h1>
       </ng-template>
 
       <ds-form [formId]="formId"
@@ -45,7 +45,7 @@ <h2 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h2>
       <ds-themed-loading [showMessage]="false" *ngIf="!formGroup"></ds-themed-loading>
 
       <div *ngIf="epersonService.getActiveEPerson() | async">
-        <h5>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h5>
+        <h2>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h2>
 
         <ds-themed-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-themed-loading>
 
diff --git a/src/app/access-control/group-registry/group-form/group-form.component.html b/src/app/access-control/group-registry/group-form/group-form.component.html
index f31de0db1b5..491762a4370 100644
--- a/src/app/access-control/group-registry/group-form/group-form.component.html
+++ b/src/app/access-control/group-registry/group-form/group-form.component.html
@@ -5,11 +5,11 @@
       <div *ngIf="groupDataService.getActiveGroup() | async; then editHeader; else createHeader"></div>
 
       <ng-template #createHeader>
-        <h2 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h2>
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h1>
       </ng-template>
 
       <ng-template #editHeader>
-        <h2 class="border-bottom pb-2">
+        <h1 class="border-bottom pb-2">
           <span
             *dsContextHelp="{
               content: 'admin.access-control.groups.form.tooltip.editGroupPage',
@@ -20,7 +20,7 @@ <h2 class="border-bottom pb-2">
           >
             {{messagePrefix + '.head.edit' | translate}}
           </span>
-        </h2>
+        </h1>
       </ng-template>
 
       <ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertTypeEnum.Warning"
@@ -39,9 +39,8 @@ <h2 class="border-bottom pb-2">
           <button (click)="onCancel()" type="button"
                   class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
         </div>
-        <div after *ngIf="(canEdit$ | async) && !groupBeingEdited.permanent" class="btn-group">
-          <button class="btn btn-danger delete-button" [disabled]="!(canEdit$ | async) || groupBeingEdited.permanent"
-                  (click)="delete()" type="button">
+        <div after *ngIf="(canEdit$ | async) && !groupBeingEdited?.permanent" class="btn-group">
+          <button (click)="delete()" class="btn btn-danger delete-button" type="button">
             <i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
           </button>
         </div>
diff --git a/src/app/access-control/group-registry/group-form/members-list/members-list.component.html b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
index c0c77f44ebc..7f01e1b720e 100644
--- a/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
+++ b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
@@ -1,7 +1,7 @@
 <ng-container>
-  <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>
+  <h2 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h2>
 
-  <h4>{{messagePrefix + '.headMembers' | translate}}</h4>
+  <h3>{{messagePrefix + '.headMembers' | translate}}</h3>
 
   <ds-pagination *ngIf="(ePeopleMembersOfGroup | async)?.totalElements > 0"
                  [paginationOptions]="config"
@@ -55,7 +55,7 @@ <h4>{{messagePrefix + '.headMembers' | translate}}</h4>
     {{messagePrefix + '.no-members-yet' | translate}}
   </div>
 
-  <h4 id="search" class="border-bottom pb-2">
+  <h3 id="search" class="border-bottom pb-2">
     <span
       *dsContextHelp="{
         content: 'admin.access-control.groups.form.tooltip.editGroup.addEpeople',
@@ -66,7 +66,7 @@ <h4 id="search" class="border-bottom pb-2">
     >
       {{messagePrefix + '.search.head' | translate}}
     </span>
-  </h4>
+  </h3>
 
   <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
     <div class="flex-grow-1 mr-3">
diff --git a/src/app/access-control/group-registry/groups-registry.component.html b/src/app/access-control/group-registry/groups-registry.component.html
index 27cec262c44..bd39cbe94fb 100644
--- a/src/app/access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -2,7 +2,7 @@
   <div class="groups-registry row">
     <div class="col-12">
       <div class="d-flex justify-content-between border-bottom mb-3">
-        <h2 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h2>
+        <h1 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h1>
         <div>
           <button class="mr-auto btn btn-success"
                   [routerLink]="'create'">
@@ -12,7 +12,7 @@ <h2 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h2>
         </div>
       </div>
 
-      <h3 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | translate}}</h3>
+      <h2 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | translate}}</h2>
       <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
         <div class="flex-grow-1 mr-3">
           <div class="form-group input-group">
diff --git a/src/app/admin/admin-curation-tasks/admin-curation-tasks.component.html b/src/app/admin/admin-curation-tasks/admin-curation-tasks.component.html
index a702a7e6b09..ba3a6f45d7b 100644
--- a/src/app/admin/admin-curation-tasks/admin-curation-tasks.component.html
+++ b/src/app/admin/admin-curation-tasks/admin-curation-tasks.component.html
@@ -1,4 +1,4 @@
 <div class="container">
-    <h2>{{'admin.curation-tasks.header' |translate }}</h2>
+    <h1>{{'admin.curation-tasks.header' |translate }}</h1>
     <ds-curation-form></ds-curation-form>
 </div>
diff --git a/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html b/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html
index 24901cc11d3..73e69737ca8 100644
--- a/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html
+++ b/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <h2 id="header">{{'admin.metadata-import.page.header' | translate}}</h2>
+  <h1 id="header">{{'admin.metadata-import.page.header' | translate}}</h1>
   <p>{{'admin.metadata-import.page.help' | translate}}</p>
   <div class="form-group">
     <div class="form-check">
diff --git a/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html b/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html
index 24c97051c55..d1be68633f3 100644
--- a/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html
+++ b/src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html
@@ -1,8 +1,8 @@
 <div class="container">
     <div class="row">
         <div class="col-12 mb-4">
-            <h2 id="sub-header"
-                class="border-bottom pb-2">{{ 'admin.registries.bitstream-formats.create.new' | translate }}</h2>
+            <h1 id="sub-header"
+                class="border-bottom pb-2">{{ 'admin.registries.bitstream-formats.create.new' | translate }}</h1>
 
             <ds-bitstream-format-form (updatedFormat)="createBitstreamFormat($event)"></ds-bitstream-format-form>
 
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 45d8ed5d11c..37323d41d0e 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
@@ -2,7 +2,7 @@
   <div class="bitstream-formats row">
     <div class="col-12">
 
-      <h2 id="header" class="border-bottom pb-2">{{'admin.registries.bitstream-formats.head' | translate}}</h2>
+      <h1 id="header" class="border-bottom pb-2">{{'admin.registries.bitstream-formats.head' | translate}}</h1>
 
       <p id="description">{{'admin.registries.bitstream-formats.description' | translate}}</p>
       <p id="create-new" class="mb-2"><a [routerLink]="'add'" class="btn btn-success">{{'admin.registries.bitstream-formats.create.new' | translate}}</a></p>
diff --git a/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.html b/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.html
index 43bfbd0de01..efcced2a87c 100644
--- a/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.html
+++ b/src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.html
@@ -1,8 +1,8 @@
 <div class="container">
     <div class="row">
         <div class="col-12 mb-4">
-            <h2 id="sub-header"
-                class="border-bottom pb-2">{{'admin.registries.bitstream-formats.edit.head' | translate:{format: (bitstreamFormatRD$ | async)?.payload.shortDescription} }}</h2>
+            <h1 id="sub-header"
+                class="border-bottom pb-2">{{'admin.registries.bitstream-formats.edit.head' | translate:{format: (bitstreamFormatRD$ | async)?.payload.shortDescription} }}</h1>
 
              <ds-bitstream-format-form [bitstreamFormat]="(bitstreamFormatRD$ | async)?.payload" (updatedFormat)="updateFormat($event)"></ds-bitstream-format-form>
 
diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
index 11aa3bfe75e..b306eb27214 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
@@ -8,7 +8,7 @@
         <div class="container">
           <div class="row">
             <div class="col-12">
-              <h3>{{dsoNameService.getName(bitstreamRD?.payload)}} <span class="text-muted">({{bitstreamRD?.payload?.sizeBytes | dsFileSize}})</span></h3>
+              <h1 class="h2">{{dsoNameService.getName(bitstreamRD?.payload)}} <span class="text-muted">({{bitstreamRD?.payload?.sizeBytes | dsFileSize}})</span></h1>
             </div>
           </div>
         </div>
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html b/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
index 0ae3da6847b..c24ca934032 100644
--- a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
+++ b/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
@@ -1,4 +1,5 @@
 <div class="container">
+  <h1>{{ ('browse.taxonomy_' + vocabularyName + '.title') | translate }}</h1>
   <div class="mb-3">
     <ds-vocabulary-treeview [vocabularyOptions]=vocabularyOptions
                             [multiSelect]="true"
diff --git a/src/app/collection-page/delete-collection-page/delete-collection-page.component.html b/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
index ba54bbabd59..d878d225899 100644
--- a/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
+++ b/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
@@ -2,7 +2,7 @@
     <div class="row">
         <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
             <div class="col-12 pb-4">
-                <h2 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h2>
+                <h1 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h1>
                 <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
                 <div class="form-group row">
                   <div class="col text-right space-children-mr">
diff --git a/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.html b/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.html
index 38c9d22f4ed..4fbe60d6b17 100644
--- a/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <h3>{{'collection.curate.header' |translate:{collection: (collectionName$ |async)} }}</h3>
+    <h2>{{'collection.curate.header' |translate:{collection: (collectionName$ |async)} }}</h2>
     <ds-curation-form
             [dsoHandle]="(dsoRD$|async)?.payload.handle"
     ></ds-curation-form>
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
index d7b0d0c475e..41e66610a85 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
@@ -18,7 +18,7 @@
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
         </button>
     </div>
-    <h4>{{ 'collection.edit.tabs.source.head' | translate }}</h4>
+    <h2>{{ 'collection.edit.tabs.source.head' | translate }}</h2>
     <div *ngIf="contentSource" class="form-check mb-4">
         <input type="checkbox" class="form-check-input" id="externalSourceCheck"
                [checked]="(contentSource?.harvestType !== harvestTypeNone)" (change)="changeExternalSource()">
diff --git a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
index 20afd701ffc..8d095dd2296 100644
--- a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
+++ b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-12" *ngVar="(itemRD$ | async) as itemRD">
       <ng-container *ngIf="itemRD?.hasSucceeded">
-        <h2 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: dsoNameService.getName(collection) } }}</h2>
+        <h1 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: dsoNameService.getName(collection) } }}</h1>
         <ds-themed-dso-edit-metadata [updateDataService]="itemTemplateService" [dso]="itemRD?.payload"></ds-themed-dso-edit-metadata>
         <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
       </ng-container>
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 6bb8460bc95..ef5fdade73b 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
@@ -2,7 +2,7 @@
     <div class="row">
         <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
             <div class="col-12 pb-4">
-                <h2 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h2>
+                <h1 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h1>
                 <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
                 <div class="form-group row">
                     <div class="col text-right space-children-mr">
diff --git a/src/app/community-page/edit-community-page/community-curate/community-curate.component.html b/src/app/community-page/edit-community-page/community-curate/community-curate.component.html
index 6c041d17253..5e11fdfbcea 100644
--- a/src/app/community-page/edit-community-page/community-curate/community-curate.component.html
+++ b/src/app/community-page/edit-community-page/community-curate/community-curate.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <h3>{{'community.curate.header' |translate:{community: (communityName$ |async)} }}</h3>
+    <h2>{{'community.curate.header' |translate:{community: (communityName$ |async)} }}</h2>
     <ds-curation-form
            [dsoHandle]="(dsoRD$|async)?.payload.handle"
     ></ds-curation-form>
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 a3bab3a6a38..25be4ba4458 100644
--- a/src/app/info/feedback/feedback-form/feedback-form.component.html
+++ b/src/app/info/feedback/feedback-form/feedback-form.component.html
@@ -1,7 +1,7 @@
 <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()">
-      <h2>{{ 'info.feedback.head' | translate }}</h2>
+      <h1>{{ 'info.feedback.head' | translate }}</h1>
       <p>{{ 'info.feedback.info' | translate }}</p>
       <fieldset class="col p-0">
         <div class="row">
diff --git a/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html b/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html
index 1fae737fdb9..2d4ac89fcc3 100644
--- a/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html
+++ b/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <h3 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h3>
+    <h1 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h1>
     <div *ngIf="canDownload$|async" class="alert alert-success">
         <span>{{'bitstream-request-a-copy.alert.canDownload1' | translate}}</span>
         <a [routerLink]="getBitstreamLink()">{{'bitstream-request-a-copy.alert.canDownload2'| translate}}</a>
diff --git a/src/app/item-page/edit-item-page/edit-item-page.component.html b/src/app/item-page/edit-item-page/edit-item-page.component.html
index 4aa4c9af161..1da10106f4f 100644
--- a/src/app/item-page/edit-item-page/edit-item-page.component.html
+++ b/src/app/item-page/edit-item-page/edit-item-page.component.html
@@ -1,7 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-12">
-            <h2 class="border-bottom">{{'item.edit.head' | translate}}</h2>
+            <h1 class="border-bottom">{{'item.edit.head' | translate}}</h1>
             <div class="pt-2">
                 <ul class="nav nav-tabs justify-content-start" role="tablist">
                     <li *ngFor="let page of pages" class="nav-item" role="presentation">
diff --git a/src/app/item-page/edit-item-page/item-curate/item-curate.component.html b/src/app/item-page/edit-item-page/item-curate/item-curate.component.html
index 7c7ed41bd96..22b10b28b66 100644
--- a/src/app/item-page/edit-item-page/item-curate/item-curate.component.html
+++ b/src/app/item-page/edit-item-page/item-curate/item-curate.component.html
@@ -1,5 +1,5 @@
 <div class="container mt-3">
-    <h3>{{'item.edit.curate.title' |translate:{item: (itemName$ |async)} }}</h3>
+    <h2>{{'item.edit.curate.title' |translate:{item: (itemName$ |async)} }}</h2>
     <ds-curation-form
       *ngIf="dsoRD$ | async as dsoRD"
       [dsoHandle]="dsoRD?.payload.handle"
diff --git a/src/app/item-page/edit-item-page/item-delete/item-delete.component.html b/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
index 7b1953d8922..5191e705d0b 100644
--- a/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
+++ b/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
@@ -2,7 +2,7 @@
     <div class="row">
         <div class="col-12">
 
-            <h2>{{headerMessage | translate: {id: item.handle} }}</h2>
+            <h1>{{headerMessage | translate: {id: item.handle} }}</h1>
             <p>{{descriptionMessage | translate}}</p>
             <ds-modify-item-overview [item]="item"></ds-modify-item-overview>
 
diff --git a/src/app/item-page/edit-item-page/item-delete/item-delete.component.spec.ts b/src/app/item-page/edit-item-page/item-delete/item-delete.component.spec.ts
index 2a9f7fae525..d406293828e 100644
--- a/src/app/item-page/edit-item-page/item-delete/item-delete.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-delete/item-delete.component.spec.ts
@@ -171,7 +171,7 @@ describe('ItemDeleteComponent', () => {
   });
 
   it('should render a page with messages based on the \'delete\' messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.delete.header');
     const description = fixture.debugElement.query(By.css('p')).nativeElement;
     expect(description.innerHTML).toContain('item.edit.delete.description');
diff --git a/src/app/item-page/edit-item-page/item-move/item-move.component.html b/src/app/item-page/edit-item-page/item-move/item-move.component.html
index c1a4a5b9a94..d136f003f4e 100644
--- a/src/app/item-page/edit-item-page/item-move/item-move.component.html
+++ b/src/app/item-page/edit-item-page/item-move/item-move.component.html
@@ -1,7 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-12">
-            <h2>{{'item.edit.move.head' | translate: {id: (itemRD$ | async)?.payload?.handle} }}</h2>
+            <h1>{{'item.edit.move.head' | translate: {id: (itemRD$ | async)?.payload?.handle} }}</h1>
             <p>{{'item.edit.move.description' | translate}}</p>
             <div class="row">
                 <div class="col-12">
diff --git a/src/app/item-page/edit-item-page/item-private/item-private.component.spec.ts b/src/app/item-page/edit-item-page/item-private/item-private.component.spec.ts
index 323255e3d7b..24a4aacc997 100644
--- a/src/app/item-page/edit-item-page/item-private/item-private.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-private/item-private.component.spec.ts
@@ -80,7 +80,7 @@ describe('ItemPrivateComponent', () => {
   });
 
   it('should render a page with messages based on the \'private\' messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.private.header');
     const description = fixture.debugElement.query(By.css('p')).nativeElement;
     expect(description.innerHTML).toContain('item.edit.private.description');
diff --git a/src/app/item-page/edit-item-page/item-public/item-public.component.spec.ts b/src/app/item-page/edit-item-page/item-public/item-public.component.spec.ts
index 1f741fcc59b..0174e6a6b0e 100644
--- a/src/app/item-page/edit-item-page/item-public/item-public.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-public/item-public.component.spec.ts
@@ -74,7 +74,7 @@ describe('ItemPublicComponent', () => {
   });
 
   it('should render a page with messages based on the \'public\' messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.public.header');
     const description = fixture.debugElement.query(By.css('p')).nativeElement;
     expect(description.innerHTML).toContain('item.edit.public.description');
diff --git a/src/app/item-page/edit-item-page/item-reinstate/item-reinstate.component.spec.ts b/src/app/item-page/edit-item-page/item-reinstate/item-reinstate.component.spec.ts
index 594e7b806a7..4e2b00e4e6e 100644
--- a/src/app/item-page/edit-item-page/item-reinstate/item-reinstate.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-reinstate/item-reinstate.component.spec.ts
@@ -76,7 +76,7 @@ describe('ItemReinstateComponent', () => {
   });
 
   it('should render a page with messages based on the \'reinstate\' messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.reinstate.header');
     const description = fixture.debugElement.query(By.css('p')).nativeElement;
     expect(description.innerHTML).toContain('item.edit.reinstate.description');
diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
index 7cdc903f240..d5f7901b3fb 100644
--- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
+++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
@@ -1,10 +1,10 @@
-<h5>
+<h2 class="h4">
     {{getRelationshipMessageKey() | async | translate}}
     <button class="ml-2 btn btn-success" [disabled]="(hasChanges | async)" (click)="openLookup()">
         <i class="fas fa-plus"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.relationships.edit.buttons.add" | translate}}</span>
     </button>
-</h5>
+</h2>
 <ng-container *ngVar="updates$ | async as updates">
     <ng-container *ngIf="updates && !(loading$ | async)">
         <ng-container *ngVar="updates | dsObjectValues as updateValues">
diff --git a/src/app/item-page/edit-item-page/item-withdraw/item-withdraw.component.spec.ts b/src/app/item-page/edit-item-page/item-withdraw/item-withdraw.component.spec.ts
index 3397742f5b0..1b7bff30e8b 100644
--- a/src/app/item-page/edit-item-page/item-withdraw/item-withdraw.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-withdraw/item-withdraw.component.spec.ts
@@ -74,7 +74,7 @@ describe('ItemWithdrawComponent', () => {
   });
 
   it('should render a page with messages based on the \'withdraw\' messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.withdraw.header');
     const description = fixture.debugElement.query(By.css('p')).nativeElement;
     expect(description.innerHTML).toContain('item.edit.withdraw.description');
diff --git a/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html b/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html
index b5757d1859a..67249b085ad 100644
--- a/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html
+++ b/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html
@@ -1,7 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-12">
-            <h2>{{headerMessage | translate: {id: item.handle} }}</h2>
+            <h1>{{headerMessage | translate: {id: item.handle} }}</h1>
             <p>{{descriptionMessage | translate}}</p>
             <ds-modify-item-overview [item]="item"></ds-modify-item-overview>
           <div class="space-children-mr">
diff --git a/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.spec.ts b/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.spec.ts
index 9a19837665c..b7d64787264 100644
--- a/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.spec.ts
+++ b/src/app/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.spec.ts
@@ -111,7 +111,7 @@ describe('AbstractSimpleItemActionComponent', () => {
   });
 
   it('should render a page with messages based on the provided messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.myEditAction.header');
 
     const description = fixture.debugElement.query(By.css('p')).nativeElement;
diff --git a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
index e57ce330089..fdc966bd3b8 100644
--- a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
+++ b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
@@ -1,5 +1,5 @@
 <div class="container mb-5">
-  <h2>{{'person.orcid.registry.auth' | translate}}</h2>
+  <h1>{{'person.orcid.registry.auth' | translate}}</h1>
   <ng-container *ngIf="(isLinkedToOrcid() | async); then orcidLinked; else orcidNotLinked"></ng-container>
 </div>
 
diff --git a/src/app/item-page/orcid-page/orcid-page.component.html b/src/app/item-page/orcid-page/orcid-page.component.html
index 33c3125d676..6c30fbe1114 100644
--- a/src/app/item-page/orcid-page/orcid-page.component.html
+++ b/src/app/item-page/orcid-page/orcid-page.component.html
@@ -1,13 +1,3 @@
-<div *ngIf="!(processingConnection | async) && (item | async)" class="container">
-  <div class="button-row bottom mb-3">
-    <div class="text-right">
-      <a [routerLink]="getItemPage()" role="button" class="btn btn-outline-secondary" data-test="back-button">
-        <i class="fas fa-arrow-left"></i> {{'item.orcid.return' | translate}}
-      </a>
-    </div>
-  </div>
-</div>
-
 <ds-loading *ngIf="(processingConnection | async)" [message]="'person.page.orcid.link.processing' | translate"></ds-loading>
 <div class="container" *ngIf="!(processingConnection | async) && !(connectionStatus | async)" data-test="error-box">
   <ds-alert [type]="'alert-danger'">{{'person.page.orcid.link.error.message' | translate}}</ds-alert>
@@ -17,3 +7,13 @@
   <ds-orcid-sync-setting *ngIf="isLinkedToOrcid()" [item]="(item | async)" (settingsUpdated)="updateItem()" data-test="orcid-sync-setting"></ds-orcid-sync-setting>
   <ds-orcid-queue *ngIf="isLinkedToOrcid()" [item]="(item | async)"></ds-orcid-queue>
 </ng-container>
+
+<div *ngIf="!(processingConnection | async) && (item | async)" class="container">
+  <div class="button-row bottom mb-3">
+    <div class="text-right">
+      <a [routerLink]="getItemPage()" role="button" class="btn btn-outline-secondary" data-test="back-button">
+        <i class="fas fa-arrow-left"></i> {{'item.orcid.return' | translate}}
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/src/app/process-page/detail/process-detail-field/process-detail-field.component.html b/src/app/process-page/detail/process-detail-field/process-detail-field.component.html
index ce26008c28d..2558b6cf7ac 100644
--- a/src/app/process-page/detail/process-detail-field/process-detail-field.component.html
+++ b/src/app/process-page/detail/process-detail-field/process-detail-field.component.html
@@ -1,2 +1,2 @@
-<h4 class="mt-4">{{title | translate}}</h4>
+<h2 class="h3 mt-4">{{title | translate}}</h2>
 <ng-content></ng-content>
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index c52ef3827d8..4daee064dff 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -1,9 +1,9 @@
 <div class="container" *ngIf="(processRD$ | async)?.payload as process">
     <div class="row">
       <div class="col-10">
-        <h2 class="flex-grow-1">
+        <h1 class="flex-grow-1">
           {{ 'process.detail.title' | translate:{ id: process?.processId, name: process?.scriptName } }}
-        </h2>
+        </h1>
       </div>
       <div *ngIf="refreshCounter$ | async as seconds" class="col-2 refresh-counter">
         Refreshing in {{ seconds }}s <i class="fas fa-sync-alt fa-spin"></i>
diff --git a/src/app/process-page/form/process-form.component.html b/src/app/process-page/form/process-form.component.html
index c55592f3e77..211129489e5 100644
--- a/src/app/process-page/form/process-form.component.html
+++ b/src/app/process-page/form/process-form.component.html
@@ -1,8 +1,8 @@
 <div class="container">
     <div class="row">
-        <h2 class="col-12">
+        <h1 class="col-12">
             {{headerKey | translate}}
-        </h2>
+        </h1>
         <div class="col-12 col-md-6 mb-2">
             <form #form="ngForm" (ngSubmit)="submitForm(form)">
                 <ds-scripts-select [script]="selectedScript" (select)="selectedScript = $event; parameters = undefined"></ds-scripts-select>
@@ -12,7 +12,7 @@ <h2 class="col-12">
             </form>
         </div>
         <div class="col-12 col-md-6">
-            <ds-script-help [script]="selectedScript"></ds-script-help>
+            <ds-script-help *ngIf="selectedScript" [script]="selectedScript"></ds-script-help>
         </div>
     </div>
 
diff --git a/src/app/process-page/form/script-help/script-help.component.html b/src/app/process-page/form/script-help/script-help.component.html
index f52ae4b6b99..7615edcfd49 100644
--- a/src/app/process-page/form/script-help/script-help.component.html
+++ b/src/app/process-page/form/script-help/script-help.component.html
@@ -1,5 +1,5 @@
 <div class="text-secondary">
-  <h3>{{script?.name}}</h3>
+  <h2>{{script?.name}}</h2>
   <span>{{script?.description}}</span>
 
   <table class="table-borderless mt-3">
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
index dcad265490a..3f0e1e841f4 100644
--- a/src/app/process-page/overview/process-overview.component.html
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -1,6 +1,6 @@
 <div class="container">
     <div class="d-flex">
-        <h2 class="flex-grow-1">{{'process.overview.title' | translate}}</h2>
+        <h1 class="flex-grow-1">{{'process.overview.title' | translate}}</h1>
     </div>
     <div class="d-flex justify-content-end">
         <button *ngIf="processBulkDeleteService.hasSelected()" class="btn btn-primary mr-2"
diff --git a/src/app/profile-page/profile-page.component.html b/src/app/profile-page/profile-page.component.html
index 44783da84e8..187096b3912 100644
--- a/src/app/profile-page/profile-page.component.html
+++ b/src/app/profile-page/profile-page.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngVar="(user$ | async) as user">
   <div class="container" *ngIf="user">
     <ng-container *ngIf="isResearcherProfileEnabled() | async">
-      <h3 class="mb-4">{{'profile.head' | translate}}</h3>
+      <h2 class="mb-4">{{'profile.head' | translate}}</h2>
       <div class="card mb-4">
         <div class="card-header">{{'profile.card.researcher' | translate}}</div>
         <div class="card-body">
@@ -34,7 +34,7 @@ <h3 class="mb-4">{{'profile.head' | translate}}</h3>
 
     <ng-container *ngVar="(groupsRD$ | async)?.payload?.page as groups">
       <div *ngIf="groups?.length > 0">
-        <h3 class="mt-4">{{'profile.groups.head' | translate}}</h3>
+        <h2 class="mt-4">{{'profile.groups.head' | translate}}</h2>
         <ul class="list-group list-group-flush">
           <li *ngFor="let group of groups" class="list-group-item">{{ dsoNameService.getName(group) }}</li>
         </ul>
@@ -43,7 +43,7 @@ <h3 class="mt-4">{{'profile.groups.head' | translate}}</h3>
 
     <ng-container *ngVar="(specialGroupsRD$ | async)?.payload?.page as specialGroups">
       <div *ngIf="specialGroups?.length > 0" data-test="specialGroups">
-        <h3 class="mt-4">{{'profile.special.groups.head' | translate}}</h3>
+        <h2 class="mt-4">{{'profile.special.groups.head' | translate}}</h2>
         <ul class="list-group list-group-flush">
           <li *ngFor="let specialGroup of specialGroups" class="list-group-item">
             {{ dsoNameService.getName(specialGroup) }}
diff --git a/src/app/register-email-form/register-email-form.component.html b/src/app/register-email-form/register-email-form.component.html
index ed79b1d2d17..d4cf75b5630 100644
--- a/src/app/register-email-form/register-email-form.component.html
+++ b/src/app/register-email-form/register-email-form.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <h2>{{MESSAGE_PREFIX + '.header'|translate}}</h2>
+    <h1>{{MESSAGE_PREFIX + '.header'|translate}}</h1>
     <p>{{MESSAGE_PREFIX + '.info' | translate}}</p>
 
     <p *ngIf="validMailDomains.length != 0 && typeRequest === TYPE_REQUEST_REGISTER">
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 263bf60ac7b..23c62abc6ca 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
@@ -13,9 +13,9 @@
 
           <div>
             <div class="d-flex align-items-center">
-              <h4 class="mb-0 mr-4">
+              <h2 class="h3 mb-0 mr-4">
                 {{ 'access-control-item-header-toggle' | translate }}
-              </h4>
+              </h2>
               <ui-switch
                 [ariaLabel]="(state.bitstream.toggleStatus ? 'access-control-item-toggle.disable' : 'access-control-item-toggle.enable') | translate"
                 [(ngModel)]="state.item.toggleStatus"
@@ -51,7 +51,7 @@ <h4 class="mb-0 mr-4">
           </div>
 
           <div>
-            <h5 class="mt-3">{{'access-control-access-conditions' | translate}}</h5>
+            <h3 class="h4 mt-3">{{'access-control-access-conditions' | translate}}</h3>
 
             <ds-access-control-array-form
               #itemAccessCmp
@@ -67,9 +67,9 @@ <h5 class="mt-3">{{'access-control-access-conditions' | translate}}</h5>
 
           <div>
             <div class="d-flex align-items-center">
-              <h4 class="mb-0 mr-4">
+              <h2 class="h3 mb-0 mr-4">
                 {{'access-control-bitstream-header-toggle' | translate}}
-              </h4>
+              </h2>
               <ui-switch
                 [ariaLabel]="(state.bitstream.toggleStatus ? 'access-control-bitstream-toggle.disable' : 'access-control-bitstream-toggle.enable') | translate"
                 [(ngModel)]="state.bitstream.toggleStatus"
@@ -142,7 +142,7 @@ <h4 class="mb-0 mr-4">
           </div>
 
           <div>
-            <h5 class="mt-3">{{'access-control-access-conditions' | translate}}</h5>
+            <h3 class="h4 mt-3">{{'access-control-access-conditions' | translate}}</h3>
 
             <ds-access-control-array-form
               #bitstreamAccessCmp
diff --git a/src/app/shared/browse-by/browse-by.component.html b/src/app/shared/browse-by/browse-by.component.html
index d6a00051739..37799e805ff 100644
--- a/src/app/shared/browse-by/browse-by.component.html
+++ b/src/app/shared/browse-by/browse-by.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngVar="(objects$ | async) as objects">
-  <h3 [ngClass]="{'sr-only': parentname }">{{title | translate}}</h3>
+  <h1 [ngClass]="{'sr-only': parentname }">{{title | translate}}</h1>
   <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
   <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
       <div *ngIf="shouldDisplayResetButton$ |async" class="mb-2 reset">
diff --git a/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html b/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
index 1e1f3d82093..b6d598d562c 100644
--- a/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
+++ b/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
@@ -3,9 +3,9 @@
   <div class="card-body d-flex flex-column"
        *ngVar="group$ | async as group">
 
-    <h5 class="w-100">
+    <h2 class="h4 w-100">
       {{ roleName$ | async }}
-    </h5>
+    </h2>
 
     <div class="mt-2 mb-2">
       <ds-alert [type]="'alert-info'" >{{'comcol-role.edit.' + (comcolRole$ | async)?.name + '.description' | translate}}</ds-alert>
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 819d080f895..c397966fba1 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
@@ -2,8 +2,8 @@
   <div class="row">
     <div class="col-12">
       <div class="d-flex justify-content-between border-bottom">
-        <h2>{{ type + '.edit.head' | translate }}</h2>
-        <div>
+        <h1>{{ type + '.edit.head' | translate }}</h1>
+        <div class="my-auto">
           <a class="btn btn-danger"
              [routerLink]="((type === 'community') ? '/communities/' : '/collections/') + (dsoRD$ | async)?.payload.uuid + '/delete'">
             <i class="fas fa-trash"></i> {{type + '.edit.delete' | translate}}</a>
diff --git a/src/app/shared/comcol/comcol-page-handle/comcol-page-handle.component.html b/src/app/shared/comcol/comcol-page-handle/comcol-page-handle.component.html
index 552854a0c02..01a71ab142b 100644
--- a/src/app/shared/comcol/comcol-page-handle/comcol-page-handle.component.html
+++ b/src/app/shared/comcol/comcol-page-handle/comcol-page-handle.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="content" class="content-with-optional-title mb-2">
-    <h2 class="d-inline-block h6" *ngIf="title">{{ title | translate }}</h2>
-    <div class="d-inline-block px-2"><a href="{{getHandle()}}">{{getHandle()}}</a></div>
-</div>
+<p *ngIf="content" class="d-flex flex-wrap gapx-2 text-break">
+  <span class="mb-0" *ngIf="title">{{ title | translate }}</span>
+  <a [href]="getHandle()">{{getHandle()}}</a>
+</p>
diff --git a/src/app/shared/comcol/comcol-page-handle/comcol-page-handle.component.scss b/src/app/shared/comcol/comcol-page-handle/comcol-page-handle.component.scss
index 5d7bac26c7f..e69de29bb2d 100644
--- a/src/app/shared/comcol/comcol-page-handle/comcol-page-handle.component.scss
+++ b/src/app/shared/comcol/comcol-page-handle/comcol-page-handle.component.scss
@@ -1,5 +0,0 @@
-div {
-  word-break: break-word;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
diff --git a/src/app/shared/resource-policies/edit/resource-policy-edit.component.html b/src/app/shared/resource-policies/edit/resource-policy-edit.component.html
index 0f285c49489..a820fa481a5 100644
--- a/src/app/shared/resource-policies/edit/resource-policy-edit.component.html
+++ b/src/app/shared/resource-policies/edit/resource-policy-edit.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <h4 class="mb-3">{{'resource-policies.edit.page.heading' | translate}} {{resourcePolicy.id}}</h4>
+  <h1 class="mb-3">{{'resource-policies.edit.page.heading' | translate}} {{resourcePolicy.id}}</h1>
 
   <ds-resource-policy-form [resourcePolicy]="resourcePolicy"
                            [isProcessing]="isProcessing()"
diff --git a/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html b/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
index f63bf9fa844..64c0cd50085 100644
--- a/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
+++ b/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="configurationList?.length > 1" class="search-switch-configuration">
-  <h5 id="configuration-switch">{{ 'search.switch-configuration.title' | translate}}</h5>
+  <h3 id="configuration-switch">{{ 'search.switch-configuration.title' | translate}}</h3>
 
   <select class="form-control"
           aria-labelledby="configuration-switch"
diff --git a/src/app/statistics-page/statistics-page/statistics-page.component.html b/src/app/statistics-page/statistics-page/statistics-page.component.html
index c6938c7582b..047bf52e7c3 100644
--- a/src/app/statistics-page/statistics-page/statistics-page.component.html
+++ b/src/app/statistics-page/statistics-page/statistics-page.component.html
@@ -1,11 +1,11 @@
 <div class="container">
 
   <ng-container *ngVar="(scope$ | async) as scope">
-    <h2 *ngIf="scope"
+    <h1 *ngIf="scope"
         class="header"
         id="{{ scope.id }}">
       {{ 'statistics.header' | translate: { scope: getName(scope) } }}
-    </h2>
+    </h1>
   </ng-container>
 
   <ng-container *ngVar="reports$ | async as reports">
diff --git a/src/app/statistics-page/statistics-table/statistics-table.component.html b/src/app/statistics-page/statistics-table/statistics-table.component.html
index 5a333b96586..efa9ce43d99 100644
--- a/src/app/statistics-page/statistics-table/statistics-table.component.html
+++ b/src/app/statistics-page/statistics-table/statistics-table.component.html
@@ -1,9 +1,9 @@
 <div *ngIf="hasData"
      class="m-1">
 
-  <h3 class="m-1">
+  <h2 class="m-1">
     {{ 'statistics.table.title.' + report.reportType | translate }}
-  </h3>
+  </h2>
 
   <table class="table table-striped" [attr.data-test]="report.reportType">
 
diff --git a/src/app/submission/import-external/submission-import-external.component.html b/src/app/submission/import-external/submission-import-external.component.html
index dc46e6758fd..8d13b1785a0 100644
--- a/src/app/submission/import-external/submission-import-external.component.html
+++ b/src/app/submission/import-external/submission-import-external.component.html
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col-md-12">
-      <h2 id="header" class="pb-2">{{'submission.import-external.title' + ((label) ? '.' + label : '') | translate}}</h2>
+      <h1 id="header" class="pb-2">{{'submission.import-external.title' + ((label) ? '.' + label : '') | translate}}</h1>
       <ds-submission-import-external-searchbar
         [initExternalSourceData]="reload$.value"
         (externalSourceData) = "getExternalSourceData($event)">
@@ -11,7 +11,7 @@ <h2 id="header" class="pb-2">{{'submission.import-external.title' + ((label) ? '
   <div class="row" *ngIf="reload$.value.entity">
     <div *ngIf="reload$.value.sourceId !== ''" class="col-md-12">
       <ng-container *ngVar="(entriesRD$ | async) as entriesRD">
-        <h3 *ngIf="entriesRD && entriesRD?.payload?.page?.length !== 0">{{ 'submission.sections.describe.relationship-lookup.selection-tab.title' | translate}}</h3>
+        <h2 *ngIf="entriesRD && entriesRD?.payload?.page?.length !== 0">{{ 'submission.sections.describe.relationship-lookup.selection-tab.title' | translate}}</h2>
         <ds-viewable-collection *ngIf="entriesRD?.hasSucceeded && !(isLoading$ | async) && entriesRD?.payload?.page?.length > 0" @fadeIn
                                 [objects]="entriesRD"
                                 [selectionConfig]="{ repeatable: repeatable, listId: listId }"
@@ -25,15 +25,15 @@ <h3 *ngIf="entriesRD && entriesRD?.payload?.page?.length !== 0">{{ 'submission.s
         <ds-themed-loading *ngIf="(isLoading$ | async)"
                     message="{{'loading.search-results' | translate}}"></ds-themed-loading>
         <div *ngIf="!(isLoading$ | async) && entriesRD?.payload?.page?.length === 0" data-test="empty-external-entry-list">
-          <ds-alert [type]="'alert-info'">{{ 'search.results.empty' | translate }}</ds-alert>
+          <ds-alert [type]="AlertType.Info">{{ 'search.results.empty' | translate }}</ds-alert>
         </div>
         <div *ngIf="!(isLoading$ | async) && entriesRD.statusCode === 500" data-test="empty-external-error-500">
-          <ds-alert [type]="'alert-info'">{{ 'search.results.response.500' | translate }}</ds-alert>
+          <ds-alert [type]="AlertType.Info">{{ 'search.results.response.500' | translate }}</ds-alert>
         </div>
       </ng-container>
     </div>
     <div *ngIf="reload$.value.sourceId === ''" class="col-md-12">
-      <ds-alert [type]="'alert-info'">
+      <ds-alert [type]="AlertType.Info">
         <p class="lead mb-0">{{'submission.import-external.page.hint' | translate}}</p>
       </ds-alert>
     </div>
diff --git a/src/app/submission/import-external/submission-import-external.component.ts b/src/app/submission/import-external/submission-import-external.component.ts
index 25b1d5d1aa2..b4aacd4e63b 100644
--- a/src/app/submission/import-external/submission-import-external.component.ts
+++ b/src/app/submission/import-external/submission-import-external.component.ts
@@ -23,6 +23,7 @@ import { PageInfo } from '../../core/shared/page-info.model';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { getFinishedRemoteData } from '../../core/shared/operators';
 import { NONE_ENTITY_TYPE } from '../../core/shared/item-relationships/item-type.resource-type';
+import { AlertType } from 'src/app/shared/alert/alert-type';
 
 /**
  * This component allows to submit a new workspaceitem importing the data from an external source.
@@ -92,6 +93,8 @@ export class SubmissionImportExternalComponent implements OnInit, OnDestroy {
 
   private retrieveExternalSourcesSub: Subscription;
 
+  public readonly AlertType = AlertType;
+
   /**
    * Initialize the component variables.
    * @param {SearchConfigurationService} searchConfigService
diff --git a/src/app/subscriptions-page/subscriptions-page.component.html b/src/app/subscriptions-page/subscriptions-page.component.html
index ed31e16759b..4d204df93c4 100644
--- a/src/app/subscriptions-page/subscriptions-page.component.html
+++ b/src/app/subscriptions-page/subscriptions-page.component.html
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col-md-12 m-40">
-      <h2>{{'subscriptions.title' | translate}}</h2>
+      <h1>{{'subscriptions.title' | translate}}</h1>
       <div class="row">
         <div class="col-md-12 m-40">
           <ds-themed-loading *ngIf="loading$ | async"></ds-themed-loading>
@@ -34,7 +34,7 @@ <h2>{{'subscriptions.title' | translate}}</h2>
               </div>
             </ds-pagination>
 
-            <ds-alert *ngIf="subscriptions?.pageInfo?.totalElements == 0 && !(loading$ | async)" [type]="'alert-info'" data-test="empty-alert">
+            <ds-alert *ngIf="subscriptions?.pageInfo?.totalElements == 0 && !(loading$ | async)" [type]="AlertType.Info" data-test="empty-alert">
               {{ 'subscriptions.table.empty.message' | translate }}
             </ds-alert>
 
diff --git a/src/app/subscriptions-page/subscriptions-page.component.ts b/src/app/subscriptions-page/subscriptions-page.component.ts
index 05c587ba12c..35278d5dc2e 100644
--- a/src/app/subscriptions-page/subscriptions-page.component.ts
+++ b/src/app/subscriptions-page/subscriptions-page.component.ts
@@ -14,6 +14,7 @@ import { EPerson } from '../core/eperson/models/eperson.model';
 import { getAllCompletedRemoteData } from '../core/shared/operators';
 import { RemoteData } from '../core/data/remote-data';
 import { hasValue } from '../shared/empty.util';
+import { AlertType } from '../shared/alert/alert-type';
 
 @Component({
   selector: 'ds-subscriptions-page',
@@ -54,6 +55,8 @@ export class SubscriptionsPageComponent implements OnInit, OnDestroy {
    */
   sub: rxjsSubscription = null;
 
+  readonly AlertType = AlertType;
+
   constructor(
     private paginationService: PaginationService,
     private authService: AuthService,
diff --git a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
index d1de00bea6e..95c7a694489 100644
--- a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
+++ b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <h2 id="header">{{'system-wide-alert.form.header' | translate}}</h2>
+    <h1 id="header">{{'system-wide-alert.form.header' | translate}}</h1>
     <div [formGroup]="alertForm" [class]="'ng-invalid'">
         <div class="form-group">
             <div class="row mb-2">
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 432a0b33b40..12312612dd5 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -864,6 +864,8 @@
 
   "browse.startsWith.input": "Filter",
 
+  "browse.taxonomy_srsc.title": "Browsing by Subject Category",
+
   "browse.taxonomy.button": "Browse",
 
   "browse.title": "Browsing {{ collection }} by {{ field }}{{ startsWith }} {{ value }}",
diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index 5dfc03fbd36..69b288905a1 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -12,6 +12,14 @@ $fa-font-path: "^assets/fonts" !default;
 /* Images */
 $image-path: "../assets/images" !default;
 
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$h1-font-size: $font-size-base * 2.125 !default;
+$h2-font-size: $font-size-base * 1.75 !default;
+$h3-font-size: $font-size-base * 1.5 !default;
+$h4-font-size: $font-size-base * 1.25 !default;
+$h5-font-size: $font-size-base * 1.125 !default;
+$h6-font-size: $font-size-base !default;
+
 // enable-responsive-font-sizes allows text to scale more naturally across device and viewport sizes
 $enable-responsive-font-sizes: true;
 

From 9a5ad0bc9fab596c7a229a94fa06e92b80d1b607 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 3 Dec 2023 23:11:50 +0100
Subject: [PATCH 18/21] Fixed accessibility issues on search page

---
 .../selectable-list-item-control.component.html     |  4 +++-
 .../selectable-list-item-control.component.spec.ts  |  6 +++++-
 .../search-filter/search-filter.component.html      | 13 +++++++------
 .../search-label/search-label.component.html        |  3 ++-
 .../view-mode-switch.component.html                 |  8 ++++++--
 src/assets/i18n/en.json5                            |  6 ++++++
 6 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html b/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html
index 56a83913a76..a90f375c6a1 100644
--- a/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html
+++ b/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html
@@ -1,10 +1,12 @@
 <ng-container *ngVar="selectionService?.isObjectSelected(selectionConfig?.listId, object) | async as checked">
-    <input *ngIf="selectionConfig.repeatable" class="form-check-input" type="checkbox"
+    <input #selectListItemCheckbox *ngIf="selectionConfig.repeatable" class="form-check-input" type="checkbox"
+           [attr.aria-label]="(selectListItemCheckbox.checked ? 'selectable-list-item-control.deselect' : 'selectable-list-item-control.select') | translate"
            [name]="'checkbox' + index"
            [id]="'object' + index"
            [ngModel]="selected$ | async"
            (ngModelChange)="selectCheckbox($event)">
     <input *ngIf="!selectionConfig.repeatable" class="form-check-input mt-2" type="radio"
+           [attr.aria-label]="'selectable-list-item-control.select' | translate"
            [name]="'radio' + index"
            [id]="'object' + index"
            [checked]="selected$ | async"
diff --git a/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.spec.ts b/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.spec.ts
index c8756567b86..73d70bfa7a9 100644
--- a/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.spec.ts
+++ b/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.spec.ts
@@ -7,6 +7,7 @@ import { FormsModule } from '@angular/forms';
 import { VarDirective } from '../../../utils/var.directive';
 import { of as observableOf } from 'rxjs';
 import { ListableObject } from '../listable-object.model';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('SelectableListItemControlComponent', () => {
   let comp: SelectableListItemControlComponent;
@@ -45,7 +46,10 @@ describe('SelectableListItemControlComponent', () => {
     init();
     TestBed.configureTestingModule({
       declarations: [SelectableListItemControlComponent, VarDirective],
-      imports: [FormsModule],
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot(),
+      ],
       providers: [
         {
           provide: SelectableListService,
diff --git a/src/app/shared/search/search-filters/search-filter/search-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-filter.component.html
index 25c218166ef..a352c5587b3 100644
--- a/src/app/shared/search/search-filters/search-filter/search-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-filter.component.html
@@ -2,17 +2,18 @@
      [id]="regionId" [attr.aria-labelledby]="toggleId" [ngClass]="{ 'focus': focusBox }" role="region">
   <button (click)="toggle()" (focusin)="focusBox = true" (focusout)="focusBox = false"
           class="filter-name d-flex" [attr.aria-controls]="regionId" [id]="toggleId"
-          [attr.aria-expanded]="false"
+          [attr.aria-expanded]="!(collapsed$ | async)"
           [attr.aria-label]="(((collapsed$ | async) ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate) + ' ' + (('search.filters.filter.' + filter.name + '.head') | translate | lowercase)"
           [attr.data-test]="'filter-toggle' | dsBrowserOnly"
   >
-    <h4 class="d-inline-block text-left mt-auto mb-auto">
+    <span class="h4 d-inline-block text-left mt-auto mb-auto">
       {{'search.filters.filter.' + filter.name + '.head'| translate}}
-    </h4>
-    <span class="filter-toggle flex-grow-1 fas p-auto"
-          [ngClass]="(collapsed$ | async) ? 'fa-plus' : 'fa-minus'"
-          [title]="((collapsed$ | async) ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate">
     </span>
+    <i class="filter-toggle flex-grow-1 fas p-auto"
+       aria-hidden="true"
+       [ngClass]="(collapsed$ | async) ? 'fa-plus' : 'fa-minus'"
+       [title]="((collapsed$ | async) ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate">
+    </i>
   </button>
   <div [@slide]="(collapsed$ | async) ? 'collapsed' : 'expanded'"
        (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)"
diff --git a/src/app/shared/search/search-labels/search-label/search-label.component.html b/src/app/shared/search/search-labels/search-label/search-label.component.html
index 17c5a487181..2269771de1f 100644
--- a/src/app/shared/search/search-labels/search-label/search-label.component.html
+++ b/src/app/shared/search/search-labels/search-label/search-label.component.html
@@ -1,6 +1,7 @@
 <a class="badge badge-primary mr-1 mb-1"
+   [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.' + key) | translate, value: normalizeFilterValue(value) }"
    [routerLink]="searchLink"
    [queryParams]="(removeParameters | async)" queryParamsHandling="merge">
     {{('search.filters.applied.' + key) | translate}}: {{'search.filters.' + filterName + '.' + value | translate: {default: normalizeFilterValue(value)} }}
-    <span> ×</span>
+    <span aria-hidden="true"> ×</span>
 </a>
diff --git a/src/app/shared/view-mode-switch/view-mode-switch.component.html b/src/app/shared/view-mode-switch/view-mode-switch.component.html
index 45d219eb916..5d29562a766 100644
--- a/src/app/shared/view-mode-switch/view-mode-switch.component.html
+++ b/src/app/shared/view-mode-switch/view-mode-switch.component.html
@@ -1,5 +1,7 @@
 <div class="btn-group" data-toggle="buttons">
     <button *ngIf="isToShow(viewModeEnum.ListElement)"
+            [attr.aria-current]="currentMode === viewModeEnum.ListElement"
+            [attr.aria-label]="'search.view-switch.show-list' | translate"
        routerLink="."
        [queryParams]="{view: 'list'}"
        queryParamsHandling="merge"
@@ -8,9 +10,11 @@
        [class.active]="currentMode === viewModeEnum.ListElement"
        class="btn btn-secondary"
        [attr.data-test]="'list-view' | dsBrowserOnly">
-       <span class="fas fa-list"></span><span class="sr-only">{{'search.view-switch.show-list' | translate}}</span>
+       <i class="fas fa-list"></i>
     </button>
     <button *ngIf="isToShow(viewModeEnum.GridElement)"
+            [attr.aria-current]="currentMode === viewModeEnum.GridElement"
+            [attr.aria-label]="'search.view-switch.show-grid' | translate"
        routerLink="."
        [queryParams]="{view: 'grid'}"
        queryParamsHandling="merge"
@@ -19,7 +23,7 @@
        [class.active]="currentMode === viewModeEnum.GridElement"
        class="btn btn-secondary"
        [attr.data-test]="'grid-view' | dsBrowserOnly">
-       <span class="fas fa-th-large"></span><span class="sr-only">{{'search.view-switch.show-grid' | translate}}</span>
+       <i class="fas fa-th-large"></i>
     </button>
     <button *ngIf="isToShow(viewModeEnum.DetailedListElement)"
        routerLink="."
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 12312612dd5..21c608d4c51 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3666,6 +3666,8 @@
 
   "search.search-form.placeholder": "Search the repository ...",
 
+  "search.filters.remove": "Remove filter of type {{ type }} with value {{ value }}",
+
   "search.filters.applied.f.author": "Author",
 
   "search.filters.applied.f.dateIssued.max": "End date",
@@ -3920,6 +3922,10 @@
 
   "search.view-switch.show-list": "Show as list",
 
+  "selectable-list-item-control.deselect": "Deselect item",
+
+  "selectable-list-item-control.select": "Select item",
+
   "sorting.ASC": "Ascending",
 
   "sorting.DESC": "Descending",

From e96d3cd2e9f799dc46f827af6d7d7bf587b68eee Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 3 Dec 2023 23:28:19 +0100
Subject: [PATCH 19/21] Fixed DSONameService getName & getHitHighlights
 returning empty string for OrgUnits without organization.legalName field

---
 src/app/core/breadcrumbs/dso-name.service.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/core/breadcrumbs/dso-name.service.ts b/src/app/core/breadcrumbs/dso-name.service.ts
index ddd97705b01..8e4fb771c64 100644
--- a/src/app/core/breadcrumbs/dso-name.service.ts
+++ b/src/app/core/breadcrumbs/dso-name.service.ts
@@ -50,7 +50,7 @@ export class DSONameService {
       }
     },
     OrgUnit: (dso: DSpaceObject): string => {
-      return dso.firstMetadataValue('organization.legalName');
+      return dso.firstMetadataValue('organization.legalName') || this.translateService.instant('dso.name.untitled');
     },
     Default: (dso: DSpaceObject): string => {
       // If object doesn't have dc.title metadata use name property
@@ -106,7 +106,7 @@ export class DSONameService {
       }
       return `${familyName}, ${givenName}`;
     } else if (entityType === 'OrgUnit') {
-      return this.firstMetadataValue(object, dso, 'organization.legalName');
+      return this.firstMetadataValue(object, dso, 'organization.legalName') || this.translateService.instant('dso.name.untitled');
     }
     return this.firstMetadataValue(object, dso, 'dc.title') || dso.name || this.translateService.instant('dso.name.untitled');
   }

From ff6dff72d8db680c00b159496beecf87517fec98 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Wed, 6 Dec 2023 01:08:00 +0100
Subject: [PATCH 20/21] Fixed Edit Item Bitstream  showing empty buttons when
 css is turned off

---
 .../item-edit-bitstream.component.html                 | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
index a3e29ac10c2..f0671d3d300 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
@@ -26,21 +26,25 @@
     <div class="text-center w-100">
       <div class="btn-group relationship-action-buttons">
         <a *ngIf="bitstreamDownloadUrl != null" [routerLink]="bitstreamDownloadUrl"
-                class="btn btn-outline-primary btn-sm"
-                title="{{'item.edit.bitstreams.edit.buttons.download' | translate}}"
-                [attr.data-test]="'download-button' | dsBrowserOnly">
+           [attr.aria-label]="'item.edit.bitstreams.edit.buttons.download' | translate"
+           class="btn btn-outline-primary btn-sm"
+           title="{{'item.edit.bitstreams.edit.buttons.download' | translate}}"
+           [attr.data-test]="'download-button' | dsBrowserOnly">
           <i class="fas fa-download fa-fw"></i>
         </a>
         <button [routerLink]="['/bitstreams/', bitstream.id, 'edit']" class="btn btn-outline-primary btn-sm"
+                [attr.aria-label]="'item.edit.bitstreams.edit.buttons.edit' | translate"
                 title="{{'item.edit.bitstreams.edit.buttons.edit' | translate}}">
           <i class="fas fa-edit fa-fw"></i>
         </button>
         <button [disabled]="!canRemove()" (click)="remove()"
+                [attr.aria-label]="'item.edit.bitstreams.edit.buttons.remove' | translate"
                 class="btn btn-outline-danger btn-sm"
                 title="{{'item.edit.bitstreams.edit.buttons.remove' | translate}}">
           <i class="fas fa-trash-alt fa-fw"></i>
         </button>
         <button [disabled]="!canUndo()" (click)="undo()"
+                [attr.aria-label]="'item.edit.bitstreams.edit.buttons.undo' | translate"
                 class="btn btn-outline-warning btn-sm"
                 title="{{'item.edit.bitstreams.edit.buttons.undo' | translate}}">
           <i class="fas fa-undo-alt fa-fw"></i>

From 4545b5354dcc1994b28435ccad95d64f9c328ed5 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Wed, 6 Dec 2023 02:03:44 +0100
Subject: [PATCH 21/21] Fixed Edit Item Bitstream  showing empty buttons when
 css is turned off & replaced authentication dropdown menu link with button

- Also fixed box-shadows not working the same way for all footer buttons/links
---
 src/app/footer/footer.component.html                  |  6 +++---
 src/app/footer/footer.component.scss                  |  9 +++++++++
 .../shared/auth-nav-menu/auth-nav-menu.component.html | 11 +++++++----
 .../shared/auth-nav-menu/auth-nav-menu.component.scss |  9 +++++++++
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index d4c0cd1a377..ac903929f6f 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -69,15 +69,15 @@ <h5 class="text-uppercase">Footer Content</h5>
           </button>
         </li>
         <li *ngIf="showPrivacyPolicy">
-          <a class="text-white"
+          <a class="btn text-white"
              routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
         </li>
         <li *ngIf="showEndUserAgreement">
-          <a class="text-white"
+          <a class="btn text-white"
              routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
         </li>
         <li *ngIf="showSendFeedback$ | async">
-          <a class="text-white"
+          <a class="btn text-white"
              routerLink="info/feedback">{{ 'footer.link.feedback' | translate}}</a>
         </li>
       </ul>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 4dfdc3267ba..f1a872c0994 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -30,6 +30,15 @@
             padding: 0 calc(var(--bs-spacer) / 2);
             color: inherit;
             font-size: .875em;
+
+            &:focus {
+              box-shadow: none;
+              text-decoration: underline;
+            }
+
+            &:focus-visible {
+              box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
+            }
           }
 
           &:not(:last-child) {
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index eba37fa4160..a0623bdd90d 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -2,9 +2,11 @@
   <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item"
       (click)="$event.stopPropagation();">
     <div ngbDropdown #loginDrop display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" class="dropdownLogin px-0.5" [attr.aria-label]="'nav.login' |translate"
+      <button class="btn btn-link dropdownLogin px-0.5" [attr.aria-label]="'nav.login' |translate"
          (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly"
-         ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
+         ngbDropdownToggle>
+        {{ 'nav.login' | translate }}
+      </button>
       <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
            [attr.aria-label]="'nav.login' | translate">
         <ds-themed-log-in
@@ -19,8 +21,9 @@
   </li>
   <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
     <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate" class="dropdownLogout px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
-        <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
+      <button role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate" class="btn btn-link dropdownLogout px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
+        <i class="fas fa-user-circle fa-lg fa-fw"></i>
+      </button>
       <div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate">
         <ds-themed-user-menu></ds-themed-user-menu>
       </div>
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
index 40e9113b009..ea64f7e74b9 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
@@ -19,3 +19,12 @@
     color: var(--ds-header-icon-color-hover);
   }
 }
+
+.dropdownLogin, .dropdownLogout {
+  &:not(:focus-visible).active,
+  &:not(:focus-visible):active,
+  &:not(:focus-visible).active:focus,
+  &:not(:focus-visible):active:focus {
+    box-shadow: unset;
+  }
+}