feat(searchbox): allow customising the title attributes (WIP)

PR still marked as WIP as I'm not sure if this is the right long-term solution, and haven't updated the tests yet.

Author: Haroenv

packages/instantsearch.js/src/components/SearchBox/SearchBox.tsx

@@ -207,7 +207,7 @@ class SearchBox extends Component<
             rootProps={{
               className: cssClasses.submit,
               type: 'submit',
-              title: 'Submit the search query',
+              title: templates.submitTitle,
               hidden: !showSubmit,
             }}
             templates={templates}
@@ -220,7 +220,7 @@ class SearchBox extends Component<
             rootProps={{
               className: cssClasses.reset,
               type: 'reset',
-              title: 'Clear the search query',
+              title: templates.resetTitle,
               hidden: !(
                 showReset &&
                 this.state.query.trim() &&

packages/instantsearch.js/src/widgets/search-box/defaultTemplates.tsx

@@ -17,6 +17,7 @@ const defaultTemplate: SearchBoxComponentTemplates = {
       </svg>
     );
   },
+  resetTitle: 'Clear the search query',
   submit({ cssClasses }) {
     return (
       <svg
@@ -30,6 +31,7 @@ const defaultTemplate: SearchBoxComponentTemplates = {
       </svg>
     );
   },
+  submitTitle: 'Submit the search query',
   loadingIndicator({ cssClasses }) {
     /* eslint-disable react/no-unknown-property */
     // Preact supports kebab case attributes, and using camel case would

packages/instantsearch.js/src/widgets/search-box/search-box.tsx

@@ -32,10 +32,18 @@ export type SearchBoxTemplates = Partial<{
    * Template used for displaying the submit button. Can accept a function or a Hogan string.
    */
   submit: Template<{ cssClasses: SearchBoxComponentCSSClasses }>;
+  /**
+   * Template used for alternative text for the submit button icon. Only accepts a string.
+   */
+  submitTitle: string;
   /**
    * Template used for displaying the reset button. Can accept a function or a Hogan string.
    */
   reset: Template<{ cssClasses: SearchBoxComponentCSSClasses }>;
+  /**
+   * Template used for alternative text for the reset button icon. Only accepts a string.
+   */
+  resetTitle: string;
   /**
    * Template used for displaying the loading indicator. Can accept a function or a Hogan string.
    */