all repos — searchix @ 054d2b3bf7eb4c5a5401565e86031f22ea754062

Search engine for NixOS, nix-darwin, home-manager and NUR users

feat: improve accessibility and browser behaviour

Alan Pearce
commit

054d2b3bf7eb4c5a5401565e86031f22ea754062

parent

d6e117bb9aeb2bae23dedd51b59b6e6f139e8a4f

5 files changed, 37 insertions(+), 10 deletions(-)

jump to
M frontend/static/search.js → frontend/static/search.js
@@ -49,7 +49,9 @@ ev.preventDefault();
 }
 
 function addPaginationEventListeners(pagination) {
-  pagination.addEventListener("click", paginationLinkClicked);
+  Array.from(pagination.children).forEach((child) =>
+    child.addEventListener("click", paginationLinkClicked),
+  );
 }
 
 function renderFragmentHTML(html) {
M frontend/static/style.css → frontend/static/style.css
@@ -31,11 +31,12 @@ padding: 0.5rem 0;
 
     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 @@
 .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;
+}
M frontend/templates/blocks/options.gotmpl → frontend/templates/blocks/options.gotmpl
@@ -3,7 +3,7 @@ {{- range . }}
     {{- with .Data }}
       <details id="{{ .Name }}">
         <summary>
-          {{ .Name }}
+          <h3>{{ .Name }}</h3>
         </summary>
         {{ markdown .Description }}
         <dl>
M frontend/templates/blocks/results.gotmpl → 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 @@ {{- with $.Next }}
               <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 }}
M frontend/templates/blocks/search.gotmpl → 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>