From ff0ce0c06b451d6a5d36bbf98c440d419f8045ca Mon Sep 17 00:00:00 2001
From: Bill Parrott <bill@chimericdream.com>
Date: Tue, 28 Apr 2020 15:01:03 -0500
Subject: [PATCH] [aria-label-prop] change aria-label to aria-labelledby to
 eliminate redundancy and make it configurable

---
 packages/react-bootstrap-table2-toolkit/README.md |  3 +++
 .../src/search/SearchBar.js                       | 15 ++++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

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"
       >
-        <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;