[aria-label-prop] change aria-label to aria-labelledby to eliminate r…

…edundancy and make it configurable (#1359)

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]

packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js

@@ -56,21 +56,24 @@ class SearchBar extends React.Component {
  className,
  style,
  placeholder,
- tableId
+ tableId,
+ srText
  } = this.props;
 
  return (
  <label
  htmlFor={ `search-bar-${tableId}` }
  className="search-label"
  >
- <span className="sr-only">Search this table</span>
+ <span id={ `search-bar-${tableId}-label` } className="sr-only">
+ { srText }
+ </span>
  <input
  ref={ n => 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;