wrap filter components with labels and hidden text

packages/react-bootstrap-table2-filter/src/components/date.js

@@ -132,24 +132,32 @@ class DateFilter extends Component {
         className={ `filter date-filter ${className}` }
         style={ style }
       >
-        <select
-          ref={ n => this.dateFilterComparator = n }
-          style={ comparatorStyle }
-          className={ `date-filter-comparator form-control ${comparatorClassName}` }
-          onChange={ this.onChangeComparator }
-          defaultValue={ defaultValue ? defaultValue.comparator : '' }
-        >
-          { this.getComparatorOptions() }
-        </select>
-        <input
-          ref={ n => this.inputDate = n }
-          className={ `filter date-filter-input form-control ${dateClassName}` }
-          style={ dateStyle }
-          type="date"
-          onChange={ this.onChangeDate }
-          placeholder={ placeholder || `Enter ${text}...` }
-          defaultValue={ this.getDefaultDate() }
-        />
+        <label htmlFor={`date-filter-comparator-${ column.text }`}>
+          <span className="sr-only">Filter comparator</span>
+          <select
+            ref={ n => this.dateFilterComparator = n }
+            id={`date-filter-comparator-${ column.text }`}
+            style={ comparatorStyle }
+            className={ `date-filter-comparator form-control ${comparatorClassName}` }
+            onChange={ this.onChangeComparator }
+            defaultValue={ defaultValue ? defaultValue.comparator : '' }
+          >
+            { this.getComparatorOptions() }
+          </select>
+        </label>
+        <label htmlFor={`date-filter-column-${ column.text }`}>
+          <span className="sr-only">Enter ${ column.text }</span>
+          <input
+            ref={ n => this.inputDate = n }
+            id={`date-filter-column-${ column.text }`}
+            className={ `filter date-filter-input form-control ${dateClassName}` }
+            style={ dateStyle }
+            type="date"
+            onChange={ this.onChangeDate }
+            placeholder={ placeholder || `Enter ${text}...` }
+            defaultValue={ this.getDefaultDate() }
+          />
+        </label>
       </div>
     );
   }

packages/react-bootstrap-table2-filter/src/components/multiselect.js

@@ -111,18 +111,22 @@ class MultiSelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <select
-        { ...rest }
-        ref={ n => this.selectInput = n }
-        style={ style }
-        multiple
-        className={ selectClass }
-        onChange={ this.filter }
-        onClick={ e => e.stopPropagation() }
-        defaultValue={ defaultValue !== undefined ? defaultValue : '' }
-      >
-        { this.getOptions() }
-      </select>
+      <label htmlFor={`multiselect-filter-column-${column.text}`}>
+        <span className="sr-only">Filter by {column.text}</span>
+        <select
+          { ...rest }
+          ref={ n => this.selectInput = n }
+          id={`multiselect-filter-column-${column.text}`}
+          style={ style }
+          multiple
+          className={ selectClass }
+          onChange={ this.filter }
+          onClick={ e => e.stopPropagation() }
+          defaultValue={ defaultValue !== undefined ? defaultValue : '' }
+        >
+          { this.getOptions() }
+        </select>
+      </label>
     );
   }
 }

packages/react-bootstrap-table2-filter/src/components/number.js

@@ -170,38 +170,50 @@ class NumberFilter extends Component {
     return (
       <div
         onClick={ e => e.stopPropagation() }
-        className={ `filter number-filter ${className}` }
+        className={`filter number-filter ${className}`}
         style={ style }
       >
-        <select
-          ref={ n => this.numberFilterComparator = n }
-          style={ comparatorStyle }
-          className={ `number-filter-comparator form-control ${comparatorClassName}` }
-          onChange={ this.onChangeComparator }
-          defaultValue={ defaultValue ? defaultValue.comparator : '' }
-        >
-          { this.getComparatorOptions() }
-        </select>
+        <label htmlFor={`number-filter-comparator-${column.text}`}>
+          <span className="sr-only">Filter comparator</span>
+          <select
+            ref={ n => this.numberFilterComparator = n }
+            style={ comparatorStyle }
+            id={`number-filter-comparator-${ column.text }`}
+            className={`number-filter-comparator form-control ${comparatorClassName}`}
+            onChange={ this.onChangeComparator }
+            defaultValue={ defaultValue ? defaultValue.comparator : '' }
+          >
+            { this.getComparatorOptions() }
+          </select>
+        </label>
         {
-          options ?
+          options ? 
+          <label htmlFor={`number-filter-column-${ column.text }`}>
+            <span className="sr-only">{`Select ${column.text}`}</span>
             <select
               ref={ n => this.numberFilter = n }
+              id={`number-filter-column-${ column.text }`}
               style={ numberStyle }
               className={ selectClass }
               onChange={ this.onChangeNumberSet }
               defaultValue={ defaultValue ? defaultValue.number : '' }
             >
               { this.getNumberOptions() }
-            </select> :
+            </select>
+          </label> :
+          <label htmlFor={`number-filter-column-${ column.text }`}>
+            <span className="sr-only">{`Enter ${ column.text }`}</span>
             <input
               ref={ n => this.numberFilter = n }
+              id={`number-filter-column-${ column.text }`}
               type="number"
               style={ numberStyle }
-              className={ `number-filter-input form-control ${numberClassName}` }
+              className={`number-filter-input form-control ${numberClassName}`}
               placeholder={ placeholder || `Enter ${column.text}...` }
               onChange={ this.onChangeNumber }
               defaultValue={ defaultValue ? defaultValue.number : '' }
             />
+          </label>
         }
       </div>
     );

packages/react-bootstrap-table2-filter/src/components/select.js

@@ -136,17 +136,21 @@ class SelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <select
-        { ...rest }
-        ref={ n => this.selectInput = n }
-        style={ style }
-        className={ selectClass }
-        onChange={ this.filter }
-        onClick={ e => e.stopPropagation() }
-        defaultValue={ defaultValue !== undefined ? defaultValue : '' }
-      >
-        { this.getOptions() }
-      </select>
+      <label htmlFor={`select-filter-column-${ column.text }`}>
+        <span className="sr-only">Filter by { column.text }</span>
+        <select
+          { ...rest }
+          ref={ n => this.selectInput = n }
+          id={`select-filter-column-${ column.text }`}
+          style={ style }
+          className={ selectClass }
+          onChange={ this.filter }
+          onClick={ e => e.stopPropagation() }
+          defaultValue={ defaultValue !== undefined ? defaultValue : '' }
+        >
+          { this.getOptions() }
+        </select>
+      </label>
     );
   }
 }

packages/react-bootstrap-table2-filter/src/components/text.js

@@ -94,17 +94,21 @@ class TextFilter extends Component {
 
     // stopPropagation for onClick event is try to prevent sort was triggered.
     return (
-      <input
-        { ...rest }
-        ref={ n => this.input = n }
-        type="text"
-        className={ `filter text-filter form-control ${className}` }
-        style={ style }
-        onChange={ this.filter }
-        onClick={ this.handleClick }
-        placeholder={ placeholder || `Enter ${text}...` }
-        value={ this.state.value }
-      />
+      <label htmlFor={`text-filter-column-${text}`}>
+        <span className="sr-only">Filter by {text}</span>
+        <input
+          { ...rest }
+          ref={ n => this.input = n }
+          type="text"
+          id={`text-filter-column-${ text }`}
+          className={ `filter text-filter form-control ${className}` }
+          style={ style }
+          onChange={ this.filter }
+          onClick={ this.handleClick }
+          placeholder={ placeholder || `Enter ${text}...` }
+          value={ this.state.value }
+        />
+      </label>
     );
   }
 }