From b5a322a8e184846a0c0c20c7f721bf9a2e2ac638 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Thu, 15 Mar 2018 10:56:31 +0000
Subject: [PATCH] Fix eslint6 jsx-a11y/label-has-for

[MAILPOET-1140]
---
 .eslintrc.es6.json                     | 1 -
 assets/js/src/form/fields/checkbox.jsx | 3 ++-
 assets/js/src/form/fields/radio.jsx    | 3 ++-
 assets/js/src/listing/header.jsx       | 3 ++-
 assets/js/src/listing/listing.jsx      | 3 ++-
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/.eslintrc.es6.json b/.eslintrc.es6.json
index 9e37af70c1..8282e156ff 100644
--- a/.eslintrc.es6.json
+++ b/.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,
diff --git a/assets/js/src/form/fields/checkbox.jsx b/assets/js/src/form/fields/checkbox.jsx
index e3e2185920..262f8824c3 100644
--- a/assets/js/src/form/fields/checkbox.jsx
+++ b/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>
diff --git a/assets/js/src/form/fields/radio.jsx b/assets/js/src/form/fields/radio.jsx
index d95d865cec..b5518a88e9 100644
--- a/assets/js/src/form/fields/radio.jsx
+++ b/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>
diff --git a/assets/js/src/listing/header.jsx b/assets/js/src/listing/header.jsx
index d0c6898218..149576448b 100644
--- a/assets/js/src/listing/header.jsx
+++ b/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}
diff --git a/assets/js/src/listing/listing.jsx b/assets/js/src/listing/listing.jsx
index 7e2ae495de..0595f80df7 100644
--- a/assets/js/src/listing/listing.jsx
+++ b/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>
       );