[Port dspace-7_x] Fix accessibility issues

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');
     });
 });

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",

src/app/access-control/bulk-access/browse/bulk-access-browse.component.html

@@ -1,67 +1,69 @@
 <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>
         </div>
       </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>

src/app/access-control/bulk-access/settings/bulk-access-settings.component.html

@@ -1,21 +1,21 @@
 <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>
         </div>
       </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>

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">

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>
 

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>

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">

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">

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>

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">

src/app/admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html

@@ -1,11 +1,11 @@
 <div class="container">
     <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>
+            <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>
 
         </div>
     </div>
-</div>
+</div>

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>
@@ -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)"
                   >

src/app/admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.html

@@ -1,11 +1,11 @@
 <div class="container">
     <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>
+            <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>
 
         </div>
     </div>
-</div>
+</div>