Upgrade ESLint to 5.12.0

.eslintrc.js

@@ -1,7 +1,8 @@
 module.exports = {
 	"parser": "babel-eslint",
 	"extends": [
-		"wpcalypso/react-a11y",
+		"wpcalypso/react",
+		"plugin:jsx-a11y/recommended",
 		"prettier",
 		"prettier/react"
 	],
@@ -12,12 +13,14 @@ module.exports = {
 		"node": true,
 		"jquery": true
 	},
-	"ecmaFeatures": {
-		"jsx": true,
-		"modules": true
+	"parserOptions": {
+		"ecmaVersion": 2019,
+		"ecmaFeatures": {
+			"jsx": true
+		}
 	},
 	"plugins": [
-		"eslint-plugin-react",
+		"jsx-a11y",
 		"lodash"
 	],
 	"rules": {
@@ -81,6 +84,16 @@ module.exports = {
 		"wpcalypso/i18n-mismatched-placeholders": 2,
 		"wpcalypso/import-docblock": 2,
 		"wpcalypso/jsx-gridicon-size": 0, // Ignored for Jetpack
-		"wpcalypso/jsx-classname-namespace": 0 // Ignored for Jetpack
+		"wpcalypso/jsx-classname-namespace": 0, // Ignored for Jetpack
+		"jsx-a11y/label-has-for": [ 2, {
+			"required": {
+					"some": [ "nesting", "id" ]
+			},
+	}],
+		// Disabled rules for now. Ideally we should resolve all the errors these rules create.
+		"wpcalypso/redux-no-bound-selectors": 0,
+		"jsx-a11y/anchor-has-content": 0,
+		"react/no-string-refs": 0,
+		"jsx-a11y/anchor-is-valid": 0,
 	}
 }

_inc/client/at-a-glance/index.jsx

@@ -42,6 +42,8 @@ const renderPairs = layout =>
 	] );
 
 class AtAGlance extends Component {
+	trackSecurityClick = () => analytics.tracks.recordJetpackClick( 'aag_manage_security_wpcom' );
+
 	render() {
 		const settingsProps = {
 			updateOptions: this.props.updateOptions,
@@ -52,8 +54,6 @@ class AtAGlance extends Component {
 			siteAdminUrl: this.props.siteAdminUrl,
 			siteRawUrl: this.props.siteRawUrl,
 		};
-		const trackSecurityClick = () =>
-			analytics.tracks.recordJetpackClick( 'aag_manage_security_wpcom' );
 		const securityHeader = (
 			<DashSectionHeader
 				key="securityHeader"
@@ -65,7 +65,7 @@ class AtAGlance extends Component {
 						: __( 'Manage security settings' )
 				}
 				externalLinkPath={ this.props.isDevMode ? '' : '#/security' }
-				externalLinkClick={ trackSecurityClick }
+				externalLinkClick={ this.trackSecurityClick }
 			/>
 		);
 		const connections = (

_inc/client/at-a-glance/monitor.jsx

@@ -20,6 +20,15 @@ class DashMonitor extends Component {
 		isModuleAvailable: PropTypes.bool.isRequired,
 	};
 
+	activateAndTrack = () => {
+		analytics.tracks.recordEvent( 'jetpack_wpa_module_toggle', {
+			module: 'monitor',
+			toggled: 'on',
+		} );
+
+		this.props.updateOptions( { monitor: true } );
+	};
+
 	getContent() {
 		const labelName = __( 'Downtime monitoring' );
 
@@ -30,15 +39,6 @@ class DashMonitor extends Component {
 			link: 'https://jetpack.com/support/monitor/',
 		};
 
-		const activateAndTrack = () => {
-			analytics.tracks.recordEvent( 'jetpack_wpa_module_toggle', {
-				module: 'monitor',
-				toggled: 'on',
-			} );
-
-			this.props.updateOptions( { monitor: true } );
-		};
-
 		if ( this.props.getOptionValue( 'monitor' ) ) {
 			return (
 				<DashItem label={ labelName } module="monitor" support={ support } status="is-working">
@@ -65,7 +65,7 @@ class DashMonitor extends Component {
 								'{{a}}Activate Monitor{{/a}} to receive email notifications if your site goes down.',
 								{
 									components: {
-										a: <a href="javascript:void(0)" onClick={ activateAndTrack } />,
+										a: <a href="javascript:void(0)" onClick={ this.activateAndTrack } />,
 									},
 								}
 						  ) }

_inc/client/at-a-glance/photon.jsx

@@ -19,9 +19,10 @@ class DashPhoton extends Component {
 		isModuleAvailable: PropTypes.bool.isRequired,
 	};
 
+	activatePhoton = () => this.props.updateOptions( { photon: true } );
+
 	getContent() {
-		const labelName = __( 'Image Performance' ),
-			activatePhoton = () => this.props.updateOptions( { photon: true } );
+		const labelName = __( 'Image Performance' );
 
 		const support = {
 			text: __(
@@ -52,7 +53,7 @@ class DashPhoton extends Component {
 						? __( 'Unavailable in Dev Mode' )
 						: __( '{{a}}Activate{{/a}} to enhance the performance and speed of your images.', {
 								components: {
-									a: <a href="javascript:void(0)" onClick={ activatePhoton } />,
+									a: <a href="javascript:void(0)" onClick={ this.activatePhoton } />,
 								},
 						  } ) }
 				</p>

_inc/client/at-a-glance/protect.jsx

@@ -22,12 +22,13 @@ class DashProtect extends Component {
 		isModuleAvailable: PropTypes.bool.isRequired,
 	};
 
+	activateProtect = () => this.props.updateOptions( { protect: true } );
+
 	getContent() {
 		const support = {
 			text: __( 'Protects your site from traditional and distributed brute force login attacks.' ),
 			link: 'https://jetpack.com/support/protect/',
 		};
-		const activateProtect = () => this.props.updateOptions( { protect: true } );
 
 		if ( this.props.getOptionValue( 'protect' ) ) {
 			const protectCount = this.props.protectCount;
@@ -76,7 +77,7 @@ class DashProtect extends Component {
 								'{{a}}Activate Protect{{/a}} to keep your site protected from malicious sign in attempts.',
 								{
 									components: {
-										a: <a href="javascript:void(0)" onClick={ activateProtect } />,
+										a: <a href="javascript:void(0)" onClick={ this.activateProtect } />,
 									},
 								}
 						  ) }

_inc/client/at-a-glance/scan.jsx

@@ -13,11 +13,10 @@ import { getPlanClass } from 'lib/plans/constants';
 import Card from 'components/card';
 import QueryVaultPressData from 'components/data/query-vaultpress-data';
 import UpgradeLink from 'components/upgrade-link';
-import { getSitePlan } from 'state/site';
+import { getSitePlan, isFetchingSiteData } from 'state/site';
 import { isPluginInstalled } from 'state/site/plugins';
 import { getVaultPressScanThreatCount, getVaultPressData } from 'state/at-a-glance';
 import { isDevMode } from 'state/connection';
-import { isFetchingSiteData } from 'state/site';
 import DashItem from 'components/dash-item';
 import isArray from 'lodash/isArray';
 import get from 'lodash/get';

_inc/client/at-a-glance/search.jsx

@@ -55,9 +55,10 @@ class DashSearch extends Component {
 		isDevMode: false,
 	};
 
+	activateSearch = () => this.props.updateOptions( { search: true } );
+
 	render() {
-		const hasPro = 'is-business-plan' === this.props.planClass,
-			activateSearch = () => this.props.updateOptions( { search: true } );
+		const hasPro = 'is-business-plan' === this.props.planClass;
 
 		if ( this.props.isDevMode ) {
 			return renderCard( {
@@ -128,7 +129,7 @@ class DashSearch extends Component {
 				'{{a}}Activate{{/a}} to replace the WordPress built-in search with Jetpack Search, an advanced search experience.',
 				{
 					components: {
-						a: <a href="javascript:void(0)" onClick={ activateSearch } />,
+						a: <a href="javascript:void(0)" onClick={ this.activateSearch } />,
 					},
 				}
 			),

_inc/client/at-a-glance/stats/dash-stats-bottom.jsx

@@ -41,11 +41,12 @@ class DashStatsBottom extends Component {
 		];
 	}
 
+	trackViewDetailedStats = () => analytics.tracks.recordJetpackClick( 'view_detailed_stats' );
+
+	trackViewWpcomStats = () => analytics.tracks.recordJetpackClick( 'view_wpcom_stats' );
+
 	render() {
 		const s = this.statsBottom()[ 0 ];
-		const trackViewDetailedStats = () =>
-				analytics.tracks.recordJetpackClick( 'view_detailed_stats' ),
-			trackViewWpcomStats = () => analytics.tracks.recordJetpackClick( 'view_wpcom_stats' );
 
 		return (
 			<div>
@@ -100,7 +101,7 @@ class DashStatsBottom extends Component {
 							components: {
 								button: (
 									<Button
-										onClick={ trackViewDetailedStats }
+										onClick={ this.trackViewDetailedStats }
 										href={ this.props.siteAdminUrl + 'admin.php?page=stats' }
 									/>
 								),
@@ -111,7 +112,7 @@ class DashStatsBottom extends Component {
 								components: {
 									button: (
 										<Button
-											onClick={ trackViewWpcomStats }
+											onClick={ this.trackViewWpcomStats }
 											className="is-primary"
 											href={ 'https://wordpress.com/stats/insights/' + this.props.siteRawUrl }
 										/>

_inc/client/at-a-glance/stats/index.jsx

@@ -137,11 +137,12 @@ export class DashStats extends Component {
 		);
 	}
 
+	dismissCard = () => {
+		this.setState( { emptyStatsDismissed: true } );
+		this.props.updateOptions( { dismiss_empty_stats_card: true } );
+	};
+
 	renderEmptyStatsCard() {
-		const dismissCard = () => {
-			this.setState( { emptyStatsDismissed: true } );
-			this.props.updateOptions( { dismiss_empty_stats_card: true } );
-		};
 		return (
 			<Card className="jp-at-a-glance__stats-empty">
 				<img
@@ -156,16 +157,16 @@ export class DashStats extends Component {
 					<br />
 					{ __( 'Just give us a little time to collect data so we can display it for you here.' ) }
 				</p>
-				<Button onClick={ dismissCard } primary>
+				<Button onClick={ this.dismissCard } primary>
 					{ __( 'Okay, got it!' ) }
 				</Button>
 			</Card>
 		);
 	}
 
-	renderStatsArea() {
-		const activateStats = () => this.props.updateOptions( { stats: true } );
+	activateStats = () => this.props.updateOptions( { stats: true } );
 
+	renderStatsArea() {
 		if ( this.props.getOptionValue( 'stats' ) ) {
 			if ( this.statsErrors() ) {
 				return (
@@ -220,7 +221,7 @@ export class DashStats extends Component {
 								'{{a}}Activate Site Stats{{/a}} to see detailed stats, likes, followers, subscribers, and more! {{a1}}Learn More{{/a1}}',
 								{
 									components: {
-										a: <a href="javascript:void(0)" onClick={ activateStats } />,
+										a: <a href="javascript:void(0)" onClick={ this.activateStats } />,
 										a1: (
 											<a
 												href="https://jetpack.com/support/wordpress-com-stats/"
@@ -234,7 +235,7 @@ export class DashStats extends Component {
 				</div>
 				{ ! this.props.isDevMode && (
 					<div className="jp-at-a-glance__stats-inactive-button">
-						<Button onClick={ activateStats } primary>
+						<Button onClick={ this.activateStats } primary>
 							{ __( 'Activate Site Stats' ) }
 						</Button>
 					</div>
@@ -243,6 +244,16 @@ export class DashStats extends Component {
 		);
 	}
 
+	switchTo( timeFrame ) {
+		analytics.tracks.recordJetpackClick( { target: 'stats_switch_view', view: timeFrame } );
+		this.props.switchView( timeFrame );
+		this.props.fetchStatsData( timeFrame );
+	}
+
+	switchToDay = () => this.switchTo( 'day' );
+	switchToWeek = () => this.switchTo( 'week' );
+	switchToMonth = () => this.switchTo( 'month' );
+
 	maybeShowStatsTabs() {
 		const statsChart = this.statsChart( this.props.activeTab );
 
@@ -254,47 +265,34 @@ export class DashStats extends Component {
 			return false;
 		}
 
-		const switchToDay = () => {
-				analytics.tracks.recordJetpackClick( { target: 'stats_switch_view', view: 'day' } );
-				this.props.switchView( 'day' );
-				this.props.fetchStatsData( 'day' );
-			},
-			switchToWeek = () => {
-				analytics.tracks.recordJetpackClick( { target: 'stats_switch_view', view: 'week' } );
-				this.props.switchView( 'week' );
-				this.props.fetchStatsData( 'week' );
-			},
-			switchToMonth = () => {
-				analytics.tracks.recordJetpackClick( { target: 'stats_switch_view', view: 'month' } );
-				this.props.switchView( 'month' );
-				this.props.fetchStatsData( 'month' );
-			};
-
 		if ( this.props.getOptionValue( 'stats' ) && ! this.statsErrors() ) {
 			return (
 				<ul className="jp-at-a-glance__stats-views">
-					<li tabIndex="0" className="jp-at-a-glance__stats-view">
+					<li className="jp-at-a-glance__stats-view">
 						<a
+							tabIndex="0"
 							href="javascript:void(0)"
-							onClick={ switchToDay }
+							onClick={ this.switchToDay }
 							className={ this.getClass( 'day' ) }
 						>
 							{ __( 'Days' ) }
 						</a>
 					</li>
-					<li tabIndex="0" className="jp-at-a-glance__stats-view">
+					<li className="jp-at-a-glance__stats-view">
 						<a
+							tabIndex="0"
 							href="javascript:void(0)"
-							onClick={ switchToWeek }
+							onClick={ this.switchToWeek }
 							className={ this.getClass( 'week' ) }
 						>
 							{ __( 'Weeks' ) }
 						</a>
 					</li>
-					<li tabIndex="0" className="jp-at-a-glance__stats-view">
+					<li className="jp-at-a-glance__stats-view">
 						<a
+							tabIndex="0"
 							href="javascript:void(0)"
-							onClick={ switchToMonth }
+							onClick={ this.switchToMonth }
 							className={ this.getClass( 'month' ) }
 						>
 							{ __( 'Months' ) }

_inc/client/components/button-group/docs/example.jsx

@@ -34,7 +34,12 @@ const Buttons = createReactClass( {
 	render: function() {
 		return (
 			<div>
-				<a className="docs__design-toggle button" onClick={ this.toggleButtons }>
+				<a
+					className="docs__design-toggle button"
+					role="button"
+					tabIndex={ 0 }
+					onClick={ this.toggleButtons }
+				>
 					{ this.state.compact ? 'Normal Buttons' : 'Compact Buttons' }
 				</a>
 				<Card>

_inc/client/components/chart/bar.jsx

@@ -161,6 +161,8 @@ export default class ModuleChartBar extends React.Component {
 
 		return (
 			<div
+				role="button"
+				tabIndex={ 0 }
 				onClick={ this.clickHandler }
 				onMouseEnter={ this.mouseEnter }
 				onMouseLeave={ this.mouseLeave }

_inc/client/components/chart/index.jsx

@@ -48,7 +48,7 @@ export default class ModuleChart extends React.Component {
 		window.removeEventListener( 'resize', this.resize );
 	}
 
-	componentWillReceiveProps( nextProps ) {
+	UNSAFE_componentWillReceiveProps( nextProps ) {
 		if ( this.props.loading && ! nextProps.loading ) {
 			this.resize();
 		}

_inc/client/components/chart/legend.jsx

@@ -41,7 +41,6 @@ const LegendItem = createReactClass( {
 						type="checkbox"
 						className="dops-chart__legend-checkbox"
 						checked={ this.props.checked }
-						onChange={ function() {} }
 					/>
 					<span className={ this.props.className } />
 					{ this.props.label }