From 73cffe990a2a6f7dc8a5420be1ee1cce714dc675 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 3 Dec 2023 15:15:52 +0100
Subject: [PATCH] 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

(cherry picked from commit 5b21d14583f8b1ca22f889ee4c24fc7e54579fa7)
---
 .../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 a48c4d15bf..649aa9b43d 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 @@
       <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 @@
             </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 7f8ff943a3..8cdc8ffb2d 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 99af486d8c..ab3aa368fb 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",