79730: Add labels around FilterInputSuggestionsComponent inputs

2025-10-15 05:53:03 +00:00 · 2021-06-01 09:29:01 +02:00
parent ffb320373d
commit 5b490203b2
7 changed files with 71 additions and 14 deletions
--- 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
@@ -21,4 +21,4 @@
            </div>
        </div>
    </div>
-</form>
+</form>
--- 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
@@ -3,13 +3,22 @@
      (keydown.arrowdown)="shiftFocusDown($event)"
      (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
      (dsClickOutside)="close();">
-  <input #inputField type="text" [(ngModel)]="value" [name]="name"
-         class="form-control suggestion_input"
-         [ngClass]="{'is-invalid': !valid}"
-         [dsDebounce]="debounceTime" (onDebounce)="find($event)"
-         [placeholder]="placeholder"
-         [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-  <input type="submit" class="d-none"/>
+  <label *ngIf="label; else searchInput" class="mb-0">
+    <ng-container *ngTemplateOutlet="searchInput"></ng-container>
+    <span class="d-none">{{label}}</span>
+  </label>
+  <ng-template #searchInput>
+    <input #inputField type="text" [(ngModel)]="value" [name]="name"
+           class="form-control suggestion_input"
+           [ngClass]="{'is-invalid': !valid}"
+           [dsDebounce]="debounceTime" (onDebounce)="find($event)"
+           [placeholder]="placeholder"
+           [ngModelOptions]="{standalone: true}" autocomplete="off"/>
+  </ng-template>
+  <label class="d-none">
+    <input type="submit" class="d-none"/>
+    <span>{{'search.filters.search.submit' | translate}}</span>
+  </label>
  <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
    <div class="dropdown-list">
      <div *ngFor="let suggestionOption of suggestions">
@@ -19,4 +28,4 @@
      </div>
    </div>
  </div>
-</form>
+</form>
--- a/src/app/shared/input-suggestions/input-suggestions.component.ts
+++ b/src/app/shared/input-suggestions/input-suggestions.component.ts
@@ -53,6 +53,11 @@ export class InputSuggestionsComponent implements ControlValueAccessor, OnChange
   */
  @Input() valid = true;

+  /**
+   * Label for the input field. Used for screen readers.
+   */
+  @Input() label? = '';
+
  /**
   * Output for when the form is submitted
   */
@@ -106,10 +111,10 @@ export class InputSuggestionsComponent implements ControlValueAccessor, OnChange
  @Input() disabled = false;
  propagateChange = (_: any) => {
    /* Empty implementation */
-  }
+  };
  propagateTouch = (_: any) => {
    /* Empty implementation */
-  }
+  };

  /**
   * When any of the inputs change, check if we should still show the suggestions
--- a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html
@@ -16,7 +16,8 @@
        </div>
    </div>
    <ds-filter-input-suggestions [suggestions]="(filterSearchResults | async)"
-                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
+                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
+                          [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
                          [action]="currentUrl"
                          [name]="filterConfig.paramName"
                          [(ngModel)]="filter"
--- a/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
@@ -16,7 +16,8 @@
        </div>
    </div>
    <ds-filter-input-suggestions [suggestions]="(filterSearchResults | async)"
-                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
+                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
+                          [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
                          [action]="currentUrl"
                          [name]="filterConfig.paramName"
                          [(ngModel)]="filter"
--- a/src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html
@@ -16,7 +16,8 @@
        </div>
    </div>
    <ds-filter-input-suggestions [suggestions]="(filterSearchResults | async)"
-                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
+                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
+                          [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
                          [action]="currentUrl"
                          [name]="filterConfig.paramName"
                          [(ngModel)]="filter"
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2878,28 +2878,40 @@

  "search.filters.filter.author.placeholder": "Author name",

+  "search.filters.filter.author.label": "Search author name",
+
  "search.filters.filter.birthDate.head": "Birth Date",

  "search.filters.filter.birthDate.placeholder": "Birth Date",

+  "search.filters.filter.birthDate.label": "Search birth date",
+
  "search.filters.filter.collapse": "Collapse filter",

  "search.filters.filter.creativeDatePublished.head": "Date Published",

  "search.filters.filter.creativeDatePublished.placeholder": "Date Published",

+  "search.filters.filter.creativeDatePublished.label": "Search date published",
+
  "search.filters.filter.creativeWorkEditor.head": "Editor",

  "search.filters.filter.creativeWorkEditor.placeholder": "Editor",

+  "search.filters.filter.creativeWorkEditor.label": "Search editor",
+
  "search.filters.filter.creativeWorkKeywords.head": "Subject",

  "search.filters.filter.creativeWorkKeywords.placeholder": "Subject",

+  "search.filters.filter.creativeWorkKeywords.label": "Search subject",
+
  "search.filters.filter.creativeWorkPublisher.head": "Publisher",

  "search.filters.filter.creativeWorkPublisher.placeholder": "Publisher",

+  "search.filters.filter.creativeWorkPublisher.label": "Search publisher",
+
  "search.filters.filter.dateIssued.head": "Date",

  "search.filters.filter.dateIssued.max.placeholder": "Minimum Date",
@@ -2910,6 +2922,8 @@

  "search.filters.filter.dateSubmitted.placeholder": "Date submitted",

+  "search.filters.filter.dateSubmitted.label": "Search date submitted",
+
  "search.filters.filter.discoverable.head": "Private",

  "search.filters.filter.withdrawn.head": "Withdrawn",
@@ -2918,6 +2932,8 @@

  "search.filters.filter.entityType.placeholder": "Item Type",

+  "search.filters.filter.entityType.label": "Search item type",
+
  "search.filters.filter.expand": "Expand filter",

  "search.filters.filter.has_content_in_original_bundle.head": "Has files",
@@ -2926,38 +2942,56 @@

  "search.filters.filter.itemtype.placeholder": "Type",

+  "search.filters.filter.itemtype.label": "Search type",
+
  "search.filters.filter.jobTitle.head": "Job Title",

  "search.filters.filter.jobTitle.placeholder": "Job Title",

+  "search.filters.filter.jobTitle.label": "Search job title",
+
  "search.filters.filter.knowsLanguage.head": "Known language",

  "search.filters.filter.knowsLanguage.placeholder": "Known language",

+  "search.filters.filter.knowsLanguage.label": "Search known language",
+
  "search.filters.filter.namedresourcetype.head": "Status",

  "search.filters.filter.namedresourcetype.placeholder": "Status",

+  "search.filters.filter.namedresourcetype.label": "Search status",
+
  "search.filters.filter.objectpeople.head": "People",

  "search.filters.filter.objectpeople.placeholder": "People",

+  "search.filters.filter.objectpeople.label": "Search people",
+
  "search.filters.filter.organizationAddressCountry.head": "Country",

  "search.filters.filter.organizationAddressCountry.placeholder": "Country",

+  "search.filters.filter.organizationAddressCountry.label": "Search country",
+
  "search.filters.filter.organizationAddressLocality.head": "City",

  "search.filters.filter.organizationAddressLocality.placeholder": "City",

+  "search.filters.filter.organizationAddressLocality.label": "Search city",
+
  "search.filters.filter.organizationFoundingDate.head": "Date Founded",

  "search.filters.filter.organizationFoundingDate.placeholder": "Date Founded",

+  "search.filters.filter.organizationFoundingDate.label": "Search date founded",
+
  "search.filters.filter.scope.head": "Scope",

  "search.filters.filter.scope.placeholder": "Scope filter",

+  "search.filters.filter.scope.label": "Search scope filter",
+
  "search.filters.filter.show-less": "Collapse",

  "search.filters.filter.show-more": "Show more",
@@ -2966,10 +3000,14 @@

  "search.filters.filter.subject.placeholder": "Subject",

+  "search.filters.filter.subject.label": "Search subject",
+
  "search.filters.filter.submitter.head": "Submitter",

  "search.filters.filter.submitter.placeholder": "Submitter",

+  "search.filters.filter.submitter.label": "Search submitter",
+


  "search.filters.entityType.JournalIssue": "Journal Issue",
@@ -2995,6 +3033,8 @@

  "search.filters.reset": "Reset filters",

+  "search.filters.search.submit": "Submit",
+


  "search.form.search": "Search",