Improve usage of eslint-disable directives (WordPress#16941)

* Remove unused `eslint-disable` directives
* Leverage `eslint-plugin-eslint-comments` and fix reported errors

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
 	extends: [
 		'plugin:@wordpress/eslint-plugin/recommended',
 		'plugin:jest/recommended',
+		'plugin:eslint-comments/recommended',
 	],
 	plugins: [
 		'import',

bin/commander.js

@@ -637,3 +637,5 @@ program
 	} );
 
 program.parse( process.argv );
+
+/* eslint-enable no-console */

bin/packages/build.js

@@ -175,3 +175,5 @@ stream
 	} ) )
 	.on( 'end', () => ended = true )
 	.resume();
+
+/* eslint-enable no-console */

package.json

@@ -99,6 +99,7 @@
 		"cssnano": "4.1.10",
 		"deep-freeze": "0.0.1",
 		"enzyme": "3.9.0",
+		"eslint-plugin-eslint-comments": "3.1.2",
 		"eslint-plugin-import": "2.18.2",
 		"eslint-plugin-jest": "22.14.1",
 		"fast-glob": "2.2.7",

packages/block-editor/src/components/block-list/block.js

@@ -478,16 +478,6 @@ function BlockListBlock( {
 		blockEdit = <div style={ { display: 'none' } }>{ blockEdit }</div>;
 	}
 
-	// Disable reasons:
-	//
-	//  jsx-a11y/mouse-events-have-key-events:
-	//   - onMouseOver is explicitly handling hover effects
-	//
-	//  jsx-a11y/no-static-element-interactions:
-	//   - Each block can be selected by clicking on it
-
-	/* eslint-disable jsx-a11y/mouse-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-
 	return (
 		<IgnoreNestedEvents
 			id={ blockElementId }
@@ -618,7 +608,6 @@ function BlockListBlock( {
 			) }
 		</IgnoreNestedEvents>
 	);
-	/* eslint-enable jsx-a11y/mouse-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 }
 
 const applyWithSelect = withSelect(

packages/block-editor/src/components/inserter/menu.js

@@ -161,7 +161,6 @@ export class InserterMenu extends Component {
 
 				this.props.setTimeout( () => {
 					// We need a generic way to access the panel's container
-					// eslint-disable-next-line react/no-find-dom-node
 					scrollIntoView( this.panels[ panel ], this.inserterResults.current, {
 						alignWithTop: true,
 					} );
@@ -361,7 +360,7 @@ export class InserterMenu extends Component {
 				}
 			</div>
 		);
-		/* eslint-enable jsx-a11y/no-autofocus, jsx-a11y/no-noninteractive-element-interactions */
+		/* eslint-enable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */
 	}
 }
 

packages/block-editor/src/components/inserter/menu.native.js

@@ -101,7 +101,6 @@ export class InserterMenu extends Component {
 				/>
 			</BottomSheet>
 		);
-		/* eslint-enable jsx-a11y/no-autofocus, jsx-a11y/no-noninteractive-element-interactions */
 	}
 }
 

packages/block-editor/src/utils/transform-styles/ast/parse.js

@@ -684,3 +684,5 @@ function addParent( obj, parent ) {
 
 	return obj;
 }
+
+/* eslint-enable @wordpress/no-unused-vars-before-return */

packages/block-editor/src/utils/transform-styles/ast/stringify/identity.js

@@ -286,3 +286,5 @@ Compiler.prototype.indent = function( level ) {
 
 	return Array( this.level ).join( this.indentation || '  ' );
 };
+
+/* eslint-enable @wordpress/no-unused-vars-before-return */

packages/block-library/src/audio/edit.js

@@ -151,7 +151,6 @@ class AudioEdit extends Component {
 			);
 		}
 
-		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 		return (
 			<>
 				<BlockControls>
@@ -210,7 +209,6 @@ class AudioEdit extends Component {
 				</figure>
 			</>
 		);
-		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 	}
 }
 export default compose( [

packages/block-library/src/classic/edit.js

@@ -183,12 +183,8 @@ export default class ClassicEdit extends Component {
 		// jsx-a11y/no-static-element-interactions
 		//  - the toolbar itself is non-interactive, but must capture events
 		//    from the KeyboardShortcuts component to stop their propagation.
-		//
-		// jsx-a11y/no-static-element-interactions
-		//  - Clicking on this visual placeholder should create the
-		//    toolbar, it can also be created by focussing the field below.
 
-		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		return [
 			<div
 				key="toolbar"
@@ -205,6 +201,6 @@ export default class ClassicEdit extends Component {
 				className="wp-block-freeform block-library-rich-text__tinymce"
 			/>,
 		];
-		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	}
 }

packages/block-library/src/embed/embed-preview.js

@@ -69,7 +69,7 @@ class EmbedPreview extends Component {
 		// Disabled because the overlay div doesn't actually have a role or functionality
 		// as far as the user is concerned. We're just catching the first click so that
 		// the block can be selected without interacting with the embed preview that the overlay covers.
-		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions */
+		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		const embedWrapper = 'wp-embed' === type ? (
 			<WpEmbedPreview
 				html={ html }
@@ -88,7 +88,7 @@ class EmbedPreview extends Component {
 					onMouseUp={ this.hideOverlay } /> }
 			</div>
 		);
-		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions */
+		/* eslint-enable jsx-a11y/no-static-element-interactions */
 
 		return (
 			<figure className={ classnames( className, 'wp-block-embed', { 'is-type-video': 'video' === type } ) }>

packages/block-library/src/image/edit.js

@@ -778,7 +778,7 @@ export class ImageEdit extends Component {
 		);
 
 		// Disable reason: Each block can be selected by clicking on it
-		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+		/* eslint-disable jsx-a11y/click-events-have-key-events */
 		return (
 			<>
 				{ controls }
@@ -924,7 +924,7 @@ export class ImageEdit extends Component {
 				{ mediaPlaceholder }
 			</>
 		);
-		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+		/* eslint-enable jsx-a11y/click-events-have-key-events */
 	}
 }
 

packages/block-library/src/index.js

@@ -74,7 +74,7 @@ const registerBlock = ( block ) => {
 	}
 	const { metadata, settings, name } = block;
 	if ( metadata ) {
-		unstable__bootstrapServerSideBlockDefinitions( { [ name ]: metadata } ); // eslint-disable-line camelcase
+		unstable__bootstrapServerSideBlockDefinitions( { [ name ]: metadata } );
 	}
 	registerBlockType( name, settings );
 };

packages/block-library/src/video/edit.js

@@ -198,7 +198,6 @@ class VideoEdit extends Component {
 		}
 		const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
 
-		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 		return (
 			<>
 				<BlockControls>
@@ -314,7 +313,6 @@ class VideoEdit extends Component {
 				</figure>
 			</>
 		);
-		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 	}
 }
 

packages/blocks/src/api/test/registration.js

@@ -712,3 +712,5 @@ describe( 'blocks', () => {
 		} );
 	} );
 } );
+
+/* eslint-enable react/forbid-elements */

packages/components/src/color-picker/saturation.js

@@ -150,7 +150,7 @@ export class Saturation extends Component {
 			home: () => this.saturate( -1 ),
 		};
 
-		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/no-noninteractive-element-interactions */
+		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 		return (
 			<KeyboardShortcuts shortcuts={ shortcuts }>
 				<div
@@ -181,7 +181,7 @@ export class Saturation extends Component {
 				</div>
 			</KeyboardShortcuts>
 		);
-		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/no-noninteractive-element-interactions */
+		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
 	}
 }
 

packages/components/src/form-token-field/suggestions-list.js

@@ -91,7 +91,7 @@ class SuggestionsList extends Component {
 							'is-selected': index === this.props.selectedIndex,
 						} );
 
-						/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+						/* eslint-disable jsx-a11y/click-events-have-key-events */
 						return (
 							<li
 								id={ `components-form-token-suggestions-${ this.props.instanceId }-${ index }` }
@@ -117,7 +117,7 @@ class SuggestionsList extends Component {
 								}
 							</li>
 						);
-						/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+						/* eslint-enable jsx-a11y/click-events-have-key-events */
 					} )
 				}
 			</ul>

packages/components/src/higher-order/with-focus-outside/index.native.js

@@ -117,7 +117,6 @@ export default createHigherOrderComponent(
 				// Disable reason: See `normalizeButtonFocus` for browser-specific
 				// focus event normalization.
 
-				/* eslint-disable jsx-a11y/no-static-element-interactions */
 				return (
 					<View
 						onFocus={ this.cancelBlurCheck }
@@ -132,7 +131,6 @@ export default createHigherOrderComponent(
 							{ ...this.props } />
 					</View>
 				);
-				/* eslint-enable jsx-a11y/no-static-element-interactions */
 			}
 		};
 	}, 'withFocusOutside'

packages/components/src/index.js

@@ -1,6 +1,5 @@
 // Components
 export * from './primitives';
-// eslint-disable-next-line camelcase
 export { default as Animate } from './animate';
 export { default as Autocomplete } from './autocomplete';
 export { default as BaseControl } from './base-control';

packages/components/src/modal/index.js

@@ -125,7 +125,6 @@ class Modal extends Component {
 
 		// Disable reason: this stops mouse events from triggering tooltips and
 		// other elements underneath the modal overlay.
-		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		return createPortal(
 			<IsolatedEventContainer
 				className={ classnames( 'components-modal__screen-overlay', overlayClassName ) }
@@ -157,7 +156,6 @@ class Modal extends Component {
 			</IsolatedEventContainer>,
 			this.node
 		);
-		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	}
 }
 

packages/components/src/navigable-container/container.js

@@ -116,8 +116,6 @@ class NavigableContainer extends Component {
 
 	render() {
 		const { children, ...props } = this.props;
-		// Disable reason: Assumed role is applied by parent via props spread.
-		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		return (
 			<div ref={ this.bindContainer }
 				{ ...omit( props, [
@@ -132,7 +130,6 @@ class NavigableContainer extends Component {
 				{ children }
 			</div>
 		);
-		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	}
 }
 

packages/components/src/popover/index.js

@@ -378,7 +378,6 @@ const Popover = ( {
 	// Disable reason: We care to capture the _bubbled_ events from inputs
 	// within popover as inferring close intent.
 
-	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	let content = (
 		<PopoverDetectOutside onFocusOutside={ handleOnFocusOutside }>
 			<Animate
@@ -420,7 +419,6 @@ const Popover = ( {
 			</Animate>
 		</PopoverDetectOutside>
 	);
-	/* eslint-enable jsx-a11y/no-static-element-interactions */
 
 	// Apply focus to element as long as focusOnMount is truthy; false is
 	// the only "disabled" value.

packages/components/src/sandbox/index.js

@@ -48,7 +48,7 @@ class Sandbox extends Component {
 		if ( 'string' === typeof data ) {
 			try {
 				data = JSON.parse( data );
-			} catch ( e ) {} // eslint-disable-line no-empty
+			} catch ( e ) {}
 		}
 
 		// Verify that the mounted element is the source of the message

packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js

@@ -63,6 +63,7 @@ const ShortcutList = ( { shortcuts } ) => (
 			</li>
 		) ) }
 	</ul>
+	/* eslint-enable jsx-a11y/no-redundant-roles */
 );
 
 const ShortcutSection = ( { title, shortcuts, className } ) => (

packages/editor/src/components/post-format/index.js

@@ -36,7 +36,6 @@ function PostFormat( { onUpdatePostFormat, postFormat = 'standard', supportedFor
 
 	// Disable reason: We need to change the value immiediately to show/hide the suggestion if needed
 
-	/* eslint-disable jsx-a11y/no-onchange */
 	return (
 		<PostFormatCheck>
 			<div className="editor-post-format">
@@ -64,7 +63,6 @@ function PostFormat( { onUpdatePostFormat, postFormat = 'standard', supportedFor
 			</div>
 		</PostFormatCheck>
 	);
-	/* eslint-enable jsx-a11y/no-onchange */
 }
 
 export default compose( [

packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -451,7 +451,6 @@ class HierarchicalTermSelector extends Component {
 				</form>
 			),
 		];
-		/* eslint-enable jsx-a11y/no-onchange */
 	}
 }
 

packages/hooks/src/test/index.test.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-console */
-
 /**
  * Internal dependencies
  */

packages/jest-console/src/test/index.test.js

@@ -76,3 +76,5 @@ describe( 'jest-console', () => {
 		}
 	);
 } );
+
+/* eslint-enable no-console */

packages/keycodes/src/platform.native.js

@@ -8,7 +8,6 @@ import { Platform } from 'react-native';
  *
  * @return {boolean}         True if iOS; false otherwise.
  */
-// eslint-disable-next-line no-unused-vars
 export function isAppleOS() {
 	return Platform.OS === 'ios';
 }