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;