Merge d40cbc1 into 83b13ad

yext · Apr 24, 2023 · 3339825 · 3339825
2 parents 83b13ad + d40cbc1
commit 3339825
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/ui/components/search/searchcomponent.js b/src/ui/components/search/searchcomponent.js
@@ -275,7 +275,8 @@ export default class SearchComponent extends Component {
       shouldHideOnEmptySearch: config.autocomplete && config.autocomplete.shouldHideOnEmptySearch,
       onOpen: config.autocomplete && config.autocomplete.onOpen,
       onClose: config.autocomplete && config.autocomplete.onClose,
-      customPrompts: config.autocomplete && config.autocomplete.customPrompts
+      customPrompts: config.autocomplete && config.autocomplete.customPrompts,
+      autocompleteContainerIdName: this.autocompleteContainerIdName
     };
 
     if (!this._isTwin) {

diff --git a/src/ui/templates/search/autocomplete.hbs b/src/ui/templates/search/autocomplete.hbs
@@ -1,5 +1,6 @@
 <div class="yxt-AutoComplete-wrapper js-yxt-AutoComplete-wrapper">
-  <span class="yxt-AutoComplete-resultsCount sr-only" aria-live="assertive">
+  <span class="yxt-AutoComplete-resultsCount sr-only" aria-live="assertive"
+        id="{{autocompleteContainerIdName}}-label">
     {{#if hasResults}}
       {{#each sections}}
         {{#if label}}
@@ -29,7 +30,8 @@
     {{/if}}
   </span>
   {{#if hasResults}}
-    <div class="yxt-AutoComplete">
+    <div class="yxt-AutoComplete" role="listbox" id="{{autocompleteContainerIdName}}-results"
+         aria-labelledby="{{autocompleteContainerIdName}}-label">
       {{assign 'currentSelected' sectionIndex resultIndex}}
       {{#if promptHeader}}
         <ul class="yxt-AutoComplete-results">
@@ -39,7 +41,7 @@
         </ul>
       {{/if}}
       {{#each sections}}
-        <ul role="listbox"
+        <ul role="group"
             class="yxt-AutoComplete-results"
             aria-labelledby="{{../listLabelIdName}}"
         >

diff --git a/src/ui/templates/search/search.hbs b/src/ui/templates/search/search.hbs
@@ -6,8 +6,8 @@
 <div class="yxt-SearchBar">
   <div class="yxt-SearchBar-container">
     {{#if useForm}}
-      <form class="yxt-SearchBar-form">
-        <label class="sr-only" 
+      <form class="yxt-SearchBar-form" role="search">
+        <label class="sr-only"
                for="{{inputIdName}}"
                id="{{inputLabelIdName}}"
         >
@@ -16,6 +16,7 @@
         <input class="js-yext-query yxt-SearchBar-input"
           id="{{inputIdName}}"
           type="text"
+          role="combobox"
           name="query"
           value="{{query}}"
           {{#if _config.placeholderText}}placeholder="{{_config.placeholderText}}"{{/if}}
@@ -57,7 +58,7 @@
       </form>
     {{else}}
       <div class="yxt-SearchBar-input-wrapper">
-        <label class="sr-only" 
+        <label class="sr-only"
                for="{{inputIdName}}"
                id="{{inputLabelIdName}}"
         >
@@ -66,6 +67,7 @@
         <input class="js-yext-query yxt-SearchBar-input"
           id="{{inputIdName}}"
           type="text"
+          role="combobox"
           name="query"
           value="{{query}}"
           {{#if _config.placeholderText}}placeholder="{{_config.placeholderText}}"{{/if}}
@@ -100,6 +102,9 @@
         </button>
       </div>
     {{/if}}
-    <div id="{{autocompleteContainerIdName}}" class="yxt-SearchBar-autocomplete"></div>
+    <div
+      id="{{autocompleteContainerIdName}}"
+      class="yxt-SearchBar-autocomplete">
+    </div>
   </div>
 </div>