From e0304ae671ea61821968867d50aab9e3e23c728b Mon Sep 17 00:00:00 2001
From: Dhaya <154633+dhayab@users.noreply.github.com>
Date: Thu, 23 May 2024 17:49:17 +0200
Subject: [PATCH] fix(js): better accessibility for submit button label (#1254)

---
 packages/autocomplete-js/src/__tests__/autocomplete.test.ts | 1 +
 packages/autocomplete-js/src/createAutocompleteDom.ts       | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
index c0c9cf320..3b0ceee8a 100644
--- 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
index 130c0b4bb..4c03b8e60 100644
--- 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', {