godoc: add label and button to search bar
To increase accessibility of the search bar,
an aria-label for screen readers and a submit
button was added.
The search field was given the semantically correct
input type and marked required field as hints to UAs
that can use that to provide context to the user.
The placeholder text was restyled for improved contrast.
The javascript for handling placeholders was removed
as it is no longer necessary.
For golang/go#22171
Change-Id: I8db6428bb727a09e7f175e77100b4bcf9b6a5f3e
Reviewed-on: https://go-review.googlesource.com/69190
Reviewed-by: Andrew Bonventre <andybons@golang.org>
diff --git a/godoc/static/godoc.html b/godoc/static/godoc.html
index 8c53ae8..e0caaa8 100644
--- a/godoc/static/godoc.html
+++ b/godoc/static/godoc.html
@@ -38,7 +38,7 @@
{{if .Playground}}
<a id="playgroundButton" href="http://play.golang.org/" title="Show Go Playground">Play</a>
{{end}}
-<input type="text" id="search" name="q" class="inactive" value="Search" placeholder="Search">
+<span class="search-box"><input type="search" id="search" name="q" placeholder="Search" aria-label="Search" required><button type="submit"><span><svg width="24" height="24" viewBox="0 0 24 24"><title>submit search</title><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg></span></button></span>
</div>
</form>
diff --git a/godoc/static/godocs.js b/godoc/static/godocs.js
index cec8823..19bc935 100644
--- a/godoc/static/godocs.js
+++ b/godoc/static/godocs.js
@@ -5,7 +5,6 @@
/* A little code to ease navigation of these documents.
*
* On window load we:
- * + Bind search box hint placeholder show/hide events (bindSearchEvents)
* + Generate a table of contents (generateTOC)
* + Bind foldable sections (bindToggles)
* + Bind links to foldable sections (bindToggleLinks)
@@ -27,34 +26,6 @@
});
});
-function bindSearchEvents() {
-
- var search = $('#search');
- if (search.length === 0) {
- return; // no search box
- }
-
- function clearInactive() {
- if (search.is('.inactive')) {
- search.val('');
- search.removeClass('inactive');
- }
- }
-
- function restoreInactive() {
- if (search.val() !== '') {
- return;
- }
- search.val(search.attr('placeholder'));
- search.addClass('inactive');
- }
-
- search.on('focus', clearInactive);
- search.on('blur', restoreInactive);
-
- restoreInactive();
-}
-
/* Generates a table of contents: looks for h2 and h3 elements and generates
* links. "Decorates" the element with id=="nav" with this table of contents.
*/
@@ -359,7 +330,6 @@
}
$(document).ready(function() {
- bindSearchEvents();
generateTOC();
addPermalinks();
bindToggles(".toggle");
diff --git a/godoc/static/static.go b/godoc/static/static.go
index 66fa5db..bfbb9d7 100644
--- a/godoc/static/static.go
+++ b/godoc/static/static.go
@@ -502,7 +502,7 @@
{{if .Playground}}
<a id="playgroundButton" href="http://play.golang.org/" title="Show Go Playground">Play</a>
{{end}}
-<input type="text" id="search" name="q" class="inactive" value="Search" placeholder="Search">
+<span class="search-box"><input type="search" id="search" name="q" placeholder="Search" aria-label="Search" required><button type="submit"><span><svg width="24" height="24" viewBox="0 0 24 24"><title>submit search</title><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg></span></button></span>
</div>
</form>
@@ -591,7 +591,6 @@
/* A little code to ease navigation of these documents.
*
* On window load we:
- * + Bind search box hint placeholder show/hide events (bindSearchEvents)
* + Generate a table of contents (generateTOC)
* + Bind foldable sections (bindToggles)
* + Bind links to foldable sections (bindToggleLinks)
@@ -613,34 +612,6 @@
});
});
-function bindSearchEvents() {
-
- var search = $('#search');
- if (search.length === 0) {
- return; // no search box
- }
-
- function clearInactive() {
- if (search.is('.inactive')) {
- search.val('');
- search.removeClass('inactive');
- }
- }
-
- function restoreInactive() {
- if (search.val() !== '') {
- return;
- }
- search.val(search.attr('placeholder'));
- search.addClass('inactive');
- }
-
- search.on('focus', clearInactive);
- search.on('blur', restoreInactive);
-
- restoreInactive();
-}
-
/* Generates a table of contents: looks for h2 and h3 elements and generates
* links. "Decorates" the element with id=="nav" with this table of contents.
*/
@@ -945,7 +916,6 @@
}
$(document).ready(function() {
- bindSearchEvents();
generateTOC();
addPermalinks();
bindToggles(".toggle");
@@ -3113,7 +3083,7 @@
}
div#menu > a,
-div#menu > input,
+input#search,
div#learn .buttons a,
div.play .buttons a,
div#blog .read a,
@@ -3129,7 +3099,7 @@
}
div#playground .buttons a,
div#menu > a,
-div#menu > input,
+input#search,
#menu-button {
border: 1px solid #375EAB;
}
@@ -3172,16 +3142,50 @@
margin: 10px 2px;
padding: 10px;
}
-div#menu > input {
- position: relative;
- top: 1px;
+::-webkit-input-placeholder {
+ color: #7f7f7f;
+ opacity: 1;
+}
+::placeholder {
+ color: #7f7f7f;
+ opacity: 1;
+}
+#menu .search-box {
+ display: inline-flex;
width: 140px;
+}
+input#search {
background: white;
color: #222;
box-sizing: border-box;
+ -webkit-appearance: none;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right: 0;
+ margin-right: 0;
+ flex-grow: 1;
+ max-width: 100%;
+ min-width: 90px;
}
-div#menu > input.inactive {
- color: #999;
+input#search:-moz-ui-invalid {
+ box-shadow: unset;
+}
+input#search + button {
+ display: inline;
+ font-size: 1em;
+ background-color: #375EAB;
+ color: white;
+ border: 1px solid #375EAB;
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ margin-left: 0;
+ cursor: pointer;
+}
+input#search + button span {
+ display: flex;
+}
+input#search + button svg {
+ fill: white
}
#menu-button {
@@ -3608,7 +3612,7 @@
font-size: 14px;
}
- div#menu > input {
+ input#search {
font-size: 14px;
}
}
@@ -3656,14 +3660,14 @@
float: left;
}
- div#menu > a,
- div#menu > input {
+ div#menu > a {
display: block;
margin-left: 0;
margin-right: 0;
}
- div#menu > input {
+ #menu .search-box {
+ display: flex;
width: 100%;
}
diff --git a/godoc/static/style.css b/godoc/static/style.css
index 16c9684..f65a09c 100644
--- a/godoc/static/style.css
+++ b/godoc/static/style.css
@@ -206,7 +206,7 @@
}
div#menu > a,
-div#menu > input,
+input#search,
div#learn .buttons a,
div.play .buttons a,
div#blog .read a,
@@ -222,7 +222,7 @@
}
div#playground .buttons a,
div#menu > a,
-div#menu > input,
+input#search,
#menu-button {
border: 1px solid #375EAB;
}
@@ -265,16 +265,50 @@
margin: 10px 2px;
padding: 10px;
}
-div#menu > input {
- position: relative;
- top: 1px;
+::-webkit-input-placeholder {
+ color: #7f7f7f;
+ opacity: 1;
+}
+::placeholder {
+ color: #7f7f7f;
+ opacity: 1;
+}
+#menu .search-box {
+ display: inline-flex;
width: 140px;
+}
+input#search {
background: white;
color: #222;
box-sizing: border-box;
+ -webkit-appearance: none;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right: 0;
+ margin-right: 0;
+ flex-grow: 1;
+ max-width: 100%;
+ min-width: 90px;
}
-div#menu > input.inactive {
- color: #999;
+input#search:-moz-ui-invalid {
+ box-shadow: unset;
+}
+input#search + button {
+ display: inline;
+ font-size: 1em;
+ background-color: #375EAB;
+ color: white;
+ border: 1px solid #375EAB;
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ margin-left: 0;
+ cursor: pointer;
+}
+input#search + button span {
+ display: flex;
+}
+input#search + button svg {
+ fill: white
}
#menu-button {
@@ -701,7 +735,7 @@
font-size: 14px;
}
- div#menu > input {
+ input#search {
font-size: 14px;
}
}
@@ -749,14 +783,14 @@
float: left;
}
- div#menu > a,
- div#menu > input {
+ div#menu > a {
display: block;
margin-left: 0;
margin-right: 0;
}
- div#menu > input {
+ #menu .search-box {
+ display: flex;
width: 100%;
}
