From 9aa878bc39769f6c7b31c72bd1140c1370d202f1 Mon Sep 17 00:00:00 2001
From: Josh Goldberg <git@joshuakgoldberg.com>
Date: Mon, 9 Jan 2023 10:03:29 -0500
Subject: [PATCH] [Fix] `no-noninteractive-element-interactions`: Ignore
 contenteditable elements in no-noninteractive-element-interactions

---
 __mocks__/JSXAttributeMock.js                 |  2 +
 ...oninteractive-element-interactions-test.js |  3 ++
 __tests__/src/util/isContentEditable-test.js  | 51 +++++++++++++++++++
 .../no-noninteractive-element-interactions.js |  2 +
 src/util/isContentEditable.js                 |  7 +++
 5 files changed, 65 insertions(+)
 create mode 100644 __tests__/src/util/isContentEditable-test.js
 create mode 100644 src/util/isContentEditable.js

diff --git a/__mocks__/JSXAttributeMock.js b/__mocks__/JSXAttributeMock.js
index b9410e7e1..f5638cee1 100644
--- a/__mocks__/JSXAttributeMock.js
+++ b/__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 {
diff --git a/__tests__/src/rules/no-noninteractive-element-interactions-test.js b/__tests__/src/rules/no-noninteractive-element-interactions-test.js
index dc3f6784d..ba0206b83 100644
--- a/__tests__/src/rules/no-noninteractive-element-interactions-test.js
+++ b/__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] },
diff --git a/__tests__/src/util/isContentEditable-test.js b/__tests__/src/util/isContentEditable-test.js
new file mode 100644
index 000000000..f738d5ed7
--- /dev/null
+++ b/__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);
+      });
+    });
+  });
+});
diff --git a/src/rules/no-noninteractive-element-interactions.js b/src/rules/no-noninteractive-element-interactions.js
index 9fe8f8e63..ee4b874a0 100644
--- a/src/rules/no-noninteractive-element-interactions.js
+++ b/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)
         ) {
diff --git a/src/util/isContentEditable.js b/src/util/isContentEditable.js
new file mode 100644
index 000000000..998e1670a
--- /dev/null
+++ b/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"';
+}