From 764a751c5b0eec9d0ac4dd60dbc0a68086415316 Mon Sep 17 00:00:00 2001
From: Chris Morgan <me@chrismorgan.info>
Date: Thu, 19 Jul 2018 08:24:12 +1000
Subject: [PATCH] Fix the semantically very broken search box (#9408)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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*.
---
 layouts/partials/docs/top-menu.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/layouts/partials/docs/top-menu.html b/layouts/partials/docs/top-menu.html
index 768fbc76a8..9351c5eefb 100644
--- a/layouts/partials/docs/top-menu.html
+++ b/layouts/partials/docs/top-menu.html
@@ -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>