From f449fe8a3200f96f858dc07761241a97d3de5e8d Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Sat, 9 Jul 2022 12:29:54 -0700
Subject: [PATCH] Semantic/a11y markup improvements

- Make search results an <ol> with an ARIA label. If more elements are
  erver present on the SERP (e.g. settings), the <ol> should be placed
  inside a <section> and its label should move to that section too.
- Remove list-style and padding from the <ol> in the stylesheet
- Add the "search" ARIA role to the search form.
- Make search result titles headings. This is established convention
  that assistive-technology users are already familiar with from other
  engines.
- Add an indicator for "N search results found". This is where the list
  label comes from.
- Exclude the brand name from machine translation.
---
 static/main.css       |  5 +++++
 templates/form.html   |  5 +++--
 templates/search.html | 25 ++++++++++++++++---------
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/static/main.css b/static/main.css
index 80a3306..d314976 100644
--- a/static/main.css
+++ b/static/main.css
@@ -113,6 +113,11 @@ h1 a {
 	color: black;
 }
 
+ol {
+	list-style-type: none;
+	padding: 0;
+}
+
 .input-group {
 	display: flex;
 }
diff --git a/templates/form.html b/templates/form.html
index 7fcc93b..780a3fe 100644
--- a/templates/form.html
+++ b/templates/form.html
@@ -1,5 +1,5 @@
-<form action="/search">
-  <h1>
+<form action="/search" role="search">
+  <h1 translate="no">
     <a href="/">
       <span class="icon">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path></svg>
@@ -15,6 +15,7 @@
       name="q"
       placeholder="Search terms..." 
       autofocus
+			required
       value="{{.Query}}" />
     <button type="submit">Search</button>
   </div>
diff --git a/templates/search.html b/templates/search.html
index b8467c8..5ae0949 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -3,14 +3,21 @@
   {{template "form.html" .}}
 </header>
 <main>
-  {{range .Results}}
-  <div class="result">
-    <a href="{{.Page.Url}}" rel="noopener nofollow" class="title">{{.Page.Title}}</a>
-    <a href="{{.Page.Url}}" rel="noopener nofollow" class="url"><small>{{.Page.Url}}</small></a>
-    {{if .Page.Excerpt}}
-    <p class="excerpt">{{.Page.Excerpt}}</p>
-    {{end}}
-  </div>
-  {{end}}
+{{if .Results}}
+	<p role="note">{{len .Results}} <span id="sr-label">search results</span> found</p>
+	<ol aria-labelledby="sr-label">
+		{{range .Results}}
+		<li class="result">
+			<h2><a href="{{.Page.Url}}" rel="noopener nofollow" class="title">{{.Page.Title}}</a></h2>
+			<a href="{{.Page.Url}}" rel="noopener nofollow" class="url"><small>{{.Page.Url}}</small></a>
+			{{if .Page.Excerpt}}
+			<p class="excerpt">{{.Page.Excerpt}}</p>
+			{{end}}
+		</li>
+		{{end}}
+	</ol>
+{{else}}
+	<p role="note">No search results found</p>
+{{end}}
 </main>
 {{template "footer.html" .}}