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.
This commit is contained in:
Shamim Rezaie
2021-07-01 19:34:27 +10:00
parent 8453fe0ddb
commit e2150f7da0
6 changed files with 22 additions and 11 deletions
+1
View File
@@ -33,6 +33,7 @@ $string['errorpluginnotfound'] = 'The plugin \'{$a}\' cannot be used; it does no
$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';
+4 -3
View File
@@ -140,15 +140,16 @@ class atto_texteditor extends texteditor {
$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'
@@ -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" ' +
File diff suppressed because one or more lines are too long
@@ -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" ' +
+4 -1
View File
@@ -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" ' +