Switch to contenteditable inputStyle, for a11y

CHANGELOG.md

@@ -17,7 +17,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 <!-- ### Fixed -->
 <!-- ### Removed -->
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Changed
+
+- The editor now uses the CodeMirror `contenteditable` input style, which has
+  much better screen reader support.
 
 ## [0.8.0] - 2021-04-02
 

src/playground-code-editor.ts

@@ -273,6 +273,7 @@ export class PlaygroundCodeEditor extends LitElement {
         lineNumbers: this.lineNumbers,
         mode: this._getLanguageMode(),
         readOnly: this.readonly,
+        inputStyle: 'contenteditable',
       }
     );
     cm.on('change', () => {

src/test/playground-ide_test.ts

@@ -217,4 +217,26 @@ suite('playground-ide', () => {
     };
     await assertPreviewContains('Hello HTML');
   });
+
+  test('a11y: is contenteditable', async () => {
+    const ide = document.createElement('playground-ide')!;
+    ide.config = {
+      files: {
+        'index.html': {
+          content: 'Foo\nBar',
+        },
+      },
+    };
+    container.appendChild(ide);
+    await assertPreviewContains('Foo');
+
+    const cmCode = await pierce(
+      'playground-ide',
+      'playground-file-editor',
+      'playground-code-editor',
+      '.CodeMirror-code'
+    );
+
+    assert.equal(cmCode.getAttribute('contenteditable'), 'true');
+  });
 });