From e2150f7da04dd3ee06c2e3c3b8ae0f780e7bd790 Mon Sep 17 00:00:00 2001 From: Shamim Rezaie Date: Thu, 1 Jul 2021 19:34:27 +1000 Subject: [PATCH] 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. --- lib/editor/atto/lang/en/editor_atto.php | 1 + lib/editor/atto/lib.php | 7 ++++--- .../moodle-editor_atto-editor-debug.js | 5 ++++- .../moodle-editor_atto-editor-min.js | 10 +++++----- .../moodle-editor_atto-editor.js | 5 ++++- lib/editor/atto/yui/src/editor/js/editor.js | 5 ++++- 6 files changed, 22 insertions(+), 11 deletions(-) diff --git a/lib/editor/atto/lang/en/editor_atto.php b/lib/editor/atto/lang/en/editor_atto.php index b01fda6b041..48faa79a18d 100644 --- a/lib/editor/atto/lang/en/editor_atto.php +++ b/lib/editor/atto/lang/en/editor_atto.php @@ -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'; diff --git a/lib/editor/atto/lib.php b/lib/editor/atto/lib.php index bcd5c38eaf2..ab29f7319c1 100644 --- a/lib/editor/atto/lib.php +++ b/lib/editor/atto/lib.php @@ -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' 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 index 0a6356e8ca8..a854730b4cc 100644 --- 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('
'); + var description = Y.Node.create('
' + M.util.get_string('richtexteditor', 'editor_atto') + '
'); + this._wrapper = Y.Node.create('
'); + this._wrapper.appendChild(description); + this._wrapper.setAttribute('aria-describedby', description.generateID()); template = Y.Handlebars.compile('
'),t=u.Handlebars.compile('
'),this.editor=u.Node.create(t({elementid:this.get("elementid"),CSS:a})),this.textareaLabel=u.one('[for="'+this.get("elementid")+'"]'),this.textareaLabel&&(this.textareaLabel.generateID(),this.editor.setAttribute("aria-labelledby",this.textareaLabel.get("id"))),this.coreDirection=u.one("body").hasClass("dir-rtl")?"rtl":"ltr",this.setupToolbar(),(i=u.Node.create('
')).appendChild(this.editor),this._wrapper.appendChild(i),this.editor.setStyle("minHeight",20*this.textarea.getAttribute("rows")+8+"px"),0===u.UA.ie&&this.editor.setStyle("height",20*this.textarea.getAttribute("rows")+8+"px"),this.disableCssStyling(),document.queryCommandSupported("DefaultParagraphSeparator")&&document.execCommand("DefaultParagraphSeparator",!1,"p"),this.textarea.get("parentNode").insert(this._wrapper,this.textarea).setAttribute("class","editor_atto_wrap"),this.textarea.hide(),u.mix(u.Node.DOM_EVENTS,{"form:editorUpdated":!0}),this.textarea.on("form:editorUpdated",function(){this.updateEditorState()},this),this.updateFromTextArea(),this.publishEvents(),this.setupSelectionWatchers(),this.setupAutomaticPolling(),this.setupPlugins(),this.setupAutosave(),this.setupNotifications())},focus:function(){return this.editor.focus(),this},publishEvents:function(){return this.publish("change",{broadcast:!0,preventable:!0}),this.publish("pluginsloaded",{fireOnce:!0}),this.publish("atto:selectionchanged",{prefix:"atto"}),this},setupAutomaticPolling:function(){return this._registerEventHandle(this.editor.on(["keyup","cut"],this.updateOriginal,this)),this._registerEventHandle(this.editor.on("paste",this.pasteCleanup,this)),this._registerEventHandle(this.editor.on("drop",this.updateOriginalDelayed,this)),this},updateOriginalDelayed:function(){return u.soon(u.bind(this.updateOriginal,this)),this},setupPlugins:function(){var t,e,i,n,s,a;for(e in this.plugins={},t=this.get("plugins"))if((i=t[e]).plugins)for(n in i.plugins)s=i.plugins[n],a=u.mix({name:s.name,group:i.group,editor:this.editor,toolbar:this.toolbar,host:this},s),"undefined"!=typeof u.M["atto_"+s.name]&&(this.plugins[s.name]=new u.M["atto_"+s.name].Button(a));return this.fire("pluginsloaded"),this},enablePlugins:function(t){this._setPluginState(!0,t)},disablePlugins:function(t){this._setPluginState(!1,t)},_setPluginState:function(t,e){var i="disableButtons";t&&(i="enableButtons"),e?this.plugins[e][i]():u.Object.each(this.plugins,function(t){t[i]()},this)},updateEditorState:function(){var t=this.textarea.hasAttribute("readonly"),e=u.one("#"+this.get("elementid")+"editable");this._setPluginState(!t),e&&e.setAttribute("contenteditable",!t)},_registerEventHandle:function(t){this._eventHandles.push(t)}},{NS:"editor_atto",ATTRS:{elementid:{value:null,writeOnce:!0},contextid:{value:null,writeOnce:!0},plugins:{value:{},writeOnce:!0}}}),u.augment(e,u.EventTarget),u.namespace("M.editor_atto").Editor=e,u.namespace("M.editor_atto.Editor").init=function(t){return new u.M.editor_atto.Editor(t)},o="info",r="warning",i.ATTRS={},i.prototype={messageOverlay:null,hideTimer:null,setupNotifications:function(){var t=new Image,e=new Image;return t.src=M.util.image_url("i/warning","moodle"),e.src=M.util.image_url("i/info","moodle"),this},showMessage:function(t,e,i){var n,s,a="";return null===this.messageOverlay&&(this.messageOverlay=u.Node.create('
'),this.messageOverlay.hide(!0),this.textarea.get("parentNode").append(this.messageOverlay),this.messageOverlay.on("click",function(){this.messageOverlay.hide(!0)},this)),null!==this.hideTimer&&this.hideTimer.cancel(),e===r?a=''+M.util.get_string(':e===o&&(a=''+M.util.get_string('),(n=parseInt(i,10))<=0&&(n=6e4),e="atto_"+e,s=u.Node.create('"),this.messageOverlay.empty(),this.messageOverlay.append(s),this.messageOverlay.show(!0),this.hideTimer=u.later(n,this,function(){this.hideTimer=null,this.messageOverlay.inDoc()&&this.messageOverlay.hide(!0)}),this}},u.Base.mix(u.M.editor_atto.Editor,[i]),h.ATTRS={},h.prototype={_getEmptyContent:function(){var t;return t="rtl"===this.coreDirection?'style="text-align: right;"':'style="text-align: left;"',u.UA.ie&&u.UA.ie<10?'

":'


"},updateFromTextArea:function(){return this.editor.setHTML("" -),this.editor.append(this._cleanHTML(this.textarea.get("value"),!0)),""===this.editor.getHTML()&&this.editor.setHTML(this._getEmptyContent()),this},updateOriginal:function(){var t=this.textarea.get("value"),e=this.getCleanHTML();return""===e&&this.isActive()&&(e=this._getEmptyContent()),t!==e&&(this.textarea.set("value",e),this.textarea.simulate("change"),this.fire("change")),this}},u.Base.mix(u.M.editor_atto.Editor,[h]),n=5e3,l=6e4,d.ATTRS={autosaveEnabled:{value:!0,writeOnce:!0},autosaveFrequency:{value:60,writeOnce:!0},pageHash:{value:"",writeOnce:!0}},d.prototype={lastText:"",autosaveInstance:null,autosaveTimer:null,setupAutosave:function(){var t,e,i,n=-1,s=null,a=this.get("filepickeroptions");if(this.get("autosaveEnabled")){for(s in this.autosaveInstance=u.stamp(this),a)"undefined"!=typeof a[s].itemid&&(n=a[s].itemid);return e={contextid:this.get("contextid"),action:"resume",draftid:n,elementid:this.get("elementid"),pageinstance:this.autosaveInstance,pagehash:this.get("pageHash")},this.autosaveIo(e,this,{success:function(t){if(null!==t&&t){["

","


","
",'

','


','

','


',"

 

","


 

",'

 

','


 

','

 

','


 

'].includes(t.result)&&(t.result=""),t.error||"undefined"==typeof t.result?this.showMessage(M.util.get_string("errortextrecovery","editor_atto"),r,l):t.result!==this.textarea.get("value")&&""!==t.result&&this.recoverText(t.result),this._fireSelectionChanged()}},failure:function(){this.showMessage(M.util.get_string("errortextrecovery","editor_atto"),r,l)}}),i=1e3*parseInt(this.get("autosaveFrequency"),10),this.autosaveTimer=u.later(i,this,this.saveDraft,!1,!0),(t=this.textarea.ancestor("form"))&&this.autosaveIoOnSubmit(t,{action:"reset",contextid:this.get("contextid"),elementid:this.get("elementid"),pageinstance:this.autosaveInstance,pagehash:this.get("pageHash")}),this}},recoverText:function(t){return this.editor.setHTML(t),this.saveSelection(),this.updateOriginal(),this.lastText=t,this.showMessage(M.util.get_string("textrecovered","editor_atto"),o,l),require(["core_editor/events"],function(t){t.notifyEditorContentRestored(this.editor.getDOMNode())}.bind(this)),this},saveDraft:function(){var t,e,i;if(this.editor.getDOMNode())return this.editor.get("hidden")||this.updateOriginal(),(e=this.textarea.get("value"))!==this.lastText&&(M.cfg.wwwroot,this.get("autosaveAjaxScript"),t={sesskey:M.cfg.sesskey,contextid:this.get("contextid"),action:"save",drafttext:e,elementid:this.get("elementid"),pagehash:this.get("pageHash"),pageinstance:this.autosaveInstance},i=function(t){var e=1e3*parseInt(this.get("autosaveFrequency"),10);this.showMessage(M.util.get_string("autosavefailed","editor_atto"),r,e)},this.autosaveIo(t,this,{failure:i,success:function(t){t&&t.error?u.soon(u.bind(i,this,[t])):(this.lastText=e,this.showMessage(M.util.get_string("autosavesucceeded","editor_atto"),o,n))}})),this;this.autosaveTimer.cancel()}},u.Base.mix(u.M.editor_atto.Editor,[d]),s=null,g.NAME="EditorAutosaveIoDispatcher",g.ATTRS={autosaveAjaxScript:{value:"/lib/editor/atto/autosave-ajax.php",readOnly:!0},delay:{value:50,readOnly:!0}},u.extend(g,u.Base,{dispatch:function(t,e,i){this._throttle&&this._throttle.cancel(),this._throttle=u.later(this.get("delay"),this,this._processDispatchQueue),this._queue.push([t,e,i])},_processDispatchQueue:function(){var t=this._queue,i={};this._queue=[],t.length<1||(u.Array.each(t,function(t,e){i[e]=t[0]}),u.io(M.cfg.wwwroot+this.get("autosaveAjaxScript"),{method:"POST",data:u.QueryString.stringify({actions:i,sesskey:M.cfg.sesskey}),on:{start:this._makeIoEventCallback("start",t),complete:this._makeIoEventCallback("complete",t),failure:this._makeIoEventCallback("failure",t),end:this._makeIoEventCallback("end",t),success:this._makeIoEventCallback("success",t)}}))},_makeIoEventCallback:function(o,e){var r=function(){};return function(){var t=arguments[1],a={};"complete"!=o&&"success"!=o||void 0===t||"undefined"==typeof t.responseText||""===t.responseText||(a=JSON.parse(t.responseText)||{}),u.Array.each(e,function(t,e){var i,n=t[1],s=t[2]&&t[2][o]||r;a&&a.error?i=a:a&&(i=a[e]),s.apply(n,[i])})}},_onSubmit:function(t){var i={},e=t.currentTarget.generateID(),n=this._submitEvents[e];!n||n.ios.length<1||(u.Array.each(n.ios,function(t,e){i[e]=t}),u.io(M.cfg.wwwroot+this.get("autosaveAjaxScript"),{method:"POST",data:u.QueryString.stringify({actions:i,sesskey:M.cfg.sesskey}),sync:!0}))},whenSubmit:function(t,e){"undefined"==typeof this._submitEvents[t.generateID()]&&(this._submitEvents[t.generateID()]={event:t.on("submit",this._onSubmit,this),ajaxEvent:t.on(M.core.event.FORM_SUBMIT_AJAX,this._onSubmit,this),ios:[]}),this._submitEvents[t.get("id")].ios.push([e])}}),s=new g,p.prototype={autosaveIo:function(t,e,i){s.dispatch(t,e,i)},autosaveIoOnSubmit:function(t,e){s.whenSubmit(t,e)}},u.Base.mix(u.M.editor_atto.Editor,[p]),f.ATTRS={},f.prototype={getCleanHTML:function(){var t,e=this.editor.cloneNode(!0);return u.each(e.all('[id^="yui"]'),function(t){t.removeAttribute("id")}),e.all(".atto_control").remove(!0),t=e.get("innerHTML"),["

","


","
",'

','


','

','


',"

 

","


 

",'

 

','


 

','

 

','


 

'].includes(t)?"":this._cleanHTML(t)},cleanEditorHTML:function(){var t=this.editor.get("innerHTML") -;return this.editor.set("innerHTML",this._cleanHTML(t)),this},_cleanHTML:function(t,e){return t=this._filterContentWithRules(t,[{regex:/]*>[\s\S]*?<\/style>/gi,replace:""},{regex:/)/gi,replace:""},{regex:/<\/?(?:title|meta|style|st\d|head\b|font|html|body|link)[^>]*?>/gi,replace:""}]),e&&(t=this._cleanHTMLLists(t)),t},_filterContentWithRules:function(t,e){var i=0;for(i=0;i([\s\S]+)$/gi,replace:""},{regex://gi,replace:""},{regex://gi,replace:""},{regex:/]*>[\s\S]*?<\/xml>/gi,replace:""},{regex:/<\?xml[^>]*>[\s\S]*?<\\\?xml>/gi,replace:""},{regex:/<\/?\w+:[^>]*>/gi,replace:""}],t=this._filterContentWithRules(t,e),0!==(t=this._cleanHTML(t)).length&&t.match(/\S/)?((i=document.createElement("div")).innerHTML=t,t=i.innerHTML,e=[{regex:/(<[^>]*?class\s*?=\s*?")([^>"]*)(")/gi,replace:function(t,e,i,n){return e+(i=(i=i.replace(/(?:^|[\s])[\s]*MSO[_a-zA-Z0-9\-]*/gi,"")).replace(/(?:^|[\s])[\s]*Apple-[_a-zA-Z0-9\-]*/gi,""))+n}},{regex:/]*?name\s*?=\s*?"OLE_LINK\d*?"[^>]*?>\s*?<\/a>/gi,replace:i.innerHTML=""}],t=this._cleanStyles(t),t=this._filterContentWithRules(t,e),t=this._cleanHTML(t),t=this._cleanSpans(t)):t):""},_cleanStyles:function(t){var e,i,n,s=document.createElement("div");for(s.innerHTML=t,e=s.querySelectorAll("[style]"),i=i=0;i]*?)(?:[\s]*(?:class|style|id)\s*?=\s*?"\s*?")+/gi,replace:"$1"}],t=this._filterContentWithRules(t,e),(i=document.createElement("div")).innerHTML=t,n=i.getElementsByTagName("span"),Array.prototype.slice.call(n,0).forEach(function(t){if(!t.hasAttributes()){for(;t.firstChild;)t.parentNode.insertBefore(t.firstChild,t);t.parentNode.removeChild(t)}}),i.innerHTML):t:""},_cleanHTMLLists:function(t){for(var e,i="",n=t,s=null,a=[],o=null,r=null;s=n.match(/<(\/?)(li|ul|ol)[^>]*>/i);){if(o={tag:s[2],tagLowerCase:s[2].toLowerCase(),fullTag:s[0],isOpen:1!=s[1].length},r=a.length?a[a.length-1]:null,i+=n.slice(0,s.index),n=n.slice(s.index+s[0].length),o.isOpen){if("li"===o.tagLowerCase){if(!r){if(e=(n.match(/<\/(ol)[ >]/gi)||[]).length,(n.match(/<(ol)[ >]/gi)||[]).length"+o.fullTag+n;continue}n="