From 3c1243f6f183d12fa39a15984077086f41c264fc Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 16 Dec 2023 01:31:34 +0100
Subject: [PATCH] Fixed search filters having empty input buttons

---
 .../org-unit-input-suggestions.component.html              | 4 +++-
 .../org-unit-input-suggestions.component.spec.ts           | 2 ++
 .../person-input-suggestions.component.html                | 4 +++-
 .../dso-input-suggestions.component.html                   | 4 +++-
 .../filter-input-suggestions.component.html                | 7 +++----
 .../input-suggestions/input-suggestions.component.html     | 4 +++-
 .../validation-suggestions.component.html                  | 4 +++-
 .../search-range-filter/search-range-filter.component.html | 7 +++----
 8 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html
index c4e31d3d81..58f39b8d0b 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html
@@ -11,7 +11,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    <input type="submit" class="d-none"/>
+    <button class="sr-only" type="submit">
+        {{'search.filters.search.submit' | translate}}
+    </button>
     <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
         <div class="dropdown-list">
             <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts
index 0981d895ec..a13af0067a 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts
@@ -2,6 +2,7 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { OrgUnitInputSuggestionsComponent } from './org-unit-input-suggestions.component';
 import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 
 let component: OrgUnitInputSuggestionsComponent;
 let fixture: ComponentFixture<OrgUnitInputSuggestionsComponent>;
@@ -21,6 +22,7 @@ describe('OrgUnitInputSuggestionsComponent', () => {
       declarations: [OrgUnitInputSuggestionsComponent],
       imports: [
         FormsModule,
+        TranslateModule.forRoot(),
       ],
       providers: [
       ],
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html
index b1621dbd2c..53260ceaa3 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html
@@ -12,7 +12,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    <input type="submit" class="d-none"/>
+    <button class="sr-only" type="submit">
+        {{'search.filters.search.submit' | translate}}
+    </button>
     <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
         <div class="dropdown-list">
             <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html b/src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html
index 7515b830b9..17e7197261 100644
--- a/src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html
+++ b/src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html
@@ -9,7 +9,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    <input type="submit" class="d-none"/>
+    <button class="sr-only" type="submit">
+        {{'search.filters.search.submit' | translate}}
+    </button>
     <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
         <div class="dropdown-list">
             <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
index 726dc9ca0e..d29163e09a 100644
--- a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
+++ b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
@@ -20,10 +20,9 @@
            [ngModelOptions]="{standalone: true}" autocomplete="off"
     />
   </ng-template>
-  <label class="d-none">
-    <input type="submit"/>
-    <span>{{'search.filters.search.submit' | translate}}</span>
-  </label>
+  <button class="sr-only" type="submit">
+    {{'search.filters.search.submit' | translate}}
+  </button>
   <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
     <div class="dropdown-list">
       <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/shared/input-suggestions/input-suggestions.component.html b/src/app/shared/input-suggestions/input-suggestions.component.html
index f137982fee..188dcbcb6a 100644
--- a/src/app/shared/input-suggestions/input-suggestions.component.html
+++ b/src/app/shared/input-suggestions/input-suggestions.component.html
@@ -9,7 +9,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    <input type="submit" class="d-none"/>
+    <button class="sr-only" type="submit">
+        {{'search.filters.search.submit' | translate}}
+    </button>
     <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
         <div class="dropdown-list">
             <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html b/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html
index d6e2ead6ea..c5d71e33fd 100644
--- a/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html
+++ b/src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html
@@ -10,7 +10,9 @@
          [placeholder]="placeholder"
          ng-model-options="{standalone: true}"
          autocomplete="off">
-  <input type="submit" class="d-none"/>
+  <button class="sr-only" type="submit">
+    {{'search.filters.search.submit' | translate}}
+  </button>
   <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
     <div class="dropdown-list">
       <div *ngFor="let suggestionOption of suggestions">
diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
index 251e5ac420..6d4ba44920 100644
--- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
@@ -26,10 +26,9 @@
                     />
                 </label>
             </div>
-            <label class="d-none">
-                <input type="submit" class="d-none"/>
-                <span>{{'search.filters.search.submit' | translate}}</span>
-            </label>
+            <button class="sr-only" type="submit">
+                {{'search.filters.search.submit' | translate}}
+            </button>
         </form>
 
         <ng-container *ngIf="shouldShowSlider()">