mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-07 01:54:15 +00:00
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:

committed by
github-actions[bot]
![github-actions[bot]](/assets/img/avatar_default.png)
parent
b94f0a9b69
commit
73cffe990a
@@ -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">
|
||||||
|
@@ -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]">
|
||||||
|
@@ -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",
|
||||||
|
Reference in New Issue
Block a user