static/shared/header: fix header search form layout
Change-Id: I67ac29fd1f8f9ee74d6fabb447c1a5af8d5f4ca3
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/336709
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Jonathan Amsterdam <jba@google.com>
diff --git a/static/shared/header/header.tmpl b/static/shared/header/header.tmpl
index 4fd677b..3acc25c 100644
--- a/static/shared/header/header.tmpl
+++ b/static/shared/header/header.tmpl
@@ -22,21 +22,7 @@
<img class="go-Header-logo" src="/static/shared/logo/go-white.svg" alt="Go">
</a>
<div class="go-Header-rightContent">
- {{if .Experiments.IsActive "symbol-search"}}
- {{template "symbol_search_bar" .}}
- {{else}}
- <form class="js-searchForm go-SearchForm" action="/search" role="search" data-gtmc="header search form" >
- <button class="js-searchFormSubmit go-SearchForm-submit" aria-label="Search for a package">
- <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path fill-rule="evenodd" clip-rule="evenodd" d="M11.76 10.27L17.49 16L16 17.49L10.27 11.76C9.2 12.53 7.91 13 6.5 13C2.91 13 0 10.09 0 6.5C0 2.91 2.91 0 6.5 0C10.09 0 13 2.91 13 6.5C13 7.91 12.53 9.2 11.76 10.27ZM6.5 2C4.01 2 2 4.01 2 6.5C2 8.99 4.01 11 6.5 11C8.99 11 11 8.99 11 6.5C11 4.01 8.99 2 6.5 2Z">
- </path></svg>
- </button>
- <input class="go-Input go-SearchForm-input js-searchFocus" aria-label="Search for a package"
- type="text" name="q" size="1" placeholder="Search for a package"
- autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"
- title="Search for a package">
- </form>
- {{end}}
+ {{template "symbol_search_bar" .}}
<ul class="go-Header-menu">
<li class="go-Header-menuItem">
<a href="https://go.dev/solutions/" data-gtmc="nav link">Why Go</a>
@@ -92,11 +78,15 @@
aria-label="Search for a package"
role="search"
>
- <select name="m" class="go-Select js-searchModeSelect">
- <option value="packages">Packages</option>
- <option {{if eq .SearchMode "identifiers"}}selected{{end}} value="identifiers">Identifiers</option>
- </select>
- <input name="q" class="go-Input" placeholder="Search for a package" />
+ {{if .Experiments.IsActive "symbol-search"}}
+ <select name="m" class="go-Select js-searchModeSelect">
+ <option value="packages">Packages</option>
+ <option {{if eq .SearchMode "identifiers"}}selected{{end}} value="identifiers">Identifiers</option>
+ </select>
+ {{end}}
+ <input name="q" class="go-Input" aria-label="Search for a package" type="text"
+ autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"
+ placeholder="Search for a package" />
<button class="go-Button go-Button--inverted" aria-label="Submit search">
<img
class="go-Icon"
diff --git a/tests/e2e/__snapshots__/basic.desktop.test.ts.snap b/tests/e2e/__snapshots__/basic.desktop.test.ts.snap
index 122ebb0..9ca84e3 100644
--- a/tests/e2e/__snapshots__/basic.desktop.test.ts.snap
+++ b/tests/e2e/__snapshots__/basic.desktop.test.ts.snap
@@ -17,12 +17,11 @@
},
Object {
"name": "Search for a package",
- "role": "button",
+ "role": "textbox",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
+ "name": "Submit search",
+ "role": "button",
},
Object {
"name": "Why Go",
@@ -204,12 +203,11 @@
},
Object {
"name": "Search for a package",
- "role": "button",
+ "role": "textbox",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
+ "name": "Submit search",
+ "role": "button",
},
Object {
"name": "Why Go",
@@ -403,12 +401,11 @@
},
Object {
"name": "Search for a package",
- "role": "button",
+ "role": "textbox",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
+ "name": "Submit search",
+ "role": "button",
},
Object {
"name": "Why Go",
@@ -789,12 +786,11 @@
},
Object {
"name": "Search for a package",
- "role": "button",
+ "role": "textbox",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
+ "name": "Submit search",
+ "role": "button",
},
Object {
"name": "Why Go",
@@ -1424,12 +1420,11 @@
},
Object {
"name": "Search for a package",
- "role": "button",
+ "role": "textbox",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
+ "name": "Submit search",
+ "role": "button",
},
Object {
"name": "Why Go",
diff --git a/tests/e2e/__snapshots__/basic.mobile.test.ts.snap b/tests/e2e/__snapshots__/basic.mobile.test.ts.snap
index d4155e1..d8a488e 100644
--- a/tests/e2e/__snapshots__/basic.mobile.test.ts.snap
+++ b/tests/e2e/__snapshots__/basic.mobile.test.ts.snap
@@ -8,15 +8,10 @@
"role": "link",
},
Object {
- "name": "Search for a package",
+ "name": "Open search",
"role": "button",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
- },
- Object {
"name": "Open navigation",
"role": "button",
},
@@ -195,15 +190,10 @@
"role": "link",
},
Object {
- "name": "Search for a package",
+ "name": "Open search",
"role": "button",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
- },
- Object {
"name": "Open navigation",
"role": "button",
},
@@ -394,15 +384,10 @@
"role": "link",
},
Object {
- "name": "Search for a package",
+ "name": "Open search",
"role": "button",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
- },
- Object {
"name": "Open navigation",
"role": "button",
},
@@ -780,15 +765,10 @@
"role": "link",
},
Object {
- "name": "Search for a package",
+ "name": "Open search",
"role": "button",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
- },
- Object {
"name": "Open navigation",
"role": "button",
},
@@ -1415,15 +1395,10 @@
"role": "link",
},
Object {
- "name": "Search for a package",
+ "name": "Open search",
"role": "button",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
- },
- Object {
"name": "Open navigation",
"role": "button",
},
diff --git a/tests/e2e/__snapshots__/search.desktop.test.ts.snap b/tests/e2e/__snapshots__/search.desktop.test.ts.snap
index 50b94e0..11294ae 100644
--- a/tests/e2e/__snapshots__/search.desktop.test.ts.snap
+++ b/tests/e2e/__snapshots__/search.desktop.test.ts.snap
@@ -17,12 +17,11 @@
},
Object {
"name": "Search for a package",
- "role": "button",
+ "role": "textbox",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
+ "name": "Submit search",
+ "role": "button",
},
Object {
"name": "Why Go",
diff --git a/tests/e2e/__snapshots__/search.mobile.test.ts.snap b/tests/e2e/__snapshots__/search.mobile.test.ts.snap
index 1e5835d..eea0620 100644
--- a/tests/e2e/__snapshots__/search.mobile.test.ts.snap
+++ b/tests/e2e/__snapshots__/search.mobile.test.ts.snap
@@ -8,15 +8,10 @@
"role": "link",
},
Object {
- "name": "Search for a package",
+ "name": "Open search",
"role": "button",
},
Object {
- "description": "Search for a package",
- "name": "Search for a package",
- "role": "textbox",
- },
- Object {
"name": "Open navigation",
"role": "button",
},
