[lexical-react] Bug Fix: aria-prohibited-attr violation on LexicalContentEditableElement (#7647)

package-lock.json

@@ -11567,6 +11567,27 @@
         "pretty-format": "^29.0.0"
       }
     },
+    "node_modules/@types/jest-axe": {
+      "version": "3.5.9",
+      "resolved": "https://registry.npmjs.org/@types/jest-axe/-/jest-axe-3.5.9.tgz",
+      "integrity": "sha512-z98CzR0yVDalCEuhGXXO4/zN4HHuSebAukXDjTLJyjEAgoUf1H1i+sr7SUB/mz8CRS/03/XChsx0dcLjHkndoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/jest": "*",
+        "axe-core": "^3.5.5"
+      }
+    },
+    "node_modules/@types/jest-axe/node_modules/axe-core": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.6.tgz",
+      "integrity": "sha512-LEUDjgmdJoA3LqklSTwKYqkjcZ4HKc4ddIYGSAiSkr46NTjzg2L9RNB+lekO9P7Dlpa87+hBtzc2Fzn/+GUWMQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@types/jsdom": {
       "version": "21.1.6",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz",
@@ -24097,6 +24118,124 @@
         }
       }
     },
+    "node_modules/jest-axe": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/jest-axe/-/jest-axe-10.0.0.tgz",
+      "integrity": "sha512-9QR0M7//o5UVRnEUUm68IsGapHrcKGakYy9dKWWMX79LmeUKguDI6DREyljC5I13j78OUmtKLF5My6ccffLFBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "axe-core": "4.10.2",
+        "chalk": "4.1.2",
+        "jest-matcher-utils": "29.2.2",
+        "lodash.merge": "4.6.2"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      }
+    },
+    "node_modules/jest-axe/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-axe/node_modules/axe-core": {
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz",
+      "integrity": "sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/jest-axe/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-axe/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-axe/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jest-axe/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-axe/node_modules/jest-matcher-utils": {
+      "version": "29.2.2",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.2.2.tgz",
+      "integrity": "sha512-4DkJ1sDPT+UX2MR7Y3od6KtvRi9Im1ZGLGgdLFLm4lPexbTaCgJW5NN3IOXlQHF7NSHY/VHhflQ+WoKtD/vyCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^29.2.1",
+        "jest-get-type": "^29.2.0",
+        "pretty-format": "^29.2.1"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-axe/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/jest-changed-files": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.7.0.tgz",
@@ -41863,6 +42002,10 @@
         "lexical": "0.32.1",
         "react-error-boundary": "^3.1.4"
       },
+      "devDependencies": {
+        "@types/jest-axe": "^3.5.9",
+        "jest-axe": "^10.0.0"
+      },
       "peerDependencies": {
         "react": ">=17.x",
         "react-dom": ">=17.x"
@@ -47431,6 +47574,8 @@
         "@lexical/text": "0.32.1",
         "@lexical/utils": "0.32.1",
         "@lexical/yjs": "0.32.1",
+        "@types/jest-axe": "^3.5.9",
+        "jest-axe": "^10.0.0",
         "lexical": "0.32.1",
         "react-error-boundary": "^3.1.4"
       }
@@ -49589,6 +49734,24 @@
         "pretty-format": "^29.0.0"
       }
     },
+    "@types/jest-axe": {
+      "version": "3.5.9",
+      "resolved": "https://registry.npmjs.org/@types/jest-axe/-/jest-axe-3.5.9.tgz",
+      "integrity": "sha512-z98CzR0yVDalCEuhGXXO4/zN4HHuSebAukXDjTLJyjEAgoUf1H1i+sr7SUB/mz8CRS/03/XChsx0dcLjHkndoQ==",
+      "dev": true,
+      "requires": {
+        "@types/jest": "*",
+        "axe-core": "^3.5.5"
+      },
+      "dependencies": {
+        "axe-core": {
+          "version": "3.5.6",
+          "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.6.tgz",
+          "integrity": "sha512-LEUDjgmdJoA3LqklSTwKYqkjcZ4HKc4ddIYGSAiSkr46NTjzg2L9RNB+lekO9P7Dlpa87+hBtzc2Fzn/+GUWMQ==",
+          "dev": true
+        }
+      }
+    },
     "@types/jsdom": {
       "version": "21.1.6",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz",
@@ -58271,6 +58434,87 @@
         "jest-cli": "^29.7.0"
       }
     },
+    "jest-axe": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/jest-axe/-/jest-axe-10.0.0.tgz",
+      "integrity": "sha512-9QR0M7//o5UVRnEUUm68IsGapHrcKGakYy9dKWWMX79LmeUKguDI6DREyljC5I13j78OUmtKLF5My6ccffLFBg==",
+      "dev": true,
+      "requires": {
+        "axe-core": "4.10.2",
+        "chalk": "4.1.2",
+        "jest-matcher-utils": "29.2.2",
+        "lodash.merge": "4.6.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "axe-core": {
+          "version": "4.10.2",
+          "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz",
+          "integrity": "sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jest-matcher-utils": {
+          "version": "29.2.2",
+          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.2.2.tgz",
+          "integrity": "sha512-4DkJ1sDPT+UX2MR7Y3od6KtvRi9Im1ZGLGgdLFLm4lPexbTaCgJW5NN3IOXlQHF7NSHY/VHhflQ+WoKtD/vyCw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^4.0.0",
+            "jest-diff": "^29.2.1",
+            "jest-get-type": "^29.2.0",
+            "pretty-format": "^29.2.1"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "jest-changed-files": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.7.0.tgz",

packages/lexical-react/package.json

@@ -1330,5 +1330,9 @@
       }
     }
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "devDependencies": {
+    "@types/jest-axe": "^3.5.9",
+    "jest-axe": "^10.0.0"
+  }
 }

packages/lexical-react/src/__tests__/unit/LexicalContentEditableElement.test.tsx

@@ -7,6 +7,7 @@
  */
 
 import {ContentEditableElement} from '@lexical/react/LexicalContentEditable';
+import {axe, toHaveNoViolations} from 'jest-axe';
 import {createEditor, LexicalEditor} from 'lexical';
 import {createRoot, Root} from 'react-dom/client';
 import * as ReactTestUtils from 'shared/react-test-utils';
@@ -224,4 +225,39 @@ describe('ContentEditableElement tests', () => {
       expect(element.getAttribute('spellcheck')).toBe(spellCheck.toString());
     }
   });
+
+  it('should have no accessibility violations', async () => {
+    expect.extend(toHaveNoViolations);
+
+    await ReactTestUtils.act(async () => {
+      reactRoot.render(
+        <ContentEditableElement
+          editor={editor}
+          role="textbox"
+          ariaLabel="Text editor"
+        />,
+      );
+    });
+
+    const results = await axe(container!);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations when not editable', async () => {
+    expect.extend(toHaveNoViolations);
+    editor.setEditable(false);
+
+    await ReactTestUtils.act(async () => {
+      reactRoot.render(
+        <ContentEditableElement
+          editor={editor}
+          role="textbox"
+          ariaLabel="Text editor"
+        />,
+      );
+    });
+
+    const results = await axe(container!);
+    expect(results).toHaveNoViolations();
+  });
 });

packages/lexical-react/src/__tests__/unit/LexicalNestedComposer.test.tsx

@@ -13,6 +13,7 @@ import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {LexicalNestedComposer} from '@lexical/react/LexicalNestedComposer';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {mergeRegister} from '@lexical/utils';
+import {axe, toHaveNoViolations} from 'jest-axe';
 import {
   $applyNodeReplacement,
   $createParagraphNode,
@@ -38,6 +39,7 @@ import {useEffect} from 'react';
 import {createRoot, Root} from 'react-dom/client';
 import * as ReactTestUtils from 'shared/react-test-utils';
 
+expect.extend(toHaveNoViolations);
 class ReactDecoratorNode extends DecoratorNode<React.ReactNode> {
   __decorate?: (node: this) => React.ReactNode;
   __inline?: boolean;
@@ -525,7 +527,9 @@ describe('LexicalNestedComposer', () => {
                       return nestedEditor ? (
                         <LexicalNestedComposer initialEditor={nestedEditor}>
                           <RichTextPlugin
-                            contentEditable={<ContentEditable />}
+                            contentEditable={
+                              <ContentEditable aria-label="nested" />
+                            }
                             placeholder={<></>}
                             ErrorBoundary={LexicalErrorBoundary}
                           />
@@ -541,7 +545,7 @@ describe('LexicalNestedComposer', () => {
             },
           }}>
           <RichTextPlugin
-            contentEditable={<ContentEditable />}
+            contentEditable={<ContentEditable aria-label="parent" />}
             placeholder={<></>}
             ErrorBoundary={LexicalErrorBoundary}
           />
@@ -573,6 +577,7 @@ describe('LexicalNestedComposer', () => {
           role="textbox"
           spellcheck="true"
           style="user-select: text; white-space: pre-wrap; word-break: break-word"
+          aria-label="parent"
           data-lexical-editor="true">
           <p dir="ltr"><span data-lexical-text="true">parent</span></p>
           <div data-lexical-decorator="true">
@@ -581,6 +586,7 @@ describe('LexicalNestedComposer', () => {
               role="textbox"
               spellcheck="true"
               style="user-select: text; white-space: pre-wrap; word-break: break-word"
+              aria-label="nested"
               data-lexical-editor="true">
               <p dir="ltr"><span data-lexical-text="true">nested</span></p>
             </div>
@@ -588,6 +594,8 @@ describe('LexicalNestedComposer', () => {
         </div>
       `,
     );
+    const editableA11yResults = await axe(container!);
+    expect(editableA11yResults).toHaveNoViolations();
     expect(warn.mock.calls).toEqual([]);
     await ReactTestUtils.act(async () => {
       editor!.setEditable(false);
@@ -599,18 +607,22 @@ describe('LexicalNestedComposer', () => {
       html`
         <div
           contenteditable="false"
+          role="textbox"
           spellcheck="true"
           style="user-select: text; white-space: pre-wrap; word-break: break-word"
           aria-autocomplete="none"
+          aria-label="parent"
           aria-readonly="true"
           data-lexical-editor="true">
           <p dir="ltr"><span data-lexical-text="true">parent</span></p>
           <div data-lexical-decorator="true">
             <div
               contenteditable="false"
+              role="textbox"
               spellcheck="true"
               style="user-select: text; white-space: pre-wrap; word-break: break-word"
               aria-autocomplete="none"
+              aria-label="nested"
               aria-readonly="true"
               data-lexical-editor="true">
               <p dir="ltr"><span data-lexical-text="true">nested</span></p>
@@ -619,6 +631,8 @@ describe('LexicalNestedComposer', () => {
         </div>
       `,
     );
+    const uneditableA11yResults = await axe(container!);
+    expect(uneditableA11yResults).toHaveNoViolations();
     await ReactTestUtils.act(async () => {
       editor!.setEditable(true);
     });
@@ -664,7 +678,9 @@ describe('LexicalNestedComposer', () => {
                           initialEditor={nestedEditor}
                           skipEditableListener={true}>
                           <RichTextPlugin
-                            contentEditable={<ContentEditable />}
+                            contentEditable={
+                              <ContentEditable aria-label="nested" />
+                            }
                             placeholder={<></>}
                             ErrorBoundary={LexicalErrorBoundary}
                           />
@@ -680,7 +696,7 @@ describe('LexicalNestedComposer', () => {
             },
           }}>
           <RichTextPlugin
-            contentEditable={<ContentEditable />}
+            contentEditable={<ContentEditable aria-label="parent" />}
             placeholder={<></>}
             ErrorBoundary={LexicalErrorBoundary}
           />
@@ -712,14 +728,17 @@ describe('LexicalNestedComposer', () => {
           role="textbox"
           spellcheck="true"
           style="user-select: text; white-space: pre-wrap; word-break: break-word"
+          aria-label="parent"
           data-lexical-editor="true">
           <p dir="ltr"><span data-lexical-text="true">parent</span></p>
           <div data-lexical-decorator="true">
             <div
               contenteditable="false"
+              role="textbox"
               spellcheck="true"
               style="user-select: text; white-space: pre-wrap; word-break: break-word"
               aria-autocomplete="none"
+              aria-label="nested"
               aria-readonly="true"
               data-lexical-editor="true">
               <p dir="ltr"><span data-lexical-text="true">nested</span></p>
@@ -728,6 +747,8 @@ describe('LexicalNestedComposer', () => {
         </div>
       `,
     );
+    const editableA11yResults = await axe(container!);
+    expect(editableA11yResults).toHaveNoViolations();
     expect(warn.mock.calls).toEqual([]);
     await ReactTestUtils.act(async () => {
       editor!.setEditable(false);
@@ -739,18 +760,22 @@ describe('LexicalNestedComposer', () => {
       html`
         <div
           contenteditable="false"
+          role="textbox"
           spellcheck="true"
           style="user-select: text; white-space: pre-wrap; word-break: break-word"
           aria-autocomplete="none"
+          aria-label="parent"
           aria-readonly="true"
           data-lexical-editor="true">
           <p dir="ltr"><span data-lexical-text="true">parent</span></p>
           <div data-lexical-decorator="true">
             <div
               contenteditable="false"
+              role="textbox"
               spellcheck="true"
               style="user-select: text; white-space: pre-wrap; word-break: break-word"
               aria-autocomplete="none"
+              aria-label="nested"
               aria-readonly="true"
               data-lexical-editor="true">
               <p dir="ltr"><span data-lexical-text="true">nested</span></p>
@@ -759,6 +784,8 @@ describe('LexicalNestedComposer', () => {
         </div>
       `,
     );
+    const uneditableA11yResults = await axe(container!);
+    expect(uneditableA11yResults).toHaveNoViolations();
     await ReactTestUtils.act(async () => {
       editor!.setEditable(true);
     });

packages/lexical-react/src/shared/LexicalContentEditableElement.tsx

@@ -114,7 +114,7 @@ function ContentEditableElementImpl(
       data-testid={testid}
       id={id}
       ref={mergedRefs}
-      role={isEditable ? role : undefined}
+      role={role}
       spellCheck={spellCheck}
       style={style}
       tabIndex={tabIndex}