From 5d186094d5308fe6b03ce53178de1e26f9f43e70 Mon Sep 17 00:00:00 2001 From: jimmyfrasche Date: Sun, 8 Oct 2017 13:00:25 -0700 Subject: [PATCH] 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 --- godoc/static/godoc.html | 2 +- godoc/static/godocs.js | 30 -------------- godoc/static/static.go | 88 +++++++++++++++++++++-------------------- godoc/static/style.css | 56 ++++++++++++++++++++------ 4 files changed, 92 insertions(+), 84 deletions(-) diff --git a/godoc/static/godoc.html b/godoc/static/godoc.html index 8c53ae8cfb..e0caaa8957 100644 --- a/godoc/static/godoc.html +++ b/godoc/static/godoc.html @@ -38,7 +38,7 @@ {{if .Playground}} Play {{end}} - + diff --git a/godoc/static/godocs.js b/godoc/static/godocs.js index cec8823d47..19bc9353ed 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() { }); }); -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 @@ function addPermalinks() { } $(document).ready(function() { - bindSearchEvents(); generateTOC(); addPermalinks(); bindToggles(".toggle"); diff --git a/godoc/static/static.go b/godoc/static/static.go index 66fa5db76d..bfbb9d7641 100644 --- a/godoc/static/static.go +++ b/godoc/static/static.go @@ -502,7 +502,7 @@ var Files = map[string]string{ {{if .Playground}} Play {{end}} - + @@ -591,7 +591,6 @@ and code is licensed under a BSD license.
/* 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() { }); }); -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 @@ function addPermalinks() { } $(document).ready(function() { - bindSearchEvents(); generateTOC(); addPermalinks(); bindToggles(".toggle"); @@ -3113,7 +3083,7 @@ div#footer { } 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#blog .read a, } div#playground .buttons a, div#menu > a, -div#menu > input, +input#search, #menu-button { border: 1px solid #375EAB; } @@ -3172,16 +3142,50 @@ div#menu > a, 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 @@ a.error { font-size: 14px; } - div#menu > input { + input#search { font-size: 14px; } } @@ -3656,14 +3660,14 @@ a.error { 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 16c96846f4..f65a09c7b1 100644 --- a/godoc/static/style.css +++ b/godoc/static/style.css @@ -206,7 +206,7 @@ div#footer { } 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#blog .read a, } div#playground .buttons a, div#menu > a, -div#menu > input, +input#search, #menu-button { border: 1px solid #375EAB; } @@ -265,16 +265,50 @@ div#menu > a, 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 @@ a.error { font-size: 14px; } - div#menu > input { + input#search { font-size: 14px; } } @@ -749,14 +783,14 @@ a.error { 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%; }