diff --git a/packages/instantsearch.js/src/components/SearchBox/SearchBox.tsx b/packages/instantsearch.js/src/components/SearchBox/SearchBox.tsx index e3b3d69151..d349508e00 100644 --- a/packages/instantsearch.js/src/components/SearchBox/SearchBox.tsx +++ b/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() && diff --git a/packages/instantsearch.js/src/widgets/search-box/defaultTemplates.tsx b/packages/instantsearch.js/src/widgets/search-box/defaultTemplates.tsx index ebf0fae382..5f604d415e 100644 --- a/packages/instantsearch.js/src/widgets/search-box/defaultTemplates.tsx +++ b/packages/instantsearch.js/src/widgets/search-box/defaultTemplates.tsx @@ -17,6 +17,7 @@ const defaultTemplate: SearchBoxComponentTemplates = { ); }, + resetTitle: 'Clear the search query', submit({ cssClasses }) { return ( ); }, + submitTitle: 'Submit the search query', loadingIndicator({ cssClasses }) { /* eslint-disable react/no-unknown-property */ // Preact supports kebab case attributes, and using camel case would diff --git a/packages/instantsearch.js/src/widgets/search-box/search-box.tsx b/packages/instantsearch.js/src/widgets/search-box/search-box.tsx index 186d5d67d3..05ed9a02e2 100644 --- a/packages/instantsearch.js/src/widgets/search-box/search-box.tsx +++ b/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. */