Disable jsx-a11y/no-onchange lint rule (#50023)

* Disable the jsx-a11y/no-onchange lint rule As outlined in jsx-eslint/eslint-plugin-jsx-a11y#398, the rule is no longer relevant. It goes against the official React docs and keyboard navigation in <select> controls works fine using the `onChange` prop. The issue was in browsers older than IE 11. The rule will be removed from jsx-a11y/recommended in a future release. * Remove unnecessary lint rule exceptions
Automattic · Feb 14, 2021 · 805a247 · 805a247
1 parent f289005
commit 805a247
Show file tree

Hide file tree

Showing 7 changed files with 4 additions and 12 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -263,6 +263,10 @@ module.exports = {
 		// i18n-calypso translate triggers false failures
 		'jsx-a11y/anchor-has-content': 'off',
 
+		// Deprecated rule, the problems using <select> with keyboards this addressed don't appear to be an issue anymore
+		// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/398
+		'jsx-a11y/no-onchange': 'off',
+
 		'no-restricted-imports': [
 			2,
 			{

diff --git a/client/blocks/site-address-changer/index.jsx b/client/blocks/site-address-changer/index.jsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-onchange */
-
 /**
  * External dependencies
  */

diff --git a/client/components/forms/form-country-select/index.jsx b/client/components/forms/form-country-select/index.jsx
@@ -17,7 +17,6 @@ import FormSelect from 'calypso/components/forms/form-select';
  */
 import './style.scss';
 
-/* eslint-disable jsx-a11y/no-onchange */
 export class FormCountrySelect extends Component {
 	static propTypes = {
 		countriesList: PropTypes.array.isRequired,
@@ -74,6 +73,5 @@ export class FormCountrySelect extends Component {
 		);
 	}
 }
-/* eslint-enable jsx-a11y/no-onchange */
 
 export default localize( FormCountrySelect );
diff --git a/client/my-sites/checkout/composite-checkout/payment-methods/ebanx-tef.js b/client/my-sites/checkout/composite-checkout/payment-methods/ebanx-tef.js
@@ -204,7 +204,6 @@ function EbanxTefFields() {
 function BankSelector( { id, value, onChange, label, isError, errorMessage, disabled } ) {
 	const { __ } = useI18n();
 	const bankOptions = getBankOptions( __ );
-	/* eslint-disable jsx-a11y/no-onchange */
 	return (
 		<SelectWrapper>
 			<label htmlFor={ id } disabled={ disabled }>
@@ -223,7 +222,6 @@ function BankSelector( { id, value, onChange, label, isError, errorMessage, disa
 			<ErrorMessage isError={ isError } errorMessage={ errorMessage } />
 		</SelectWrapper>
 	);
-	/* eslint-enable jsx-a11y/no-onchange */
 }
 
 function BankOption( { value, label } ) {

diff --git a/client/my-sites/google-my-business/stats/chart.js b/client/my-sites/google-my-business/stats/chart.js
@@ -97,7 +97,6 @@ function getAggregation( props ) {
 }
 
 /* eslint-disable wpcalypso/jsx-classname-namespace */
-/* eslint-disable jsx-a11y/no-onchange */
 
 class GoogleMyBusinessStatsChart extends Component {
 	static propTypes = {
@@ -311,7 +310,6 @@ class GoogleMyBusinessStatsChart extends Component {
 	}
 }
 /* eslint-enable wpcalypso/jsx-classname-namespace */
-/* eslint-enable jsx-a11y/no-onchange */
 
 export default connect(
 	( state, ownProps ) => {

diff --git a/client/my-sites/marketing/connections/mailchimp-settings.jsx b/client/my-sites/marketing/connections/mailchimp-settings.jsx
@@ -92,7 +92,6 @@ const MailchimpSettings = ( {
 		);
 	}
 
-	/* eslint-disable jsx-a11y/no-onchange */
 	return (
 		<div>
 			<QueryMailchimpLists siteId={ siteId } />
@@ -132,7 +131,6 @@ const MailchimpSettings = ( {
 			{ common }
 		</div>
 	);
-	/* eslint-enable jsx-a11y/no-onchange */
 };
 
 export const renderMailchimpLogo = () => (

diff --git a/packages/composite-checkout/src/lib/payment-methods/ideal.js b/packages/composite-checkout/src/lib/payment-methods/ideal.js
@@ -118,7 +118,6 @@ function IdealFields() {
 function BankSelector( { id, value, onChange, label, isError, errorMessage, disabled } ) {
 	const { __ } = useI18n();
 	const bankOptions = getBankOptions( __ );
-	/* eslint-disable jsx-a11y/no-onchange */
 	return (
 		<SelectWrapper>
 			<label htmlFor={ id } disabled={ disabled }>
@@ -137,7 +136,6 @@ function BankSelector( { id, value, onChange, label, isError, errorMessage, disa
 			<ErrorMessage isError={ isError } errorMessage={ errorMessage } />
 		</SelectWrapper>
 	);
-	/* eslint-enable jsx-a11y/no-onchange */
 }
 
 function BankOption( { value, label } ) {