static,tests: search form updates
- Search form inputs have type="search" to take advantage
of browser accessibilty features.
- Search query persists in input box after search is submitted.
Change-Id: I0e1dc968285d1a46d1b45a3ad498291548d32ae6
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/341179
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/static/frontend/homepage/homepage.tmpl b/static/frontend/homepage/homepage.tmpl
index 64d9c47..15280f1 100644
--- a/static/frontend/homepage/homepage.tmpl
+++ b/static/frontend/homepage/homepage.tmpl
@@ -29,7 +29,7 @@
id="AutoComplete"
role="textbox"
aria-label="Search for Go packages"
- type="text"
+ type="search"
name="q"
placeholder="Search for Go packages"
autocapitalize="off"
diff --git a/static/shared/header/header.tmpl b/static/shared/header/header.tmpl
index 5fc0d5d..9a612b7 100644
--- a/static/shared/header/header.tmpl
+++ b/static/shared/header/header.tmpl
@@ -84,9 +84,9 @@
<option {{if eq .SearchMode "identifiers"}}selected{{end}} value="identifiers">Identifiers</option>
</select>
{{end}}
- <input name="q" class="go-Input js-searchFocus" aria-label="Search for a package" type="text"
+ <input name="q" class="go-Input js-searchFocus" aria-label="Search for a package" type="search"
autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"
- placeholder="Search for a package" />
+ placeholder="Search for a package" value="{{.Query}}" />
<button class="go-Button go-Button--inverted" aria-label="Submit search">
<img
class="go-Icon"
diff --git a/tests/e2e/__image_snapshots__/ci/search-desktop--no-results-snap.png b/tests/e2e/__image_snapshots__/ci/search-desktop--no-results-snap.png
index fa1ea44..8d675e8 100644
--- a/tests/e2e/__image_snapshots__/ci/search-desktop--no-results-snap.png
+++ b/tests/e2e/__image_snapshots__/ci/search-desktop--no-results-snap.png
Binary files differ
diff --git a/tests/e2e/__image_snapshots__/ci/search-desktop--screenshot-snap.png b/tests/e2e/__image_snapshots__/ci/search-desktop--screenshot-snap.png
index ade6141..dcc3d72 100644
--- a/tests/e2e/__image_snapshots__/ci/search-desktop--screenshot-snap.png
+++ b/tests/e2e/__image_snapshots__/ci/search-desktop--screenshot-snap.png
Binary files differ
diff --git a/tests/e2e/__snapshots__/ci/basic.desktop.test.ts.snap b/tests/e2e/__snapshots__/ci/basic.desktop.test.ts.snap
index c25a417..f3eb2f2 100644
--- a/tests/e2e/__snapshots__/ci/basic.desktop.test.ts.snap
+++ b/tests/e2e/__snapshots__/ci/basic.desktop.test.ts.snap
@@ -17,7 +17,7 @@
},
Object {
"name": "Search for a package",
- "role": "textbox",
+ "role": "searchbox",
},
Object {
"name": "Submit search",
@@ -203,7 +203,7 @@
},
Object {
"name": "Search for a package",
- "role": "textbox",
+ "role": "searchbox",
},
Object {
"name": "Submit search",
@@ -401,7 +401,7 @@
},
Object {
"name": "Search for a package",
- "role": "textbox",
+ "role": "searchbox",
},
Object {
"name": "Submit search",
@@ -786,7 +786,7 @@
},
Object {
"name": "Search for a package",
- "role": "textbox",
+ "role": "searchbox",
},
Object {
"name": "Submit search",
@@ -1420,7 +1420,7 @@
},
Object {
"name": "Search for a package",
- "role": "textbox",
+ "role": "searchbox",
},
Object {
"name": "Submit search",
diff --git a/tests/e2e/__snapshots__/ci/search.desktop.test.ts.snap b/tests/e2e/__snapshots__/ci/search.desktop.test.ts.snap
index d7e1d4e..b172779 100644
--- a/tests/e2e/__snapshots__/ci/search.desktop.test.ts.snap
+++ b/tests/e2e/__snapshots__/ci/search.desktop.test.ts.snap
@@ -17,7 +17,8 @@
},
Object {
"name": "Search for a package",
- "role": "textbox",
+ "role": "searchbox",
+ "value": "http",
},
Object {
"name": "Submit search",
