fix(js): better accessibility for submit button label (#1254)

algolia · May 23, 2024 · e0304ae · e0304ae
1 parent fdaa2f7
commit e0304ae
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
@@ -89,6 +89,7 @@ See: https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocom
               class="aa-InputWrapperPrefix"
             >
               <label
+                arialabel="Submit"
                 class="aa-Label"
                 for="autocomplete-input"
                 id="autocomplete-label"

diff --git a/packages/autocomplete-js/src/createAutocompleteDom.ts b/packages/autocomplete-js/src/createAutocompleteDom.ts
@@ -78,9 +78,13 @@ export function createAutocompleteDom<TItem extends BaseItem>({
     title: translations.submitButtonTitle,
     children: [SearchIcon({ environment })],
   });
+  // @MAJOR Remove the label wrapper for the submit button.
+  // The submit button is sufficient for accessibility purposes, and
+  // wrapping it with the label actually makes it less accessible (see CR-6077).
   const label = createDomElement('label', {
     class: classNames.label,
     children: [submitButton],
+    ariaLabel: translations.submitButtonTitle,
     ...labelProps,
   });
   const clearButton = createDomElement('button', {