feat: improve accessibility and browser behaviour

5 files changed, 37 insertions, 10 deletions

diff --git a/frontend/static/search.js b/frontend/static/search.js
index 358de13..030a318 100644
--- a/frontend/static/search.js
+++ b/frontend/static/search.js
@@ -49,7 +49,9 @@ function paginationLinkClicked(ev) {
 }
 
 function addPaginationEventListeners(pagination) {
-  pagination.addEventListener("click", paginationLinkClicked);
+  Array.from(pagination.children).forEach((child) =>
+    child.addEventListener("click", paginationLinkClicked),
+  );
 }
 
 function renderFragmentHTML(html) {
diff --git a/frontend/static/style.css b/frontend/static/style.css
index 9dbe198..4596fb3 100644
--- a/frontend/static/style.css
+++ b/frontend/static/style.css
@@ -31,11 +31,12 @@ body > header {
 
     a {
       margin-bottom: unset;
+      font-size: 1.15rem;
     }
 
     & h1 {
       margin: unset;
-      font-size: unset;
+      font-size: 1.15rem;
       line-height: 2;
       & > a {
         margin-left: unset;
@@ -114,3 +115,17 @@ section {
 .error {
   background: var(--accent-error);
 }
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h2:only-child {
+  margin-top: 0;
+}
+
+h3 {
+  margin: unset;
+  font-size: 1.25rem;
+  display: inline-block;
+}
diff --git a/frontend/templates/blocks/options.gotmpl b/frontend/templates/blocks/options.gotmpl
index 806ca2f..de31696 100644
--- a/frontend/templates/blocks/options.gotmpl
+++ b/frontend/templates/blocks/options.gotmpl
@@ -3,7 +3,7 @@
     {{- with .Data }}
       <details id="{{ .Name }}">
         <summary>
-          {{ .Name }}
+          <h3>{{ .Name }}</h3>
         </summary>
         {{ markdown .Description }}
         <dl>
diff --git a/frontend/templates/blocks/results.gotmpl b/frontend/templates/blocks/results.gotmpl
index 95c89ca..c375156 100644
--- a/frontend/templates/blocks/results.gotmpl
+++ b/frontend/templates/blocks/results.gotmpl
@@ -1,10 +1,10 @@
 {{- define "results" }}
   {{- with .Results }}
     {{- if gt .Total 0 }}
-      <section id="results">
+      <section id="results" role="list" aria-label="search results">
         {{ block "hits" .Hits }}
         {{ end }}
-        <footer>
+        <footer aria-label="pagination">
           <nav id="pagination">
             {{- with $.Prev }}
               <a class="button" href="{{ . }}" rel="prev">Prev</a>
@@ -13,11 +13,11 @@
               <a class="button" href="{{ . }}" rel="next">Next</a>
             {{- end }}
           </nav>
-          <span>{{ .Total }} results</span>
+          <span role="status">{{ .Total }} results</span>
         </footer>
       </section>
     {{- else }}
-      Nothing found
+      <span role="status">Nothing found</span>
     {{- end }}
   {{- end }}
 {{- end }}
diff --git a/frontend/templates/blocks/search.gotmpl b/frontend/templates/blocks/search.gotmpl
index 6f47df3..1be001a 100644
--- a/frontend/templates/blocks/search.gotmpl
+++ b/frontend/templates/blocks/search.gotmpl
@@ -1,8 +1,18 @@
 {{- define "main" }}
-  <form id="search">
-    <label for="query">{{ .Source.Name }} option search</label>
+  <form id="search" role="search">
     <fieldset>
-      <input id="query" name="query" type="search" value="{{ .Query }}" />
+      <legend id="legend">
+        <h2>{{ sourceNameAndType .Source }} search</h2>
+      </legend>
+      <input
+        id="query"
+        aria-labelledby="legend"
+        name="query"
+        type="search"
+        value="{{ .Query }}"
+        autofocus
+        spellcheck="false"
+      />
       <button>Search</button>
     </fieldset>
   </form>