[ACS-10253] Screen Reader: Search: Search control is focused multiple times and incorrectly announced by SR (#4846)

Author: dominikiwanekhyland

projects/aca-content/src/lib/components/search/search-input/search-input.component.html

@@ -1,4 +1,5 @@
-<button class="app-search-container"
+<div class="app-search-container"
+  role="search"
   [matMenuTriggerFor]="searchOptionsMenu"
   (menuOpened)="onMenuOpened()"
   (menuClosed)="syncInputValues()"
@@ -9,6 +10,7 @@
     </button>
 
     <input
+      class="app-search-input"
       matInput
       [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
       [type]="'text'"
@@ -30,7 +32,7 @@
       </button>
     </div>
   </mat-form-field>
-</button>
+</div>
 
 <mat-menu #searchOptionsMenu="matMenu" [overlapTrigger]="true" class="app-search-options-menu">
   <div (keydown.tab)="$event.stopPropagation()" (keydown.shift.tab)="$event.stopPropagation()" tabindex=0>

projects/aca-content/src/lib/components/search/search-input/search-input.component.scss

@@ -22,6 +22,13 @@ $search-border-radius: 4px;
       display: none;
     }
   }
+
+  .app-search-input {
+    &:focus-within {
+      outline: 2px solid var(--theme-blue-button-color);
+      border-radius: 4px;
+    }
+  }
 }
 
 .app-search-options-menu {