Merge pull request #2805 from ORCID/aromanovv/COMMS-1502-add-label-to-global-search

PD-5329 add label to global search

Author: cryptalith

src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.html

@@ -2,17 +2,18 @@
   <app-alert-message
     [type]="invalidVerifyUrl ? 'warning' : 'success'"
     role="alert"
-    aria-labelledby="dialogTitle"
-    aria-describedby="dialogDescription"
+    aria-labelledby="almostDoneTitle"
+    aria-describedby="almostDoneDescription"
   >
-    <h3 title id="dialogTitle" i18n="@@ngOrcid.signin.almostDone">
+    <h3 title id="almostDoneTitle" i18n="@@ngOrcid.signin.almostDone">
       Almost done!
     </h3>
     <div content i18n="@@ngOrcid.signin.signInToComplete" *ngIf="emailVerified">
       Sign in to complete your email verification
     </div>
     <div
       content
+      id="almostDoneDescription"
       i18n="@@myOrcidAlerts.invalidVerifyUrl"
       *ngIf="invalidVerifyUrl"
     >

src/app/layout/search/search.component.html

@@ -11,17 +11,17 @@
   class="row h-end search-box middle"
   (submit)="search(whereToSearchSelected, whatToSearch)"
   *ngIf="!hideForm"
+  aria-describedby="cy-search"
 >
-  <mat-label class="orc-ui-font-small-print text-right mr-4 w-30"
-    >Search the ORCID registry</mat-label
+  <label i18n class="orc-ui-font-small-print text-right mr-4 w-25"
+    >Search the ORCID registry</label
   >
   <div id="ariaLabelWhere" hidden>Search on</div>
   <div class="input-box-new-info">
     <input
       autocomplete="off"
       name="whatToSearch"
       [(ngModel)]="whatToSearch"
-      [placeholder]="searchPlaceHolder"
       type="text"
       [attr.aria-label]="labelSearchBy"
       id="cy-search"

src/app/layout/search/search.component.scss

@@ -94,6 +94,16 @@
 .columns-8,
 .columns-4 {
   :host {
+    form {
+      flex-wrap: wrap !important;
+    }
+
+    mat-label {
+      width: 100%;
+      text-align: left;
+      margin-bottom: 8px;
+    }
+
     .search-box {
       padding: 12px 0px;
       justify-content: center;

src/app/layout/search/search.component.ts

@@ -37,9 +37,6 @@ export class SearchComponent implements OnInit {
   whereToSearchSelected = this.firstLetterUppercase(
     $localize`:@@layout.public-layout.registry:registry`
   )
-  searchPlaceHolder = this.firstLetterUppercase(
-    $localize`:@@layout.ariaLabelSearchRegistry:Search the ORCID registry...`
-  )
   whatToSearch: string
   @Input() hideForm: boolean = false
   constructor(

src/app/password-recovery/pages/password-recovery/password-recovery.component.html

@@ -22,10 +22,10 @@
       class="mb-6"
     >
       <div content class="content grid gap-2">
-        <b i18n="@@recovery.lostAccessToYourEmailAddresses">
+        <b id="dialogTitle" i18n="@@recovery.lostAccessToYourEmailAddresses">
           Lost access to your email addresses?
         </b>
-        <div>
+        <div id="dialogDescription">
           <span i18n="@@recovery.youCanAlwaysSignIn"
             >You can always sign in to ORCID with your</span
           >&nbsp;<b i18n="@@recovery.16DigitOrcidId">16-digit ORCID iD</b