MDL-72078 editor_atto: Use role=application and aria-describedby in Atto

According to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role WYSIWYG web editors are proper use of the application role.
moodle · Jul 19, 2021 · e2150f7 · e2150f7
1 parent 8453fe0
commit e2150f7
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 11 deletions.
diff --git a/lib/editor/atto/lang/en/editor_atto.php b/lib/editor/atto/lang/en/editor_atto.php
@@ -33,6 +33,7 @@
 $string['errorpluginisusedtwice'] = 'The plugin \'{$a}\' is used twice; plugins can only be defined once.';
 $string['errortextrecovery'] = 'Unfortunately the draft version could not be restored.';
 $string['pluginname'] = 'Atto HTML editor';
+$string['richtexteditor'] = 'Rich text editor';
 $string['subplugintype_atto'] = 'Atto plugin';
 $string['subplugintype_atto_plural'] = 'Atto plugins';
 $string['settings'] = 'Atto toolbar settings';

diff --git a/lib/editor/atto/lib.php b/lib/editor/atto/lib.php
@@ -140,15 +140,16 @@ public function use_editor($elementid, array $options=null, $fpoptions=null) {
             $jsplugins[] = array('group'=>$group, 'plugins'=>$groupplugins);
         }
 
-        $PAGE->requires->strings_for_js(array(
+        $PAGE->requires->strings_for_js([
                 'editor_command_keycode',
                 'editor_control_keycode',
                 'plugin_title_shortcut',
                 'textrecovered',
                 'autosavefailed',
                 'autosavesucceeded',
-                'errortextrecovery'
-            ), 'editor_atto');
+                'errortextrecovery',
+                'richtexteditor',
+            ], 'editor_atto');
         $PAGE->requires->strings_for_js(array(
                 'warning',
                 'info'

diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js
@@ -184,7 +184,10 @@ Y.extend(Editor, Y.Base, {
 
         this._eventHandles = [];
 
-        this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
+        var description = Y.Node.create('<div class="sr-only">' + M.util.get_string('richtexteditor', 'editor_atto') + '</div>');
+        this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" role="application" />');
+        this._wrapper.appendChild(description);
+        this._wrapper.setAttribute('aria-describedby', description.generateID());
         template = Y.Handlebars.compile('<div id="{{elementid}}editable" ' +
                 'contenteditable="true" ' +
                 'role="textbox" ' +

diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js
diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js
@@ -182,7 +182,10 @@ Y.extend(Editor, Y.Base, {
 
         this._eventHandles = [];
 
-        this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
+        var description = Y.Node.create('<div class="sr-only">' + M.util.get_string('richtexteditor', 'editor_atto') + '</div>');
+        this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" role="application" />');
+        this._wrapper.appendChild(description);
+        this._wrapper.setAttribute('aria-describedby', description.generateID());
         template = Y.Handlebars.compile('<div id="{{elementid}}editable" ' +
                 'contenteditable="true" ' +
                 'role="textbox" ' +

diff --git a/lib/editor/atto/yui/src/editor/js/editor.js b/lib/editor/atto/yui/src/editor/js/editor.js
@@ -182,7 +182,10 @@ Y.extend(Editor, Y.Base, {
 
         this._eventHandles = [];
 
-        this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
+        var description = Y.Node.create('<div class="sr-only">' + M.util.get_string('richtexteditor', 'editor_atto') + '</div>');
+        this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" role="application" />');
+        this._wrapper.appendChild(description);
+        this._wrapper.setAttribute('aria-describedby', description.generateID());
         template = Y.Handlebars.compile('<div id="{{elementid}}editable" ' +
                 'contenteditable="true" ' +
                 'role="textbox" ' +