Merged PR 410: Tabindex for searchinput

Tabindex for searchinput

apps/sales/src/app/modules/shelf/components/searchbar/searchbar.component.html

@@ -11,18 +11,15 @@
     id="shelf-search-input"
     [formControl]="searchForm"
     (keyup)="onKeyup($event)"
+    tabindex="1"
   />
-  <span class="isa-input-warning" *ngIf="!!errorMessage?.length">{{
-    errorMessage
-  }}</span>
+  <span class="isa-input-warning" *ngIf="!!errorMessage?.length">{{ errorMessage }}</span>
   <button
     class="isa-input-reset"
     type="reset"
-    *ngIf="
-      (!isFetchingData && searchQuery$ | async | showSearchResetPipe) ||
-      errorMessage
-    "
+    *ngIf="(!isFetchingData && searchQuery$ | async | showSearchResetPipe) || errorMessage"
     (click)="resetForm()"
+    tabindex="-1"
   ></button>
   <ng-container [ngSwitch]="isFetchingData">
     <div class="spinner isa-mt-16" *ngSwitchCase="true"></div>
@@ -30,11 +27,10 @@
       *ngSwitchDefault
       #submitButton
       class="isa-input-submit"
-      [class.scan]="
-        isIPad | appShowScanButton: (searchQuery$ | async):errorMessage
-      "
+      [class.scan]="isIPad | appShowScanButton: (searchQuery$ | async):errorMessage"
       type="submit"
       (click)="handleBtnClick(submitButton)"
+      tabindex="2"
     ></button>
   </ng-container>
 </div>

libs/ui/src/lib/search-input/search-input.component.scss

@@ -112,6 +112,10 @@
   cursor: pointer;
 }
 
+.search-icon:focus {
+  outline: none;
+}
+
 .clear-icon {
   z-index: 2;
   width: 24px;

libs/ui/src/lib/search-input/search-input.component.ts

@@ -26,6 +26,7 @@ import { AutocompleteResults } from './models/autocomplete-results.model';
         type="text"
         #search
         autofocus
+        tabindex="1"
       />
       <span *ngIf="error && (!load || !loading)" class="error-message">{{ error }}</span>
       <img
@@ -33,8 +34,16 @@ import { AutocompleteResults } from './models/autocomplete-results.model';
         *ngIf="input.length && (!load || !loading)"
         class="clear-icon"
         [src]="branchColorMode ? '/assets/images/close-branch.svg' : '/assets/images/close.svg'"
+        tabindex="-1"
+      />
+      <img
+        *ngIf="!load || !loading"
+        (keyup.enter)="emitSearch(input)"
+        (click)="emitSearch(input)"
+        class="search-icon"
+        src="/assets/images/Search_Icon.svg"
+        tabindex="2"
       />
-      <img *ngIf="!load || !loading" (click)="emitSearch(input)" class="search-icon" src="/assets/images/Search_Icon.svg" />
       <div class="spinner" *ngIf="load && loading"></div>
     </div>
     <div