From 8ab4f1c074e927838a4e8d0b02b6ffb52fdb9ded Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 03:13:01 +0100
Subject: [PATCH] Fixed accessibility issues on MetadataSchemaComponent

- Removed empty label of the select box and replaced it with an aria-label
- Fixed empty table header
---
 .../metadata-schema/metadata-schema.component.html  | 13 ++++++-------
 src/assets/i18n/en.json5                            |  6 ++++++
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
index d51b8a8233..de968d63f2 100644
--- a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
@@ -24,7 +24,7 @@
             <table id="metadata-fields" class="table table-striped table-hover">
               <thead>
               <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.field' | translate}}</th>
                 <th scope="col">{{'admin.registries.schema.fields.table.scopenote' | translate}}</th>
@@ -33,12 +33,11 @@
               <tbody>
               <tr *ngFor="let field of fields?.page"
                   [ngClass]="{'table-primary' : isActive(field) | async}">
-                <td>
-                  <label class="mb-0">
-                    <input type="checkbox"
-                           [checked]="isSelected(field) | async"
-                           (change)="selectMetadataField(field, $event)">
-                  </label>
+                <td *ngVar="(isSelected(field) | async) as selected">
+                  <input type="checkbox"
+                         [attr.aria-label]="(selected ? 'admin.registries.schema.fields.deselect' : 'admin.registries.schema.fields.select') | translate"
+                         [checked]="selected"
+                         (change)="selectMetadataField(field, $event)">
                 </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>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 4f25ae0d0f..2a0b606da3 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -174,6 +174,10 @@
 
   "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.no-items": "No metadata fields to show.",
@@ -182,6 +186,8 @@
 
   "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.scopenote": "Scope Note",