fix(a11y): fix tab order reset in the header (#9851)

fix(tab): fix tab order reset in the header

When tabbing through the header reaching the search input and
pressing tab again will reset the focus to the html document.

This happened because the next item would be the cancel input
button. Which will be removed via display one and then we start
from the the beginning.

client/src/ui/molecules/search/index.scss

@@ -17,6 +17,19 @@
     }
   }
 
+  .search-widget:focus-within .search-input-field,
+  .search-input-field:focus,
+  .search-input-field:valid {
+    width: inherit;
+
+    /* When the search input has focus or has content,
+          show the clear search button */
+    ~ .button.clear-search-button {
+      display: block;
+      right: 2.8rem;
+    }
+  }
+
   .search-input-field {
     // make webkit play nice with search input types
     -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
@@ -48,18 +61,6 @@
       }
     }
 
-    &:focus,
-    &:valid {
-      width: inherit;
-
-      /* When the search input has focus or has content,
-          show the clear search button */
-      ~ .button.clear-search-button {
-        display: block;
-        right: 2.8rem;
-      }
-    }
-
     &:invalid,
     &:invalid::placeholder {
       animation: blink 2s step-end infinite;