Commits

Alexandre Vryghem authored 54ef97d6070
Fixed accessibility issues on MetadataRegistryComponent

- 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/metadata-registry/metadata-registry.component.html

Modified
12 12 *ngIf="(metadataSchemas | async)?.payload?.totalElements > 0"
13 13 [paginationOptions]="config"
14 14 [collectionSize]="(metadataSchemas | async)?.payload?.totalElements"
15 15 [hideGear]="true"
16 16 [hidePagerWhenSinglePage]="true">
17 17
18 18 <div class="table-responsive">
19 19 <table id="metadata-schemas" class="table table-striped table-hover">
20 20 <thead>
21 21 <tr>
22 - <th scope="col"></th>
22 + <th scope="col"><span class="sr-only">{{'admin.registries.metadata.schemas.table.selected' | translate}}</span></th>
23 23 <th scope="col">{{'admin.registries.metadata.schemas.table.id' | translate}}</th>
24 24 <th scope="col">{{'admin.registries.metadata.schemas.table.namespace' | translate}}</th>
25 25 <th scope="col">{{'admin.registries.metadata.schemas.table.name' | translate}}</th>
26 26 </tr>
27 27 </thead>
28 28 <tbody>
29 29 <tr *ngFor="let schema of (metadataSchemas | async)?.payload?.page"
30 30 [ngClass]="{'table-primary' : isActive(schema) | async}">
31 31 <td>
32 32 <label class="mb-0">
33 33 <input type="checkbox"
34 34 [checked]="isSelected(schema) | async"
35 35 (change)="selectMetadataSchema(schema, $event)"
36 36 >
37 + <span class="sr-only">{{((isSelected(schema) | async) ? 'admin.registries.metadata.schemas.deselect' : 'admin.registries.metadata.schemas.select') | translate}}</span>
37 38 </label>
38 39 </td>
39 40 <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.id}}</a></td>
40 41 <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.namespace}}</a></td>
41 42 <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.prefix}}</a></td>
42 43 </tr>
43 44 </tbody>
44 45 </table>
45 46 </div>
46 47

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

Add shortcut