Make search bar and results more accessible (#255)

* 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 <patrick@iotaschool.com> * Shortened aria-label for search, added search role Made label instructing how to access search results less verbose Signed-off-by: Patrick Smyth <patrick@iotaschool.com> * Moved search role to form Signed-off-by: Patrick Smyth <patrick@iotaschool.com> * Changed aria label to include the word search After testing, we found it better to include the word search. Signed-off-by: Patrick Smyth <patrick@iotaschool.com> * Changed aria-live from polite to assertive Signed-off-by: Patrick Smyth <patrick@iotaschool.com> --------- Signed-off-by: Patrick Smyth <patrick@iotaschool.com>
sigstore · Oct 16, 2023 · 813f020 · 813f020
1 parent f050f54
commit 813f020
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. Press tab to navigate to search results"
+
 - 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="assertive">
+          <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">