From d876fadd2a79de5f4919eb10bf92d9e695708a0d Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 01:57:48 +0100
Subject: [PATCH] Fixed accessibility issues on
 SubmissionImportExternalSearchbarComponent

- Fixed input not describing itself
- Put the items from the dropdown in an ul
- Fixed broken aria labels
- Removed titles who where identical to the displayed value
---
 ...n-import-external-searchbar.component.html | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
index 535395e534..040987d37b 100644
--- a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
+++ b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
@@ -1,25 +1,28 @@
 <div *ngIf="(isXsOrSm$ | async)" class="input-group mb-2">
-  <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' |translate}}" aria-label="" aria-describedby="">
+  <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' | translate}}" [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
 </div>
 <div class="input-group mb-5">
-  <input *ngIf="!(isXsOrSm$ | async)" type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' |translate}}" aria-label="" aria-describedby="">
-  <div [ngClass]="{'input-group-append': !(isXsOrSm$ | async)}" ngbDropdown role="group" aria-label="">
-    <button class="btn btn-outline-secondary w-fx" title="{{'submission.import-external.search.source.hint' |translate}}" ngbDropdownToggle>{{'submission.import-external.source.' + selectedElement?.name | translate}}</button>
-    <div ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100"
+  <input *ngIf="!(isXsOrSm$ | async)" type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' | translate}}" [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
+  <div [ngClass]="{'input-group-append': !(isXsOrSm$ | async)}" ngbDropdown role="group">
+    <button [attr.aria-label]="'submission.import-external.search.source.hint' |translate"
+            class="btn btn-outline-secondary w-fx"
+            title="{{'submission.import-external.search.source.hint' |translate}}"
+            ngbDropdownToggle>
+      {{'submission.import-external.source.' + selectedElement?.name | translate}}
+    </button>
+    <ul ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100"
       aria-haspopup="true"
-      aria-expanded="false"
-      aria-labelledby="scrollableDropdownMenuButton">
-      <div class="scrollable-menu"
-        aria-labelledby="scrollableDropdownMenuButton"
+      aria-expanded="false">
+      <li class="scrollable-menu"
         infiniteScroll
         [infiniteScrollDistance]="2"
         [infiniteScrollThrottle]="50"
         (scrolled)="onScroll()"
         [scrollWindow]="false">
-        <button ngbDropdownItem class="dropdown-item text-truncate" title="{{'submission.import-external.source.' + source?.name | translate}}" (click)="makeSourceSelection(source)" *ngFor="let source of sourceList">{{'submission.import-external.source.' + source?.name | translate}}</button>
+        <button ngbDropdownItem class="dropdown-item text-truncate" (click)="makeSourceSelection(source)" *ngFor="let source of sourceList">{{'submission.import-external.source.' + source?.name | translate}}</button>
         <div ngbDropdownItem class="scrollable-dropdown-loading text-center" *ngIf="sourceListLoading"><p>{{'submission.import-external.source.loading' | translate}}</p></div>
-      </div>
-    </div>
-    <button type="button" class="btn btn-primary" [title]="(searchString === '')?('submission.import-external.search.button.hint' | translate):('submission.import-external.search.button' | translate)" [disabled]="searchString === ''" (click)="search()">{{'submission.import-external.search.button' | translate}}</button>
+      </li>
+    </ul>
+    <button type="button" class="btn btn-primary" [title]="(searchString === '')?('submission.import-external.search.button.hint' | translate):''" [disabled]="searchString === ''" (click)="search()">{{'submission.import-external.search.button' | translate}}</button>
   </div>
 </div>