Move accessibility attributes to contentDOM (#1334)

cyanzhong · web-flow · commit b846a2af9b13 · 2026-04-06T08:41:47.000+08:00
diff --git a/CoreEditor/index.html b/CoreEditor/index.html
@@ -33,7 +33,7 @@
   </script>
 </head>
 <body>
-  <div id="editor" role="textbox" aria-multiline="true"></div>
+  <div id="editor"></div>
   <script type=module src="./index.ts"></script>
 </body>
 </html>
diff --git a/CoreEditor/src/extensions.ts b/CoreEditor/src/extensions.ts
@@ -160,6 +160,12 @@ export function extensions(options: { lineBreak?: string }) {
     wordTokenizer(),
     interceptInputs(),
     observeChanges(),
+
+    // Accessibility
+    EditorView.contentAttributes.of({
+      'role': 'textbox',
+      'aria-multiline': 'true',
+    }),
   ];
 }
 
diff --git a/CoreEditor/test/accessibility.test.ts b/CoreEditor/test/accessibility.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, test } from '@jest/globals';
+import { EditorView } from '@codemirror/view';
+import * as editor from './utils/editor';
+
+describe('Accessibility test suite', () => {
+  test('test contentDOM has role textbox', () => {
+    editor.setUp('', EditorView.contentAttributes.of({
+      'role': 'textbox',
+      'aria-multiline': 'true',
+    }));
+
+    const contentDOM = window.editor.contentDOM;
+    expect(contentDOM.getAttribute('role')).toBe('textbox');
+  });
+
+  test('test contentDOM has aria-multiline', () => {
+    editor.setUp('', EditorView.contentAttributes.of({
+      'role': 'textbox',
+      'aria-multiline': 'true',
+    }));
+
+    const contentDOM = window.editor.contentDOM;
+    expect(contentDOM.getAttribute('aria-multiline')).toBe('true');
+  });
+
+  test('test contentDOM is contenteditable', () => {
+    editor.setUp('');
+
+    const contentDOM = window.editor.contentDOM;
+    expect(contentDOM.getAttribute('contenteditable')).toBe('true');
+  });
+});
