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

This reverts commit a224e846c9.

Reason for revert: breaks the UI (#68538)

Fixes #68538.

Change-Id: I23a6acaf741e7cb863c304363ee9b7a4fdf0bbe2
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/608036
LUCI-TryBot-Result: Go LUCI <golang-scoped@luci-project-accounts.iam.gserviceaccount.com>
kokoro-CI: kokoro <noreply+kokoro@google.com>
Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>

devtools/docker/compose.yaml

@@ -89,7 +89,7 @@ services:
     # time seeddb runs. If this ends up being flaky, we should add a check here.
     command: bash -c "
         echo GO_DISCOVERY_CONFIG_DYNAMIC=$GO_DISCOVERY_CONFIG_DYNAMIC &&
-        go run ./devtools/cmd/wait_available --timeout 300s db:5432 --
+        GODEBUG=cmdgonetlimit=64 go run ./devtools/cmd/wait_available --timeout 300s db:5432 --
           go run ./devtools/cmd/db/main.go create &&
           go run ./devtools/cmd/db/main.go migrate &&
           go run ./devtools/cmd/seeddb/main.go -seed ${GO_DISCOVERY_SEED_DB_FILE:-seed.txt}"

static/frontend/homepage/homepage.css

@@ -88,34 +88,6 @@
   }
 }
 
-.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.min.css

@@ -3,7 +3,7 @@
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
  */
-.go-SearchForm{display:none}.Homepage-logo{border-radius:var(--border-radius);display:block;height:10rem;margin:3.125rem auto;width:auto}[data-theme=dark] .Homepage-logo{mix-blend-mode:difference}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .Homepage-logo{mix-blend-mode:difference}}@media only screen and (min-width: 52rem){.Homepage{margin:2rem auto}.Homepage-logo{margin:3.5rem auto}}.Homepage-search{--border-radius: .5rem;height:3rem;margin:2.5rem auto 0;max-width:45.0625rem;position:relative;width:100%}.Homepage-search:before{background:url(/static/shared/icon/search_gm_grey_24dp.svg) left no-repeat;content:"";height:3rem;left:.75rem;position:absolute;width:1.5rem;z-index:3}.Homepage-search .go-Select,.Homepage-search .go-Input{padding-left:2.5rem}.Homepage-search--symbol .go-Input{border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);padding-left:2.5rem}.Homepage-search .go-Button{justify-content:center;width:7.375rem}.Homepage-search--symbol .go-Button{display:none}@media only screen and (min-width: 30rem){.Homepage-search--symbol .go-Input{border-bottom-right-radius:0;border-top-right-radius:0}.Homepage-search--symbol .go-Button{display:inline-flex}}.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:700;padding-left:.5rem;padding-right:.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}.Homepage-tips{margin:auto;max-width:45.0625rem;width:100%}[data-local=true] .Homepage-tips{display:none}.Homepage-examples{align-items:center;display:flex;flex-direction:column;font-size:.875rem;gap:.5rem 1rem;justify-content:space-between;margin:0 auto;max-width:45.0625rem;white-space:nowrap;width:inherit}@media only screen and (min-width: 52rem){.Homepage-examples{flex-direction:row}}.Homepage-examplesTitle{color:var(--color-text-subtle);font-weight:500;text-transform:uppercase}.Homepage-examplesList{display:flex;flex-grow:1;flex-wrap:wrap;gap:.5rem 2rem}a.Homepage-helpLink{align-items:center;display:inline-flex;font-size:1em;font-weight:initial;margin-left:.5rem;white-space:nowrap}.Homepage-helpLink img{height:1rem;margin-left:.25rem;position:relative;top:.1875rem;width:1rem}.Homepage-modules{margin:auto;max-width:45.0625rem;width:100%}.Homepage-modules-header{color:var(--color-text);font-weight:700}.Homepage-modules ul{list-style:circle;padding:0 1.5rem}.Homepage-modules ul>li{font-size:1rem;line-height:1.75rem}.Questions{background:var(--color-background-accented);color:var(--color-text);display:flex;padding-bottom:1rem;padding-top:.5rem}.Questions-header{color:var(--color-text);font-weight:700;margin:1rem 0}.Questions-content{flex-grow:1;margin:0 auto;max-width:75.75rem;padding:0 1.5rem}.Questions-content a{color:var(--color-bright-text-link)}.Questions-content ul{list-style:none;padding-inline-start:0}.Questions-content ul>li{font-size:.875rem;line-height:1.75rem}
+.go-SearchForm{display:none}.Homepage-logo{border-radius:var(--border-radius);display:block;height:10rem;margin:3.125rem auto;width:auto}[data-theme=dark] .Homepage-logo{mix-blend-mode:difference}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .Homepage-logo{mix-blend-mode:difference}}@media only screen and (min-width: 52rem){.Homepage{margin:2rem auto}.Homepage-logo{margin:3.5rem auto}}.Homepage-search{--border-radius: .5rem;height:3rem;margin:2.5rem auto 0;max-width:45.0625rem;position:relative;width:100%}.Homepage-search:before{background:url(/static/shared/icon/search_gm_grey_24dp.svg) left no-repeat;content:"";height:3rem;left:.75rem;position:absolute;width:1.5rem;z-index:3}.Homepage-search .go-Select,.Homepage-search .go-Input{padding-left:2.5rem}.Homepage-search--symbol .go-Input{border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);padding-left:2.5rem}.Homepage-search .go-Button{justify-content:center;width:7.375rem}.Homepage-search--symbol .go-Button{display:none}@media only screen and (min-width: 30rem){.Homepage-search--symbol .go-Input{border-bottom-right-radius:0;border-top-right-radius:0}.Homepage-search--symbol .go-Button{display:inline-flex}}input[type=search]::-webkit-search-decoration{display:none}.Homepage-tips{margin:auto;max-width:45.0625rem;width:100%}[data-local=true] .Homepage-tips{display:none}.Homepage-examples{align-items:center;display:flex;flex-direction:column;font-size:.875rem;gap:.5rem 1rem;justify-content:space-between;margin:0 auto;max-width:45.0625rem;white-space:nowrap;width:inherit}@media only screen and (min-width: 52rem){.Homepage-examples{flex-direction:row}}.Homepage-examplesTitle{color:var(--color-text-subtle);font-weight:500;text-transform:uppercase}.Homepage-examplesList{display:flex;flex-grow:1;flex-wrap:wrap;gap:.5rem 2rem}a.Homepage-helpLink{align-items:center;display:inline-flex;font-size:1em;font-weight:initial;margin-left:.5rem;white-space:nowrap}.Homepage-helpLink img{height:1rem;margin-left:.25rem;position:relative;top:.1875rem;width:1rem}.Homepage-modules{margin:auto;max-width:45.0625rem;width:100%}.Homepage-modules-header{color:var(--color-text);font-weight:700}.Homepage-modules ul{list-style:circle;padding:0 1.5rem}.Homepage-modules ul>li{font-size:1rem;line-height:1.75rem}.Questions{background:var(--color-background-accented);color:var(--color-text);display:flex;padding-bottom:1rem;padding-top:.5rem}.Questions-header{color:var(--color-text);font-weight:700;margin:1rem 0}.Questions-content{flex-grow:1;margin:0 auto;max-width:75.75rem;padding:0 1.5rem}.Questions-content a{color:var(--color-bright-text-link)}.Questions-content ul{list-style:none;padding-inline-start:0}.Questions-content ul>li{font-size:.875rem;line-height:1.75rem}
 /*!
  * Copyright 2020 The Go Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style

static/frontend/homepage/homepage.min.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["homepage.css"],
-  "sourcesContent": ["/*!\n * Copyright 2020 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n/* Hide the search form in the header. */\n.go-SearchForm {\n  display: none;\n}\n\n.Homepage-logo {\n  border-radius: var(--border-radius);\n  display: block;\n  height: 10rem;\n  margin: 3.125rem auto;\n  width: auto;\n}\n\n[data-theme='dark'] .Homepage-logo {\n  mix-blend-mode: difference;\n}\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme='light']) .Homepage-logo {\n    mix-blend-mode: difference;\n  }\n}\n@media only screen and (min-width: 52rem) {\n  .Homepage {\n    margin: 2rem auto;\n  }\n\n  .Homepage-logo {\n    margin: 3.5rem auto;\n  }\n}\n\n.Homepage-search {\n  --border-radius: 0.5rem;\n\n  height: 3rem;\n  margin: 2.5rem auto 0;\n  max-width: 45.0625rem;\n  position: relative;\n  width: 100%;\n}\n\n.Homepage-search::before {\n  background: url('/static/shared/icon/search_gm_grey_24dp.svg') left no-repeat;\n  content: '';\n  height: 3rem;\n  left: 0.75rem;\n  position: absolute;\n  width: 1.5rem;\n  z-index: 3;\n}\n\n.Homepage-search .go-Select {\n  padding-left: 2.5rem;\n}\n\n.Homepage-search .go-Input {\n  padding-left: 2.5rem;\n}\n\n.Homepage-search--symbol .go-Input {\n  border-bottom-right-radius: var(--border-radius);\n  border-top-right-radius: var(--border-radius);\n  padding-left: 2.5rem;\n}\n\n.Homepage-search .go-Button {\n  justify-content: center;\n  width: 7.375rem;\n}\n\n.Homepage-search--symbol .go-Button {\n  display: none;\n}\n@media only screen and (min-width: 30rem) {\n  .Homepage-search--symbol .go-Input {\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .Homepage-search--symbol .go-Button {\n    display: inline-flex;\n  }\n}\n\n.Homepage-closeIcon {\n  background: var(--color-input);\n  border-bottom: var(--border);\n  border-color: var(--color-brand-primary);\n  border-left: 0;\n  border-top: var(--border);\n  color: var(--color-button);\n  cursor: pointer;\n  display: inline-block;\n  font-weight: bold;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.Homepage-closeIcon:hover,\n.Homepage-closeIcon:focus,\n.Homepage-closeIcon:focus-within,\n.Homepage-closeIcon:active {\n  border-left: 0 !important;\n}\n\n.Homepage-search--input:hover,\n.Homepage-search--input:focus,\n.Homepage-search--input:focus-within,\n.Homepage-search--input:active {\n  border-right: 0 !important;\n}\n\ninput[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.Homepage-tips {\n  margin: auto;\n  max-width: 45.0625rem;\n  width: 100%;\n}\n\n[data-local='true'] .Homepage-tips {\n  display: none;\n}\n\n.Homepage-examples {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  font-size: 0.875rem;\n  gap: 0.5rem 1rem;\n  justify-content: space-between;\n  margin: 0 auto;\n  max-width: 45.0625rem;\n  white-space: nowrap;\n  width: inherit;\n}\n@media only screen and (min-width: 52rem) {\n  .Homepage-examples {\n    flex-direction: row;\n  }\n}\n\n.Homepage-examplesTitle {\n  color: var(--color-text-subtle);\n  font-weight: 500;\n  text-transform: uppercase;\n}\n\n.Homepage-examplesList {\n  display: flex;\n  flex-grow: 1;\n  flex-wrap: wrap;\n  gap: 0.5rem 2rem;\n}\n\na.Homepage-helpLink {\n  align-items: center;\n  display: inline-flex;\n  font-size: 1em;\n  font-weight: initial;\n  margin-left: 0.5rem;\n  white-space: nowrap;\n}\n\n.Homepage-helpLink img {\n  height: 1rem;\n  margin-left: 0.25rem;\n  position: relative;\n  top: 0.1875rem;\n  width: 1rem;\n}\n\n.Homepage-modules {\n  margin: auto;\n  max-width: 45.0625rem;\n  width: 100%;\n}\n\n.Homepage-modules-header {\n  color: var(--color-text);\n  font-weight: bold;\n}\n\n.Homepage-modules ul {\n  list-style: circle;\n  padding: 0 1.5rem;\n}\n\n.Homepage-modules ul > li {\n  font-size: 1rem;\n  line-height: 1.75rem;\n}\n\n.Questions {\n  background: var(--color-background-accented);\n  color: var(--color-text);\n  display: flex;\n  padding-bottom: 1rem;\n  padding-top: 0.5rem;\n}\n\n.Questions-header {\n  color: var(--color-text);\n  font-weight: bold;\n  margin: 1rem 0;\n}\n\n.Questions-content {\n  flex-grow: 1;\n  margin: 0 auto;\n  max-width: 75.75rem;\n  padding: 0 1.5rem;\n}\n\n.Questions-content a {\n  color: var(--color-bright-text-link);\n}\n\n.Questions-content ul {\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.Questions-content ul > li {\n  font-size: 0.875rem;\n  line-height: 1.75rem;\n}\n"],
-  "mappings": ";;;;;AAOA,eACE,aAGF,eACE,mCACA,cACA,aAdF,qBAgBE,WAGF,iCACE,0BAEF,oCACE,+CACE,2BAGJ,0CACE,UA5BF,iBAgCE,eAhCF,oBAqCA,iBACE,uBAEA,YAxCF,qBA0CE,qBACA,kBACA,WAGF,wBACE,2EACA,WACA,YACA,YACA,kBACA,aACA,UAGF,uDACE,oBAOF,mCACE,gDACA,6CACA,oBAGF,4BACE,uBACA,eAGF,oCACE,aAEF,0CACE,mCACE,6BACA,0BAGF,oCACE,qBAIJ,oBACE,8BACA,4BACA,wCACA,cACA,yBACA,0BACA,eACA,qBACA,gBACA,mBACA,oBAGF,gHAIE,wBAGF,gIAIE,yBAGF,8CACE,aAGF,eA1HA,YA4HE,qBACA,WAGF,iCACE,aAGF,mBACE,mBACA,aACA,sBACA,kBACA,eACA,8BA1IF,cA4IE,qBACA,mBACA,cAEF,0CACE,mBACE,oBAIJ,wBACE,+BACA,gBACA,yBAGF,uBACE,aACA,YACA,eACA,eAGF,oBACE,mBACA,oBACA,cACA,oBACA,kBACA,mBAGF,uBACE,YACA,mBACA,kBACA,aACA,WAGF,kBApLA,YAsLE,qBACA,WAGF,yBACE,wBACA,gBAGF,qBACE,kBAhMF,iBAoMA,wBACE,eACA,oBAGF,WACE,4CACA,wBACA,aACA,oBACA,kBAGF,kBACE,wBACA,gBAnNF,cAuNA,mBACE,YAxNF,cA0NE,mBA1NF,iBA8NA,qBACE,oCAGF,sBACE,gBACA,uBAGF,yBACE,kBACA",
+  "sourcesContent": ["/*!\n * Copyright 2020 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n/* Hide the search form in the header. */\n.go-SearchForm {\n  display: none;\n}\n\n.Homepage-logo {\n  border-radius: var(--border-radius);\n  display: block;\n  height: 10rem;\n  margin: 3.125rem auto;\n  width: auto;\n}\n\n[data-theme='dark'] .Homepage-logo {\n  mix-blend-mode: difference;\n}\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme='light']) .Homepage-logo {\n    mix-blend-mode: difference;\n  }\n}\n@media only screen and (min-width: 52rem) {\n  .Homepage {\n    margin: 2rem auto;\n  }\n\n  .Homepage-logo {\n    margin: 3.5rem auto;\n  }\n}\n\n.Homepage-search {\n  --border-radius: 0.5rem;\n\n  height: 3rem;\n  margin: 2.5rem auto 0;\n  max-width: 45.0625rem;\n  position: relative;\n  width: 100%;\n}\n\n.Homepage-search::before {\n  background: url('/static/shared/icon/search_gm_grey_24dp.svg') left no-repeat;\n  content: '';\n  height: 3rem;\n  left: 0.75rem;\n  position: absolute;\n  width: 1.5rem;\n  z-index: 3;\n}\n\n.Homepage-search .go-Select {\n  padding-left: 2.5rem;\n}\n\n.Homepage-search .go-Input {\n  padding-left: 2.5rem;\n}\n\n.Homepage-search--symbol .go-Input {\n  border-bottom-right-radius: var(--border-radius);\n  border-top-right-radius: var(--border-radius);\n  padding-left: 2.5rem;\n}\n\n.Homepage-search .go-Button {\n  justify-content: center;\n  width: 7.375rem;\n}\n\n.Homepage-search--symbol .go-Button {\n  display: none;\n}\n@media only screen and (min-width: 30rem) {\n  .Homepage-search--symbol .go-Input {\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .Homepage-search--symbol .go-Button {\n    display: inline-flex;\n  }\n}\n\ninput[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.Homepage-tips {\n  margin: auto;\n  max-width: 45.0625rem;\n  width: 100%;\n}\n\n[data-local='true'] .Homepage-tips {\n  display: none;\n}\n\n.Homepage-examples {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  font-size: 0.875rem;\n  gap: 0.5rem 1rem;\n  justify-content: space-between;\n  margin: 0 auto;\n  max-width: 45.0625rem;\n  white-space: nowrap;\n  width: inherit;\n}\n@media only screen and (min-width: 52rem) {\n  .Homepage-examples {\n    flex-direction: row;\n  }\n}\n\n.Homepage-examplesTitle {\n  color: var(--color-text-subtle);\n  font-weight: 500;\n  text-transform: uppercase;\n}\n\n.Homepage-examplesList {\n  display: flex;\n  flex-grow: 1;\n  flex-wrap: wrap;\n  gap: 0.5rem 2rem;\n}\n\na.Homepage-helpLink {\n  align-items: center;\n  display: inline-flex;\n  font-size: 1em;\n  font-weight: initial;\n  margin-left: 0.5rem;\n  white-space: nowrap;\n}\n\n.Homepage-helpLink img {\n  height: 1rem;\n  margin-left: 0.25rem;\n  position: relative;\n  top: 0.1875rem;\n  width: 1rem;\n}\n\n.Homepage-modules {\n  margin: auto;\n  max-width: 45.0625rem;\n  width: 100%;\n}\n\n.Homepage-modules-header {\n  color: var(--color-text);\n  font-weight: bold;\n}\n\n.Homepage-modules ul {\n  list-style: circle;\n  padding: 0 1.5rem;\n}\n\n.Homepage-modules ul > li {\n  font-size: 1rem;\n  line-height: 1.75rem;\n}\n\n.Questions {\n  background: var(--color-background-accented);\n  color: var(--color-text);\n  display: flex;\n  padding-bottom: 1rem;\n  padding-top: 0.5rem;\n}\n\n.Questions-header {\n  color: var(--color-text);\n  font-weight: bold;\n  margin: 1rem 0;\n}\n\n.Questions-content {\n  flex-grow: 1;\n  margin: 0 auto;\n  max-width: 75.75rem;\n  padding: 0 1.5rem;\n}\n\n.Questions-content a {\n  color: var(--color-bright-text-link);\n}\n\n.Questions-content ul {\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.Questions-content ul > li {\n  font-size: 0.875rem;\n  line-height: 1.75rem;\n}\n"],
+  "mappings": ";;;;;AAOA,eACE,aAGF,eACE,mCACA,cACA,aAdF,qBAgBE,WAGF,iCACE,0BAEF,oCACE,+CACE,2BAGJ,0CACE,UA5BF,iBAgCE,eAhCF,oBAqCA,iBACE,uBAEA,YAxCF,qBA0CE,qBACA,kBACA,WAGF,wBACE,2EACA,WACA,YACA,YACA,kBACA,aACA,UAGF,uDACE,oBAOF,mCACE,gDACA,6CACA,oBAGF,4BACE,uBACA,eAGF,oCACE,aAEF,0CACE,mCACE,6BACA,0BAGF,oCACE,qBAIJ,8CACE,aAGF,eA9FA,YAgGE,qBACA,WAGF,iCACE,aAGF,mBACE,mBACA,aACA,sBACA,kBACA,eACA,8BA9GF,cAgHE,qBACA,mBACA,cAEF,0CACE,mBACE,oBAIJ,wBACE,+BACA,gBACA,yBAGF,uBACE,aACA,YACA,eACA,eAGF,oBACE,mBACA,oBACA,cACA,oBACA,kBACA,mBAGF,uBACE,YACA,mBACA,kBACA,aACA,WAGF,kBAxJA,YA0JE,qBACA,WAGF,yBACE,wBACA,gBAGF,qBACE,kBApKF,iBAwKA,wBACE,eACA,oBAGF,WACE,4CACA,wBACA,aACA,oBACA,kBAGF,kBACE,wBACA,gBAvLF,cA2LA,mBACE,YA5LF,cA8LE,mBA9LF,iBAkMA,qBACE,oCAGF,sBACE,gBACA,uBAGF,yBACE,kBACA",
   "names": []
 }

static/frontend/homepage/homepage.tmpl

@@ -16,11 +16,12 @@
       <form class="go-InputGroup Homepage-search Homepage-search--symbol"
           action="/search" role="search" data-gtmc="homepage search form">
         <input
-          class="go-Input js-searchFocus Homepage-search--input"
+          class="go-Input js-searchFocus"
           data-test-id="homepage-search"
           id="AutoComplete"
           role="textbox"
           aria-label="{{.SearchPrompt}}"
+          type="search"
           name="q"
           placeholder="{{.SearchPrompt}}"
           autocapitalize="off"
@@ -29,7 +30,6 @@
           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}}">