feat(dom): Add labels to buttons (#1234)

---------

Co-authored-by: Dishant Kapoor <[email protected]>

Author: dishantkapoor

packages/autocomplete-js/src/createAutocompleteDom.ts

@@ -161,6 +161,8 @@ export function createAutocompleteDom<TItem extends BaseItem>({
     const detachedSearchButton = createDomElement('button', {
       type: 'button',
       class: classNames.detachedSearchButton,
+      title: translations.detachedSearchButtonTitle,
+      id: labelProps.id,
       onClick() {
         setIsModalOpen(true);
       },

packages/autocomplete-js/src/getDefaultOptions.ts

@@ -138,6 +138,7 @@ export function getDefaultOptions<TItem extends BaseItem>(
   const defaultTranslations: AutocompleteTranslations = {
     clearButtonTitle: 'Clear',
     detachedCancelButtonText: 'Cancel',
+    detachedSearchButtonTitle: 'Search',
     submitButtonTitle: 'Submit',
   };
 

packages/autocomplete-shared/src/js/AutocompleteTranslations.ts

@@ -2,4 +2,5 @@ export type AutocompleteTranslations = {
   detachedCancelButtonText: string;
   clearButtonTitle: string;
   submitButtonTitle: string;
+  detachedSearchButtonTitle: string;
 };