Updates to correct a11y issues with CodeMirror

TNL-5281

cms/static/js/views/settings/main.js

@@ -337,7 +337,7 @@ define(['js/views/validation', 'codemirror', 'underscore', 'jquery', 'jquery.ui'
                },
                codeMirrors: {},
                codeMirrorize: function(e, forcedTarget) {
-                   var thisTarget;
+                   var thisTarget, cachethis, field, cmTextArea;
                    if (forcedTarget) {
                        thisTarget = forcedTarget;
                        thisTarget.id = $(thisTarget).attr('id');
@@ -354,8 +354,8 @@ define(['js/views/validation', 'codemirror', 'underscore', 'jquery', 'jquery.ui'
                    }
 
                    if (!this.codeMirrors[thisTarget.id]) {
-                       var cachethis = this;
-                       var field = this.selectorToField[thisTarget.id];
+                       cachethis = this;
+                       field = this.selectorToField[thisTarget.id];
                        this.codeMirrors[thisTarget.id] = CodeMirror.fromTextArea(thisTarget, {
                            mode: 'text/html', lineNumbers: true, lineWrapping: true});
                        this.codeMirrors[thisTarget.id].on('change', function(mirror) {
@@ -366,6 +366,8 @@ define(['js/views/validation', 'codemirror', 'underscore', 'jquery', 'jquery.ui'
                                cachethis.setAndValidate(field, newVal);
                            }
                        });
+                       cmTextArea = this.codeMirrors[thisTarget.id].getInputField();
+                       cmTextArea.setAttribute('id', 'course-overview-cm-textarea');
                    }
                },
 

cms/templates/settings.html

@@ -333,6 +333,9 @@ CMS.URL.UPLOAD_ASSET = '${upload_asset_url | n, js_escaped_string}'
                 <li class="field text" id="field-course-overview">
                   <label for="course-overview">${_("Course Overview")}</label>
                   <textarea class="tinymce text-editor" id="course-overview"></textarea>
+                  <label class="sr" for="course-overview-cm-textarea">
+                    ${_('HTML Code Editor')}
+                  </label>
                   <span class="tip tip-stacked">${
                     Text(_("Introductions, prerequisites, FAQs that are used on {a_link_start}your course summary page{a_link_end} (formatted in HTML)")).format(
                       a_link_start=HTML("<a class='link-courseURL' rel='external' href='{lms_link_for_about_page}'>").format(lms_link_for_about_page=lms_link_for_about_page),

common/lib/capa/capa/templates/codeinput.html

@@ -5,7 +5,9 @@ from openedx.core.djangolib.markup import HTML
 %>
 <div id="textbox_${id}" class="capa_inputtype textbox cminput">
   % if response_data['label']:
-      <label class="problem-group-label" for="cm-textarea-${id}">${response_data['label']}</label>
+    <label class="problem-group-label" for="cm-textarea-${id}">${response_data['label']}</label>
+  % else:
+    <label class="sr problem-group-label" for="cm-textarea-${id}">${_('Code Editor')}</label>
   % endif
   <textarea rows="${rows}" cols="${cols}" name="input_${id}"
             aria-label="${aria_label}"

common/test/acceptance/tests/studio/test_studio_settings.py

@@ -502,15 +502,6 @@ class StudioSettingsA11yTest(StudioCourseTest):
             ],
         })
 
-        # TODO: Figure out how to get CodeMirror to pass accessibility testing
-        # We use the CodeMirror Javascript library to
-        # add code editing to a number of textarea elements
-        # on this page. CodeMirror generates markup that does
-        # not pass our accessibility testing rules.
-        self.settings_page.a11y_audit.config.set_scope(
-            exclude=['.CodeMirror textarea']  # TODO: TNL-5831
-        )
-
         self.settings_page.a11y_audit.check_for_accessibility_errors()