Commits

Alexandre Vryghem authored c30a2eea45c
Fixed accessibility issues on BitstreamFormatsComponent

- Removed empty label of the select box and replaced it with an aria-label - Fixed empty table header
No tags

src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html

Modified
12 12 *ngIf="(bitstreamFormats | async)?.payload?.totalElements > 0"
13 13 [paginationOptions]="pageConfig"
14 14 [pageInfoState]="(bitstreamFormats | async)?.payload"
15 15 [collectionSize]="(bitstreamFormats | async)?.payload?.totalElements"
16 16 [hideGear]="false"
17 17 [hidePagerWhenSinglePage]="true">
18 18 <div class="table-responsive">
19 19 <table id="formats" class="table table-striped table-hover">
20 20 <thead>
21 21 <tr>
22 - <th scope="col" [attr.aria-label]="'admin.registries.bitstream-formats.select' | translate"></th>
22 + <th scope="col"><span class="sr-only">{{'admin.registries.bitstream-formats.table.selected' | translate}}</span></th>
23 23 <th scope="col">{{'admin.registries.bitstream-formats.table.id' | translate}}</th>
24 24 <th scope="col">{{'admin.registries.bitstream-formats.table.name' | translate}}</th>
25 25 <th scope="col">{{'admin.registries.bitstream-formats.table.mimetype' | translate}}</th>
26 26 <th scope="col">{{'admin.registries.bitstream-formats.table.supportLevel.head' | translate}}</th>
27 27 </tr>
28 28 </thead>
29 29 <tbody>
30 30 <tr *ngFor="let bitstreamFormat of (bitstreamFormats | async)?.payload?.page">
31 31 <td>
32 32 <label class="mb-0">
33 33 <input type="checkbox"
34 34 [attr.aria-label]="'admin.registries.bitstream-formats.select' | translate"
35 35 [checked]="isSelected(bitstreamFormat) | async"
36 36 (change)="selectBitStreamFormat(bitstreamFormat, $event)"
37 37 >
38 + <span class="sr-only">{{'admin.registries.bitstream-formats.select' | translate}}}</span>
38 39 </label>
39 40 </td>
40 41 <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.id}}</a></td>
41 42 <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.shortDescription}}</a></td>
42 43 <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.mimetype}} <span *ngIf="bitstreamFormat.internal">({{'admin.registries.bitstream-formats.table.internal' | translate}})</span></a></td>
43 44 <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{'admin.registries.bitstream-formats.table.supportLevel.'+bitstreamFormat.supportLevel | translate}}</a></td>
44 45 </tr>
45 46 </tbody>
46 47 </table>
47 48 </div>

Everything looks good. We'll let you know here if there's anything you should know about.

Add shortcut