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

- Added missing aria-labels to input checkboxes
- Fixed multiple tab related accessibility issues

(cherry picked from commit 1db83ba3c5529fdf8dadddf8431b2dac029cfa0e)
---
 .../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 c370fe4f20..4aa4c9af16 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 c522b8a9c5..1d025f6514 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 @@
       <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 @@
             </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 9b87f69c04..7d4dadb2e3 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 ab3aa368fb..081d211507 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",