feat(dom): Add labels to buttons

[dishantkapoor]

Summary

fixes #1183

Result

[Haroenv]

That's weird, there's already textContent in both of those buttons:

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

  Line 178 in 9a34596

  textContent: translations.detachedCancelButtonText,

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

  Line 142 in 9a34596

  textContent: state.query,

I wonder if this is happening when the query is "" only? Maybe that title should be submitButtonTitle like it's the case outside of detached:

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

Line 78 in 9a34596

title: translations.submitButtonTitle,

[dishantkapoor]

This is happening when we use detachedMediaQuery="" (blank) , If you write something then it replace button with form. I also passed translations but it not worked.

[Haroenv]

If only the textContent of the detachedSearchButtonQuery is changed (eg. to something static), does lighthouse work for you as well?

[dishantkapoor]

I passed it. We need some title here

To resolve the issue we need to pass title attribute in tag

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3665cff:

Sandbox	Source
@algolia/autocomplete-example-github-repositories-custom-plugin	Configuration
@algolia/autocomplete-example-instantsearch	Configuration
@algolia/autocomplete-example-playground	Configuration
@algolia/autocomplete-example-preview-panel-in-modal	Configuration
@algolia/autocomplete-example-react-renderer	Configuration
@algolia/autocomplete-example-starter-algolia	Configuration
@algolia/autocomplete-example-starter	Configuration
@algolia/autocomplete-example-reshape	Configuration
@algolia/autocomplete-example-vue	Configuration

[dhayab]

Hi there, thanks for your contribution. I looked into it and it seems there are 2 related issues we could fix:

1. The detached search button is indeed not accessible, because its text content cannot be read directly. I'd still prefer if we add a detachedSearchButtonTitle in the translations key, default it to "Search" and use it instead of having it hardcoded, typically:

const detachedSearchButton = createDomElement('button', {
  // ...
  title: translations.detachedSearchButtonTitle,
});

3. The reason this change isn't enough to pass Lighthouse is because the main .aa-Autocomplete says its labelled by an element which is not mounted in detached mode. To fix this we can instead apply the autocomplete-X-label id to the Search button like so:

const detachedSearchButton = createDomElement('button', {
  // ...
  id: labelProps.id,
});

With these changes, screen reader should correctly read the button and link it to the Autocomplete role.

[dhayab]

Just some final touches and it will be good to go for me. In addition to the suggestions, you'll need to set the default value for translations.detachedSearchButtonTitle, in getDefaultOptions.ts:

const defaultTranslations: AutocompleteTranslations = {
   clearButtonTitle: 'Clear',
   detachedCancelButtonText: 'Cancel',
+  detachedSearchButtonTitle: 'Search',
   submitButtonTitle: 'Submit',
};

[dhayab]

Thanks again for your contribution, this passes tests locally.