[Fix] no-noninteractive-element-interactions: Ignore contenteditable elements in no-noninteractive-element-interactions

Author: JoshuaKGoldberg

__mocks__/JSXAttributeMock.js

@@ -24,6 +24,8 @@ export default function JSXAttributeMock(prop: string, value: mixed, isExpressio
   let attributeValue = astValue;
   if (isExpressionContainer || astValue.type !== 'Literal') {
     attributeValue = JSXExpressionContainerMock(astValue);
+  } else if (attributeValue.type === 'Literal' && !('raw' in (attributeValue: any))) {
+    (attributeValue: any).raw = JSON.stringify((attributeValue: any).value);
   }
 
   return {

__tests__/src/rules/no-noninteractive-element-interactions-test.js

@@ -337,6 +337,9 @@ const neverValid = [
   { code: '<time onClick={() => {}} />;', errors: [expectedError] },
   { code: '<ol onClick={() => {}} />;', errors: [expectedError] },
   { code: '<ul onClick={() => {}} />;', errors: [expectedError] },
+  { code: '<ul contentEditable="false" onClick={() => {}} />;', errors: [expectedError] },
+  { code: '<article contentEditable onClick={() => {}} />;', errors: [expectedError] },
+  { code: '<div contentEditable role="article" onKeyDown={() => {}} />;', errors: [expectedError] },
   /* HTML elements attributed with a non-interactive role */
   { code: '<div role="alert" onClick={() => {}} />;', errors: [expectedError] },
   { code: '<div role="alertdialog" onClick={() => {}} />;', errors: [expectedError] },

__tests__/src/util/isContentEditable-test.js

@@ -0,0 +1,51 @@
+import expect from 'expect';
+import isContentEditable from '../../../src/util/isContentEditable';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+describe('isContentEditable', () => {
+  describe('HTML5', () => {
+    describe('content editable', () => {
+      it('should identify HTML5 contentEditable elements', () => {
+        const attributes = [
+          JSXAttributeMock('contentEditable', 'true'),
+        ];
+        expect(isContentEditable('some tag', attributes))
+          .toBe(true);
+      });
+    });
+
+    describe('not content editable', () => {
+      it('should not identify HTML5 content editable elements with null as the value', () => {
+        const attributes = [
+          JSXAttributeMock('contentEditable', null),
+        ];
+        expect(isContentEditable('some tag', attributes))
+          .toBe(false);
+      });
+
+      it('should not identify HTML5 content editable elements with undefined as the value', () => {
+        const attributes = [
+          JSXAttributeMock('contentEditable', undefined),
+        ];
+        expect(isContentEditable('some tag', attributes))
+          .toBe(false);
+      });
+
+      it('should not identify HTML5 content editable elements with true as the value', () => {
+        const attributes = [
+          JSXAttributeMock('contentEditable', true),
+        ];
+        expect(isContentEditable('some tag', attributes))
+          .toBe(false);
+      });
+
+      it('should not identify HTML5 content editable elements with "false" as the value', () => {
+        const attributes = [
+          JSXAttributeMock('contentEditable', 'false'),
+        ];
+        expect(isContentEditable('some tag', attributes))
+          .toBe(false);
+      });
+    });
+  });
+});

src/rules/no-noninteractive-element-interactions.js

@@ -22,6 +22,7 @@ import type { ESLintConfig, ESLintContext, ESLintVisitorSelectorConfig } from '.
 import { arraySchema, generateObjSchema } from '../util/schemas';
 import getElementType from '../util/getElementType';
 import isAbstractRole from '../util/isAbstractRole';
+import isContentEditable from '../util/isContentEditable';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
 import isInteractiveRole from '../util/isInteractiveRole';
@@ -78,6 +79,7 @@ export default ({
         }
         if (
           !hasInteractiveProps
+          || isContentEditable(type, attributes)
           || isHiddenFromScreenReader(type, attributes)
           || isPresentationRole(type, attributes)
         ) {

src/util/isContentEditable.js

@@ -0,0 +1,7 @@
+import { getProp } from 'jsx-ast-utils';
+
+export default function isContentEditable(tagName, attributes) {
+  const prop = getProp(attributes, 'contentEditable');
+
+  return prop?.value?.raw === '"true"';
+}