Make search bar and results more accessible

Added information on how to navigate to results in the aria-label attribute on the search bar Added a new field to English internationalization with instructions on how to navigate to search results. This field will appear via the aria-label to screen reader users. Added an enclosing div informing screen readers to update when the search results populate. Signed-off-by: Patrick Smyth <[email protected]>
sigstore · Sep 26, 2023 · 34410eb · 34410eb
1 parent 62c403a
commit 34410eb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -7,6 +7,9 @@
 - id: search-text
   translation: "Search"
 
+- id: search-aria-label
+  translation: "Search this site. After typing, navigate to results with the tab key and select your result with the Enter key."
+
 - id: 404-title
   translation: "404 — Page not found."
 

diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
@@ -87,10 +87,13 @@ <h2 class="h5 offcanvas-title ps-2" id="offcanvasDoksLabel"><a class="text-dark"
 
         {{ if $showFlexSearch -}}
         <hr class="text-black-50 my-4 d-lg-none">
-        <form class="doks-search position-relative flex-grow-1 ms-lg-auto me-lg-2">
-          <input id="search" class="form-control is-search" type="search" placeholder="{{ i18n "search-text" }}" aria-label="{{ i18n "search-text" }}" autocomplete="off">
+
+	<div role="region"  aria-live="polite">
+          <form class="doks-search position-relative flex-grow-1 ms-lg-auto me-lg-2">
+          <input id="search" class="form-control is-search" type="search" placeholder="{{ i18n "search-text" }}" aria-label="{{ i18n "search-aria-label" }}" autocomplete="off">
           <div id="suggestions" class="shadow bg-white rounded d-none"></div>
         </form>
+      </div>
         {{ end -}}
 
         <hr class="text-black-50 my-4 d-lg-none">