diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md
index 84b24445b..ae7cf70ba 100644
--- a/packages/react-bootstrap-table2-toolkit/README.md
+++ b/packages/react-bootstrap-table2-toolkit/README.md
@@ -80,6 +80,9 @@ Custom the style on input element.
#### delay = [number]
milionsecond for debounce user input.
+#### srText = [string]
+Customize the screen reader text for the search input. (Default: "Search this table")
+
### Search Options
#### defaultSearch - [string]
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
index 9bef75f32..fac666a8e 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@@ -56,7 +56,8 @@ class SearchBar extends React.Component {
className,
style,
placeholder,
- tableId
+ tableId,
+ srText
} = this.props;
return (
@@ -64,13 +65,15 @@ class SearchBar extends React.Component {
htmlFor={ `search-bar-${tableId}` }
className="search-label"
>
- Search this table
+
+ { srText }
+
this.input = n }
id={ `search-bar-${tableId}` }
type="text"
style={ style }
- aria-label="enter text you want to search"
+ aria-labelledby={ `search-bar-${tableId}-label` }
onKeyUp={ () => this.onKeyup() }
onChange={ this.onChangeValue }
className={ `form-control ${className}` }
@@ -89,7 +92,8 @@ SearchBar.propTypes = {
style: PropTypes.object,
delay: PropTypes.number,
searchText: PropTypes.string,
- tableId: PropTypes.string
+ tableId: PropTypes.string,
+ srText: PropTypes.string
};
SearchBar.defaultProps = {
@@ -98,7 +102,8 @@ SearchBar.defaultProps = {
placeholder: 'Search',
delay: 250,
searchText: '',
- tableId: '0'
+ tableId: '0',
+ srText: 'Search this table'
};
export default SearchBar;