From 2f5370a08569045239fc73076552d70dfcffe6d8 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 00:55:46 +0100
Subject: [PATCH] Fixed accessibility issues related to dso selectors

- Fixed header ordering
- Fixed input field not having a description what it does (because the header isn't always shown I decided to use aria-labels instead of regular labels)
---
 .../dso-selector/dso-selector/dso-selector.component.html   | 1 +
 .../dso-selector/dso-selector/dso-selector.component.ts     | 5 +++++
 .../create-community-parent-selector.component.html         | 6 +++---
 .../create-item-parent-selector.component.html              | 2 +-
 .../dso-selector-modal-wrapper.component.html               | 2 +-
 .../edit-item-selector/edit-item-selector.component.html    | 2 +-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
index c4f5dbc4cd..295165d171 100644
--- a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
+++ b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
@@ -2,6 +2,7 @@
     <input type="search"
            class="form-control"
            (click)="$event.stopPropagation();"
+           [attr.aria-label]="'dso-selector.placeholder' | translate: { type: typesString }"
            placeholder="{{'dso-selector.placeholder' | translate: { type: typesString } }}"
            [formControl]="input" ngbAutofocus (keyup.enter)="selectSingleResult()">
 </div>
diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts b/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts
index 503e4c4412..4590e05363 100644
--- a/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts
+++ b/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts
@@ -75,6 +75,11 @@ export class DSOSelectorComponent implements OnInit, OnDestroy {
    */
   @Input() sort: SortOptions;
 
+  /**
+   * The id that should be given to the input box, this is required for accessibility reasons
+   */
+  @Input() searchBoxId: string | null = null;
+
   // list of allowed selectable dsoTypes
   typesString: string;
 
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
index a13be63880..8ae146b42c 100644
--- a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
@@ -6,14 +6,14 @@
     </div>
     <div class="modal-body">
         <button class="btn btn-outline-primary btn-lg btn-block" (click)="selectObject(undefined)">{{'dso-selector.create.community.top-level' | translate}}</button>
-        <h3 class="position-relative py-1 my-3 font-weight-normal">
+        <div class="h3 position-relative py-1 my-3 font-weight-normal">
             <hr>
             <div id="create-community-or-separator" class="text-center position-absolute w-100">
                 <span class="px-4 bg-white">{{'dso-selector.create.community.or-divider' | translate}}</span>
             </div>
-        </h3>
+        </div>
 
-        <h5 class="px-2">{{'dso-selector.create.community.sub-level' | translate}}</h5>
+        <span class="h5 px-2">{{'dso-selector.create.community.sub-level' | translate}}</span>
         <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
     </div>
 </div>
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
index 5fccd58f48..5288f08e02 100644
--- a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
@@ -5,7 +5,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
+    <span *ngIf="header" class="h5 px-2">{{header | translate}}</span>
     <ds-authorized-collection-selector [currentDSOId]="dsoRD?.payload.uuid"
                                        [entityType]="entityType"
                                        [types]="selectorTypes"
diff --git a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html
index 54044f5d79..6d3d45cb3d 100644
--- a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html
@@ -5,7 +5,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
+    <span *ngIf="header" class="h5 px-2">{{header | translate}}</span>
     <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
   </div>
 </div>
diff --git a/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
index 85d8797e66..999a96e730 100644
--- a/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
@@ -5,7 +5,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
+    <span *ngIf="header" class="h5 px-2">{{header | translate}}</span>
     <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" (onSelect)="selectObject($event)"></ds-dso-selector>
   </div>
 </div>