From 6d38fc2148e9f97ffbb55c78629dcecd9902ac29 Mon Sep 17 00:00:00 2001
From: Aditya Toshniwal <aditya.toshniwal14@gmail.com>
Date: Tue, 31 Mar 2020 17:25:45 +0530
Subject: [PATCH] Add a screenReaderLabel option to set an aria-label on the
 editor

---
 doc/manual.html                   |  4 ++++
 src/edit/options.js               |  6 ++++++
 src/input/ContentEditableInput.js |  9 +++++++++
 src/input/TextareaInput.js        | 11 ++++++++++-
 src/input/input.js                |  2 +-
 5 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/doc/manual.html b/doc/manual.html
index 49c9290b30..ed5bff03cd 100644
--- a/doc/manual.html
+++ b/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>
diff --git a/src/edit/options.js b/src/edit/options.js
index 3abd3c3c1e..225f5499c5 100644
--- a/src/edit/options.js
+++ b/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)
diff --git a/src/input/ContentEditableInput.js b/src/input/ContentEditableInput.js
index a79d3fc88b..bff285166c 100644
--- a/src/input/ContentEditableInput.js
+++ b/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
diff --git a/src/input/TextareaInput.js b/src/input/TextareaInput.js
index ab02230f92..e538107cd9 100644
--- a/src/input/TextareaInput.js
+++ b/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
diff --git a/src/input/input.js b/src/input/input.js
index 26bba1d26f..8519ecfb7c 100644
--- a/src/input/input.js
+++ b/src/input/input.js
@@ -132,4 +132,4 @@ export function hiddenTextarea() {
   if (ios) te.style.border = "1px solid black"
   disableBrowserMagic(te)
   return div
-}
+}
\ No newline at end of file