fix: Search and filter hidden search button alignment and stacking or…

…der adjustment (#5339)

* Fix broken vertical alignment of search and filter search container & chips when the accessible search button is focused

* Fix the hidden search button being partially hidden by the search input

* make hidden search and filter submit button use dense styling

* vertically center s&f input field contents

* Introduce `.p-search-and-filter__search-button` class for the hidden search button

* move `u-off-screen` placeholder to `base_placeholders`

scss/_base_placeholders.scss

@@ -132,6 +132,17 @@
   }
 
   // Utilities
+  %u-off-screen {
+    &:not(:focus):not(:active) {
+      clip-path: inset(50%);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
+  }
+
   %vf-hide-text {
     overflow: hidden;
     // vw value necessary because text indent in % does not work with padding;

scss/_patterns_search-and-filter.scss

@@ -116,12 +116,29 @@
     }
 
     .p-search-and-filter__box {
+      align-items: center;
       display: inline-flex;
       flex: 1;
+      height: 100%;
       margin: 0;
       position: relative;
     }
 
+    // tab-selectable search button
+    .p-search-and-filter__search-button {
+      // Hide the search button unless it is focused
+      @extend %u-off-screen;
+      // Prevents the bottom margin of the search button from growing the height of the search container
+      @extend %u-no-margin--bottom;
+      // Make the button dense to ensure it fits vertically in the search box
+      @extend %vf-button-dense-vertical-padding;
+
+      // Make sure the hidden search button appears on top of the input field
+      &:focus {
+        z-index: 1;
+      }
+    }
+
     .p-search-and-filter__input {
       border: 0;
       box-shadow: none;

scss/_utilities_off-screen.scss

@@ -2,12 +2,7 @@
 
 // Positions element out of flow & off screen for screen readers
 @mixin vf-u-off-screen {
-  .u-off-screen:not(:focus):not(:active) {
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
+  .u-off-screen {
+    @extend %u-off-screen;
   }
 }

templates/docs/examples/patterns/search-and-filter/chip-overflow.html

@@ -50,7 +50,7 @@
     <form class="p-search-and-filter__box" data-overflowing="false">
       <label class="u-off-screen" for="search">Search and filter</label>
       <input autocomplete="off" class="p-search-and-filter__input" id="search" name="search" placeholder="Search and filter" type="search" value="">
-      <button alt="search" class="u-off-screen" type="submit">Search</button>
+      <button alt="search" class="p-search-and-filter__search-button" type="submit">Search</button>
     </form>
   </div>
   <div class="p-search-and-filter__panel" aria-hidden="true">

templates/docs/examples/patterns/search-and-filter/default.html

@@ -9,7 +9,7 @@
     <form class="p-search-and-filter__box" data-overflowing="false">
       <label class="u-off-screen" for="search">Search and filter</label>
       <input autocomplete="off" class="p-search-and-filter__input" id="search" name="search" placeholder="Search and filter" type="search" value="">
-      <button alt="search" class="u-off-screen" type="submit">Search</button>
+      <button alt="search" class="p-search-and-filter__search-button" type="submit">Search</button>
     </form>
   </div>
   <div class="p-search-and-filter__panel" aria-hidden="true">

templates/docs/examples/patterns/search-and-filter/expanded.html

@@ -9,7 +9,7 @@
     <form class="p-search-and-filter__box" data-overflowing="false">
       <label class="u-off-screen" for="search">Search and filter</label>
       <input autocomplete="off" class="p-search-and-filter__input" id="search" name="search" placeholder="Search and filter" type="search" value="">
-      <button alt="search" class="u-off-screen" type="submit">Search</button>
+      <button alt="search" class="p-search-and-filter__search-button" type="submit">Search</button>
     </form>
   </div>
   <div class="p-search-and-filter__panel" aria-hidden="false">

templates/docs/examples/patterns/search-and-filter/with-chips.html

@@ -17,7 +17,7 @@
     <form class="p-search-and-filter__box" data-overflowing="false">
       <label class="u-off-screen" for="search">Search and filter</label>
       <input autocomplete="off" class="p-search-and-filter__input" id="search" name="search" placeholder="Search and filter" type="search" value="">
-      <button alt="search" class="u-off-screen" type="submit">Search</button>
+      <button alt="search" class="p-search-and-filter__search-button" type="submit">Search</button>
     </form>
   </div>
   <div class="p-search-and-filter__panel" aria-hidden="true">

templates/docs/examples/patterns/search-and-filter/with-search-prompt.html

@@ -10,7 +10,7 @@
     <form class="p-search-and-filter__box" data-overflowing="false">
       <label class="u-off-screen" for="search">Search and filter</label>
       <input autocomplete="off" class="p-search-and-filter__input" id="search" name="search" placeholder="Search and filter" type="search" value="vanilla">
-      <button alt="search" class="u-off-screen" type="submit">Search</button>
+      <button alt="search" class="p-search-and-filter__search-button" type="submit">Search</button>
     </form>
   </div>
   <div class="p-search-and-filter__panel" aria-hidden="false">

tests/parker.js

@@ -12,7 +12,7 @@ function generateMetrics(file, metricsArray) {
     {
       name: 'Stylesheet size',
       benchmark: 150000,
-      threshold: 440000,
+      threshold: 500000,
       result: results['total-stylesheet-size'],
     },
     {