Pd-5329 fix search aria label (#2808)

* PD-5329 fix search aria label

* PD-5329 fix aria-decribedby application

* PD-5329 fix search styling

* PD-5329 fix search a11y

* PD-5329 more a11y

---------

Co-authored-by: andrej romanov <50377758+auumgn@users.noreply.github.com>

Author: aromanovv

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

@@ -11,9 +11,11 @@
   class="row h-end search-box middle"
   (submit)="search(whereToSearchSelected, whatToSearch)"
   *ngIf="!hideForm"
-  aria-describedby="cy-search"
 >
-  <label i18n class="orc-ui-font-small-print text-right mr-4 w-25"
+  <label
+    i18n
+    id="searchLabel"
+    class="orc-ui-font-small-print text-right mr-4 w-25"
     >Search the ORCID registry</label
   >
   <div id="ariaLabelWhere" hidden>Search on</div>
@@ -23,7 +25,7 @@
       name="whatToSearch"
       [(ngModel)]="whatToSearch"
       type="text"
-      [attr.aria-label]="labelSearchBy"
+      aria-labelledby="searchLabel"
       id="cy-search"
       class="orc-font-body"
     />

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

@@ -55,7 +55,8 @@
   }
 
   .input-box-new-info {
-    width: 334px;
+    flex-grow: 1;
+    max-width: 334px;
     input {
       border-radius: 3px;
       margin-left: 2px;
@@ -98,7 +99,7 @@
       flex-wrap: wrap !important;
     }
 
-    mat-label {
+    label {
       width: 100%;
       text-align: left;
       margin-bottom: 8px;

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

@@ -22,7 +22,6 @@ import { ApplicationRoutes } from '../../constants'
 })
 export class SearchComponent implements OnInit {
   labelSearch = $localize`:@@layout.ariaLabelSearch:Search the ORCID registry`
-  labelSearchBy = $localize`:@@layout.ariaLabelSearchBy:Search by name, affiliation or ORCID iD`
   form: UntypedFormGroup
   platform: PlatformInfo
   signinRegisterButton = true