From 8b5cd79bdcf12b45288efaaf322e9b2e46cafffa Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 04:44:22 +0100
Subject: [PATCH] Fixed accessibility issues on
 AccessControlFormContainerComponent

- Replaced invisible label in AccessControlArrayFormComponent that was only used for styling with span
- Fixed radio buttons not being part of a fieldset
- Fixed empty table header
---
 .../access-control-array-form.component.html  |  2 +-
 ...cess-control-form-container.component.html | 26 +++++++++----------
 .../collection-select.component.html          |  2 +-
 .../item-select/item-select.component.html    |  2 +-
 src/assets/i18n/en.json5                      |  4 +++
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
index e6ebabd707..2ec3b51219 100644
--- a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
+++ b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
@@ -88,7 +88,7 @@
       </div>
 
       <div>
-        <label>&nbsp;</label>
+        <span aria-hidden="true" class="mb-2 d-inline-block">&nbsp;</span>
         <div class="input-group">
 
           <button type="button" class="btn btn-outline-danger"
diff --git a/src/app/shared/access-control-form-container/access-control-form-container.component.html b/src/app/shared/access-control-form-container/access-control-form-container.component.html
index 23c62abc6c..ce0f5845c6 100644
--- a/src/app/shared/access-control-form-container/access-control-form-container.component.html
+++ b/src/app/shared/access-control-form-container/access-control-form-container.component.html
@@ -23,10 +23,10 @@
               </ui-switch>
             </div>
 
-            <div class="row mt-3">
-              <div class="col-12 col-md-3">
+            <fieldset class="row mt-3">
+              <legend class="h4 col-12 col-md-3">
                 {{ 'access-control-mode' | translate }}
-              </div>
+              </legend>
               <div class="col-12 col-md-8">
                 <div class="form-check">
                   <input class="form-check-input" type="radio"
@@ -47,7 +47,7 @@
                   </label>
                 </div>
               </div>
-            </div>
+            </fieldset>
           </div>
 
           <div>
@@ -78,10 +78,10 @@
             </div>
 
             <div *ngIf="showLimitToSpecificBitstreams" class="row mt-3">
-            <div class="col-12">
-              {{'access-control-limit-to-specific' | translate}}
-            </div>
-            <div class="col-12">
+            <fieldset class="col-12">
+              <legend class="h4">
+                {{'access-control-limit-to-specific' | translate}}
+              </legend>
               <div class="form-check">
                 <input class="form-check-input" type="radio"
                        name="changesLimit" id="processAll" value="all"
@@ -111,14 +111,14 @@
 
                 </label>
               </div>
-            </div>
+            </fieldset>
             </div>
           </div>
 
-          <div class="row mt-3">
-            <div class="col-12 col-md-3">
+          <fieldset class="row mt-3">
+            <legend class="h4 col-12 col-md-3">
               {{'access-control-mode' | translate}}
-            </div>
+            </legend>
             <div class="col-12 col-md-8">
               <div class="form-check">
                 <input class="form-check-input" type="radio"
@@ -139,7 +139,7 @@
                 </label>
               </div>
             </div>
-          </div>
+          </fieldset>
 
           <div>
             <h3 class="h4 mt-3">{{'access-control-access-conditions' | translate}}</h3>
diff --git a/src/app/shared/object-select/collection-select/collection-select.component.html b/src/app/shared/object-select/collection-select/collection-select.component.html
index 7d4dadb2e3..135579aff7 100644
--- a/src/app/shared/object-select/collection-select/collection-select.component.html
+++ b/src/app/shared/object-select/collection-select/collection-select.component.html
@@ -11,7 +11,7 @@
       <table id="collection-select" class="table table-striped table-hover">
         <thead>
           <tr>
-            <th aria-hidden="true"></th>
+            <th><span class="sr-only">{{'collection.select.table.selected' | translate}}</span></th>
             <th scope="col">{{'collection.select.table.title' | translate}}</th>
           </tr>
         </thead>
diff --git a/src/app/shared/object-select/item-select/item-select.component.html b/src/app/shared/object-select/item-select/item-select.component.html
index 8cdc8ffb2d..d1d454b2e4 100644
--- a/src/app/shared/object-select/item-select/item-select.component.html
+++ b/src/app/shared/object-select/item-select/item-select.component.html
@@ -11,7 +11,7 @@
       <table id="item-select" class="table table-striped table-hover">
         <thead>
         <tr>
-          <th aria-hidden="true"></th>
+          <th><span class="sr-only">{{'item.select.table.selected' | translate}}</span></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.title' | translate}}</th>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 71090f70ac..d736efb9e0 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1110,6 +1110,8 @@
 
   "collection.select.empty": "No collections to show",
 
+  "collection.select.table.selected": "Selected collections",
+
   "collection.select.table.select": "Select collection",
 
   "collection.select.table.deselect": "Deselect collection",
@@ -2544,6 +2546,8 @@
 
   "item.select.empty": "No items to show",
 
+  "item.select.table.selected": "Selected items",
+
   "item.select.table.select": "Select item",
 
   "item.select.table.deselect": "Deselect item",