Fixed accessibility issues on MetadataSchemaComponent

- Removed empty label of the select box and replaced it with an aria-label
- Fixed empty table header
This commit is contained in:
Alexandre Vryghem
2023-12-16 03:13:01 +01:00
parent 1989a6c042
commit 8ab4f1c074
2 changed files with 12 additions and 7 deletions

View File

@@ -24,7 +24,7 @@
<table id="metadata-fields" class="table table-striped table-hover"> <table id="metadata-fields" class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th></th> <th><span class="sr-only">{{'admin.registries.schema.fields.table.selected' | translate}}</span></th>
<th scope="col">{{'admin.registries.schema.fields.table.id' | translate}}</th> <th scope="col">{{'admin.registries.schema.fields.table.id' | translate}}</th>
<th scope="col">{{'admin.registries.schema.fields.table.field' | translate}}</th> <th scope="col">{{'admin.registries.schema.fields.table.field' | translate}}</th>
<th scope="col">{{'admin.registries.schema.fields.table.scopenote' | translate}}</th> <th scope="col">{{'admin.registries.schema.fields.table.scopenote' | translate}}</th>
@@ -33,12 +33,11 @@
<tbody> <tbody>
<tr *ngFor="let field of fields?.page" <tr *ngFor="let field of fields?.page"
[ngClass]="{'table-primary' : isActive(field) | async}"> [ngClass]="{'table-primary' : isActive(field) | async}">
<td> <td *ngVar="(isSelected(field) | async) as selected">
<label class="mb-0"> <input type="checkbox"
<input type="checkbox" [attr.aria-label]="(selected ? 'admin.registries.schema.fields.deselect' : 'admin.registries.schema.fields.select') | translate"
[checked]="isSelected(field) | async" [checked]="selected"
(change)="selectMetadataField(field, $event)"> (change)="selectMetadataField(field, $event)">
</label>
</td> </td>
<td class="selectable-row" (click)="editField(field)">{{field.id}}</td> <td class="selectable-row" (click)="editField(field)">{{field.id}}</td>
<td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}{{field.qualifier ? '.' + field.qualifier : ''}}</td> <td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}{{field.qualifier ? '.' + field.qualifier : ''}}</td>

View File

@@ -174,6 +174,10 @@
"admin.registries.schema.description": "This is the metadata schema for \"{{namespace}}\".", "admin.registries.schema.description": "This is the metadata schema for \"{{namespace}}\".",
"admin.registries.schema.fields.select": "Select",
"admin.registries.schema.fields.deselect": "Deselect",
"admin.registries.schema.fields.head": "Schema metadata fields", "admin.registries.schema.fields.head": "Schema metadata fields",
"admin.registries.schema.fields.no-items": "No metadata fields to show.", "admin.registries.schema.fields.no-items": "No metadata fields to show.",
@@ -182,6 +186,8 @@
"admin.registries.schema.fields.table.field": "Field", "admin.registries.schema.fields.table.field": "Field",
"admin.registries.schema.fields.table.selected": "Selected metadata fields",
"admin.registries.schema.fields.table.id": "ID", "admin.registries.schema.fields.table.id": "ID",
"admin.registries.schema.fields.table.scopenote": "Scope Note", "admin.registries.schema.fields.table.scopenote": "Scope Note",