Fix a accessibility issue to allow screenreader to read a label when …

doc/manual.html

@@ -421,6 +421,10 @@ <h2>Configuration</h2>
       simply <code>true</code>), focusing of the editor is also
       disallowed.</dd>
 
+      <dt id="option_screenReaderLabel"><code><strong>screenReaderLabel</strong>: string</code></dt>
+      <dd>This label is read by the screenreaders when CodeMirror text area is focused. This
+      is helpful for accessibility.</dd>
+
       <dt id="option_showCursorWhenSelecting"><code><strong>showCursorWhenSelecting</strong>: boolean</code></dt>
       <dd>Whether the cursor should be drawn when a selection is
       active. Defaults to false.</dd>

src/edit/options.js

@@ -132,6 +132,12 @@ export function defineOptions(CodeMirror) {
     }
     cm.display.input.readOnlyChanged(val)
   })
+
+  option("screenReaderLabel", null, (cm, val) => {
+    val = (val === '') ? null : val
+    cm.display.input.screenReaderLabelChanged(val)
+  })
+
   option("disableInput", false, (cm, val) => {if (!val) cm.display.input.reset()}, true)
   option("dragDrop", true, dragDropChanged)
   option("allowDropFileTypes", null)

src/input/ContentEditableInput.js

@@ -99,6 +99,15 @@ export default class ContentEditableInput {
     on(div, "cut", onCopyCut)
   }
 
+  screenReaderLabelChanged(label) {
+    // Label for screenreaders, accessibility
+    if(label) {
+      this.div.setAttribute('aria-label', label)
+    } else {
+      this.div.removeAttribute('aria-label')
+    }
+  }
+
   prepareSelection() {
     let result = prepareSelection(this.cm, false)
     result.focus = document.activeElement == this.div

src/input/TextareaInput.js

@@ -112,12 +112,21 @@ export default class TextareaInput {
 
   createField(_display) {
     // Wraps and hides input textarea
-    this.wrapper = hiddenTextarea()
+    this.wrapper = hiddenTextarea(this.cm.options.screenReaderLabel)
     // The semihidden textarea that is focused when the editor is
     // focused, and receives input.
     this.textarea = this.wrapper.firstChild
   }
 
+  screenReaderLabelChanged(label) {
+    // Label for screenreaders, accessibility
+    if(label) {
+      this.textarea.setAttribute('aria-label', label)
+    } else {
+      this.textarea.removeAttribute('aria-label')
+    }
+  }
+
   prepareSelection() {
     // Redraw the selection and/or cursor
     let cm = this.cm, display = cm.display, doc = cm.doc

src/input/input.js

@@ -132,4 +132,4 @@ export function hiddenTextarea() {
   if (ios) te.style.border = "1px solid black"
   disableBrowserMagic(te)
   return div
-}
+}