Skip to content

Commit

Permalink
Fix the semantically very broken search box (#9408)
Browse files Browse the repository at this point in the history
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*.
  • Loading branch information
chris-morgan authored and k8s-ci-robot committed Jul 18, 2018
1 parent f0e2876 commit 764a751
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions layouts/partials/docs/top-menu.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h5>{{ .Params.abstract }}</h5>
<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>

0 comments on commit 764a751

Please sign in to comment.