From d47a3757b8191b300305521319dc1118351d1d30 Mon Sep 17 00:00:00 2001
From: Jay Staudt <jstaudt@devis.com>
Date: Tue, 2 Apr 2019 14:10:14 -0400
Subject: [PATCH] wrap search bar with label and hidden text

---
 .../src/search/SearchBar.js                   | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
index f51f09c..9ade309 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@@ -54,20 +54,25 @@ class SearchBar extends React.Component {
     const {
       className,
       style,
-      placeholder
+      placeholder,
+      tableId,
     } = this.props;
 
     return (
-      <input
-        ref={ n => this.input = n }
-        type="text"
-        style={ style }
-        onKeyUp={ () => this.onKeyup() }
-        onChange={ this.onChangeValue }
-        className={ `form-control ${className}` }
-        value={ this.state.value }
-        placeholder={ placeholder || SearchBar.defaultProps.placeholder }
-      />
+      <label htmlFor={`search-bar-${tableId}`} className="w-100">
+      <span className="sr-only">Search this table</span>
+        <input
+          ref={ n => this.input = n }
+          id={`search-bar-${ tableId }`}
+          type="text"
+          style={ style }
+          onKeyUp={ () => this.onKeyup() }
+          onChange={ this.onChangeValue }
+          className={ `form-control ${className}` }
+          value={ this.state.value }
+          placeholder={ placeholder || SearchBar.defaultProps.placeholder }
+        />
+      </label>
     );
   }
 }
@@ -78,7 +83,8 @@ SearchBar.propTypes = {
   placeholder: PropTypes.string,
   style: PropTypes.object,
   delay: PropTypes.number,
-  searchText: PropTypes.string
+  searchText: PropTypes.string,
+  tableId: PropTypes.string
 };
 
 SearchBar.defaultProps = {
@@ -86,7 +92,8 @@ SearchBar.defaultProps = {
   style: {},
   placeholder: 'Search',
   delay: 250,
-  searchText: ''
+  searchText: '',
+  tableId: 0
 };
 
 export default SearchBar;