Fix collection mapper accessibility issues

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

Author: alexandrevryghem

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

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

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>

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