Skip to content

Commit e0304ae

Browse files
authoredMay 23, 2024··
fix(js): better accessibility for submit button label (#1254)
1 parent fdaa2f7 commit e0304ae

File tree

2 files changed

+5
-0
lines changed

2 files changed

+5
-0
lines changed
 

‎packages/autocomplete-js/src/__tests__/autocomplete.test.ts

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ See: https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocom
8989
class="aa-InputWrapperPrefix"
9090
>
9191
<label
92+
arialabel="Submit"
9293
class="aa-Label"
9394
for="autocomplete-input"
9495
id="autocomplete-label"

‎packages/autocomplete-js/src/createAutocompleteDom.ts

+4
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,13 @@ export function createAutocompleteDom<TItem extends BaseItem>({
7878
title: translations.submitButtonTitle,
7979
children: [SearchIcon({ environment })],
8080
});
81+
// @MAJOR Remove the label wrapper for the submit button.
82+
// The submit button is sufficient for accessibility purposes, and
83+
// wrapping it with the label actually makes it less accessible (see CR-6077).
8184
const label = createDomElement('label', {
8285
class: classNames.label,
8386
children: [submitButton],
87+
ariaLabel: translations.submitButtonTitle,
8488
...labelProps,
8589
});
8690
const clearButton = createDomElement('button', {

0 commit comments

Comments
 (0)
Please sign in to comment.