Fix the semantically very broken search box (#9408)

This was very annoyingly very broken. *Very* broken.

Two primary issues:

1. Autofocus. Autofocus should only be used on a field when it is the
   expected action on the page, because it steals keyboard events such
   as the arrow keys and Space for navigation, and causes users of
   screen readers confusion as they’re thrown into a strange place.

   It’d be just barely OK to use it on search pages, but used on
   *every* page in the documentation, it’s just *super* annoying.

2. Not being a form. I have *no* idea why anyone would ever have
   written it the way it was—it’s just awful from end to end, a bad
   reimplementation of a subset of native browser functionality.
   It’s a form, let it *be* a form.

   Possibly the most baffling part of it was the use of location.replace
   which breaks the back button. I just… why!?

   While I was at it, I gave the search box an aria-label for good
   measure, but I didn’t change its type to "search" because that has
   UI implications on some platforms that I’m too lazy to deal with.

This is still pretty bad, because that magnifying glass is done in CSS
rather than being a fair dinkum submit button, but I just wanted a
quick fix because the autofocus issue is annoying me *so much*.
pull/9386/head
Chris Morgan 2018-07-19 08:24:12 +10:00 committed by k8s-ci-robot
parent f0e2876848
commit 764a751c5b
1 changed files with 3 additions and 3 deletions

View File

@ -15,7 +15,7 @@
<li><a href="{{ .RelPermalink }}"{{ if $yah }} class="YAH"{{ end }}>{{ .LinkTitle | upper }}</a></li>
{{ end }}
</ul>
<div id="searchBox">
<input type="text" id="search" placeholder="Search" onkeydown="if (event.keyCode==13) window.location.replace('/docs/search/?q=' + this.value)" autofocus="autofocus">
</div>
<form id="searchBox" action="/docs/search/">
<input type="text" id="search" name="q" placeholder="Search" aria-label="Search">
</form>
</div>