static/frontend: made cancel button in search field keyboard accessible

https://screenshot.googleplex.com/p4zQ4YTuUYnfAjg.png

Change-Id: Idb1d198ba1c7cdac041b77b2f81d2bb9a2368156
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/513037
Reviewed-by: Alice Merrick <[email protected]>
kokoro-CI: kokoro <[email protected]>
Reviewed-by: Jamal Carvalho <[email protected]>
Reviewed-by: Prudhvi Krishna Chintala <[email protected]>
Run-TryBot: Jamal Carvalho <[email protected]>
TryBot-Result: Gopher Robot <[email protected]>

static/frontend/homepage/homepage.css

@@ -88,6 +88,34 @@
   }
 }
 
+.Homepage-closeIcon {
+  background: var(--color-input);
+  border-bottom: var(--border);
+  border-color: var(--color-brand-primary);
+  border-left: 0;
+  border-top: var(--border);
+  color: var(--color-button);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: bold;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.Homepage-closeIcon:hover,
+.Homepage-closeIcon:focus,
+.Homepage-closeIcon:focus-within,
+.Homepage-closeIcon:active {
+  border-left: 0 !important;
+}
+
+.Homepage-search--input:hover,
+.Homepage-search--input:focus,
+.Homepage-search--input:focus-within,
+.Homepage-search--input:active {
+  border-right: 0 !important;
+}
+
 input[type='search']::-webkit-search-decoration {
   display: none;
 }

static/frontend/homepage/homepage.tmpl

@@ -16,12 +16,11 @@
       <form class="go-InputGroup Homepage-search Homepage-search--symbol"
           action="/search" role="search" data-gtmc="homepage search form">
         <input
-          class="go-Input js-searchFocus"
+          class="go-Input js-searchFocus Homepage-search--input"
           data-test-id="homepage-search"
           id="AutoComplete"
           role="textbox"
           aria-label="{{.SearchPrompt}}"
-          type="search"
           name="q"
           placeholder="{{.SearchPrompt}}"
           autocapitalize="off"
@@ -30,6 +29,7 @@
           spellcheck="false"
           title="{{.SearchPrompt}}"
           autofocus="true">
+        <button class="Homepage-closeIcon" type="reset" aria-label="Clear Search"> X </button>
         <button type="submit" class="go-Button">Search</button>
       </form>
       <section class="go-Carousel Homepage-tips js-carousel" aria-label="Search Tips Carousel" data-slide-index="{{.TipIndex}}">