Fix eslint6 jsx-a11y/label-has-for

[MAILPOET-1140]

.eslintrc.es6.json

@@ -31,7 +31,6 @@
     "react/jsx-boolean-value": 0,
     "react/jsx-no-bind": 0,
     "react/no-array-index-key": 0,
-    "jsx-a11y/label-has-for": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/alt-text": 0,
     "func-names": 0,

assets/js/src/form/fields/checkbox.jsx

@@ -20,7 +20,7 @@ define([
       const options = Object.keys(this.props.field.values).map(
         (value, index) => (
           <p key={`checkbox-${index}`}>
-            <label>
+            <label htmlFor={this.props.field.name}>
               <input
                 ref={(c) => { this.checkbox = c; }}
                 type="checkbox"
@@ -28,6 +28,7 @@ define([
                 checked={isChecked}
                 onChange={this.onValueChange}
                 name={this.props.field.name}
+                id={this.props.field.name}
               />
               { this.props.field.values[value] }
             </label>

assets/js/src/form/fields/radio.jsx

@@ -14,13 +14,14 @@ define([
       const options = Object.keys(this.props.field.values).map(
         (value, index) => (
           <p key={`radio-${index}`}>
-            <label>
+            <label htmlFor={this.props.field.name}>
               <input
                 type="radio"
                 checked={selectedValue === value}
                 value={value}
                 onChange={this.props.onValueChange}
                 name={this.props.field.name}
+                id={this.props.field.name}
               />
               { this.props.field.values[value] }
             </label>

assets/js/src/listing/header.jsx

@@ -32,12 +32,13 @@ const ListingHeader = React.createClass({
         <th
           className="manage-column column-cb check-column"
         >
-          <label className="screen-reader-text">
+          <label className="screen-reader-text" htmlFor="select_all">
             {MailPoet.I18n.t('selectAll')}
           </label>
           <input
             type="checkbox"
             name="select_all"
+            id="select_all"
             ref={(c) => { this.toggle = c; }}
             checked={this.props.selection}
             onChange={this.handleSelectItems}

assets/js/src/listing/listing.jsx

@@ -43,7 +43,7 @@ const ListingItem = React.createClass({
     if (this.props.is_selectable === true) {
       checkbox = (
         <th className="check-column" scope="row">
-          <label className="screen-reader-text">{
+          <label className="screen-reader-text" htmlFor={`listing-row-checkbox-${this.props.item.id}`}>{
             `Select ${this.props.item[this.props.columns[0].name]}`
           }</label>
           <input
@@ -54,6 +54,7 @@ const ListingItem = React.createClass({
             }
             onChange={this.handleSelectItem}
             disabled={this.props.selection === 'all'}
+            id={`listing-row-checkbox-${this.props.item.id}`}
           />
         </th>
       );