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 5b21d14583)
This commit is contained in:
Alexandre Vryghem
2023-12-03 15:15:52 +01:00
committed by github-actions[bot]
parent b94f0a9b69
commit 73cffe990a
3 changed files with 8 additions and 4 deletions

View File

@@ -6,7 +6,7 @@
<p>{{'collection.edit.item-mapper.description' | translate}}</p> <p>{{'collection.edit.item-mapper.description' | translate}}</p>
<ul ngbNav (navChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbNav" class="nav-tabs"> <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> <a ngbNavLink>{{'collection.edit.item-mapper.tabs.browse' | translate}}</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<div class="mt-2"> <div class="mt-2">
@@ -23,7 +23,7 @@
</div> </div>
</ng-template> </ng-template>
</li> </li>
<li [ngbNavItem]="'mapTab'"> <li [ngbNavItem]="'mapTab'" role="presentation">
<a ngbNavLink>{{'collection.edit.item-mapper.tabs.map' | translate}}</a> <a ngbNavLink>{{'collection.edit.item-mapper.tabs.map' | translate}}</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<div class="row mt-2"> <div class="row mt-2">

View File

@@ -11,7 +11,7 @@
<table id="item-select" class="table table-striped table-hover"> <table id="item-select" class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th></th> <th aria-hidden="true"></th>
<th *ngIf="!hideCollection" scope="col">{{'item.select.table.collection' | translate}}</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.author' | translate}}</th>
<th scope="col">{{'item.select.table.title' | translate}}</th> <th scope="col">{{'item.select.table.title' | translate}}</th>
@@ -19,7 +19,7 @@
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let item of itemsRD?.payload?.page"> <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"> <td *ngIf="!hideCollection">
<span *ngVar="(item.owningCollection | async)?.payload as collection"> <span *ngVar="(item.owningCollection | async)?.payload as collection">
<a *ngIf="collection" [routerLink]="['/collections', collection?.id]"> <a *ngIf="collection" [routerLink]="['/collections', collection?.id]">

View File

@@ -2508,6 +2508,10 @@
"item.select.empty": "No items to show", "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.author": "Author",
"item.select.table.collection": "Collection", "item.select.table.collection": "Collection",