From 1eeb7ce3959f44140b78e656c6016538dddae376 Mon Sep 17 00:00:00 2001 From: Shamim Rezaie Date: Sun, 27 Jun 2021 04:05:00 +1000 Subject: [PATCH] MDL-71603 editor_atto: Make button icons decorative only --- .../moodle-editor_atto-plugin-debug.js | 18 ++++++++++++------ .../moodle-editor_atto-plugin-min.js | 4 ++-- .../moodle-editor_atto-plugin.js | 18 ++++++++++++------ .../yui/src/editor/js/editor-plugin-buttons.js | 18 ++++++++++++------ 4 files changed, 38 insertions(+), 20 deletions(-) diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-debug.js b/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-debug.js index d4b147acf61..3ab44aa0dca 100644 --- a/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-debug.js +++ b/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-debug.js @@ -182,6 +182,7 @@ var MENUTEMPLATE = '' + 'id="{{id}}" ' + 'tabindex="-1" ' + 'title="{{title}}" ' + + 'aria-label="{{title}}" ' + 'aria-haspopup="true" ' + 'aria-controls="{{id}}_menu">' + '' + @@ -363,8 +364,10 @@ EditorPluginButtons.prototype = { button = Y.Node.create(''); button.setAttribute('title', title); + button.setAttribute('aria-label', title); window.require(['core/templates'], function(Templates) { - Templates.renderPix(config.icon, config.iconComponent, title).then(function(iconhtml) { + // The button already has title and label, so no need to set them again on the icon. + Templates.renderPix(config.icon, config.iconComponent, '').then(function(iconhtml) { button.append(iconhtml); }); }); @@ -398,10 +401,12 @@ EditorPluginButtons.prototype = { if (this._primaryKeyboardShortcut[buttonClass]) { // If we have a valid keyboard shortcut description, then set it with the title. - button.setAttribute('title', M.util.get_string('plugin_title_shortcut', 'editor_atto', { - title: title, - shortcut: this._primaryKeyboardShortcut[buttonClass] - })); + title = M.util.get_string('plugin_title_shortcut', 'editor_atto', { + title: title, + shortcut: this._primaryKeyboardShortcut[buttonClass] + }); + button.setAttribute('title', title); + button.setAttribute('aria-label', title); } } @@ -542,7 +547,8 @@ EditorPluginButtons.prototype = { config.buttonId = id; window.require(['core/templates'], function(Templates) { - Templates.renderPix(config.icon, config.iconComponent, title).then(function(iconhtml) { + // The button already has title and label, so no need to set them again on the icon. + Templates.renderPix(config.icon, config.iconComponent, '').then(function(iconhtml) { button.one(CSS.MENUICON).append(iconhtml); }); Templates.renderPix('t/expanded', 'core', '').then(function(iconhtml) { diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-min.js b/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-min.js index cc1f5fc8c54..b2160fd1b1e 100644 --- a/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-min.js +++ b/lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-min.js @@ -1,2 +1,2 @@ -YUI.add("moodle-editor_atto-plugin",function(u,t){var n,i,l,a,o,h,c,d;function e(){e.superclass.constructor.apply(this,arguments)}function s(){}function r(){}n=".atto_group.",i="_group",u.extend(e,u.Base,{name:null,editor:null,toolbar:null,initializer:function(t){this.name=t.name,this.toolbar=t.toolbar,this.editor=t.editor,this.buttons={},this.buttonNames=[],this.buttonStates={},this.menus={},this._primaryKeyboardShortcut=[],this._buttonHandlers=[],this._menuHideHandlers=[],this._highlightQueue={}},markUpdated:function(){return this.get("host").saveSelection(),this.get("host").updateOriginal()}},{NAME:"editorPlugin",ATTRS:{host:{writeOnce:!0},group:{writeOnce:!0,getter:function(t){var e=this.toolbar.one(n+t+i);return e||(e=u.Node.create('
'),this.toolbar.append(e)),e}}}}),u.namespace("M.editor_atto").EditorPlugin=e,l='',a="disabled",o="highlight",h=".editor_atto_content",c=".editor_atto_menu_icon",d=".editor_atto_menu_expand",s.ATTRS={},s.prototype={buttons:null,buttonNames:null,buttonStates:null,menus:null,DISABLED:0,ENABLED:1,_buttonHandlers:null,_menuHideHandlers:null,_primaryKeyboardShortcut:null,_highlightQueue:null,addButton:function(e){var n,i,o,t=this.get("group"),a=this.name,s="atto_"+a+"_button",r=this.get("host");return e.exec&&(s=s+"_"+e.exec),e.buttonName?s=s+"_"+e.buttonName:e.buttonName=e.exec||a,e.buttonClass=s,(e=this._normalizeIcon(e)).title||(e.title="pluginname"),i=M.util.get_string(e.title,"atto_"+a),(n=u.Node.create('')).setAttribute("title",i),window.require(["core/templates"],function(t){t.renderPix(e.icon,e.iconComponent,i).then(function(t){n.append(t)})}),t.append(n),this.toolbar.getAttribute("aria-activedescendant")||(n.setAttribute("tabindex","0"),this.toolbar.setAttribute("aria-activedescendant",n.generateID()),this.get("host")._tabFocus=n),e=this._normalizeCallback(e),this._buttonHandlers.push(this.toolbar.delegate("click",e.callback,"."+s,this)),e.keys&&("undefined"!=typeof e.keyDescription&&(this._primaryKeyboardShortcut[s]=e.keyDescription),this._addKeyboardListener(e.callback,e.keys,s),this._primaryKeyboardShortcut[s]&&n.setAttribute("title",M.util.get_string("plugin_title_shortcut","editor_atto",{title:i,shortcut:this._primaryKeyboardShortcut[s]}))),e.tags&&(o=!0,"boolean"==typeof e.tagMatchRequiresAll&&(o=e.tagMatchRequiresAll),this._buttonHandlers.push(r.on(["atto:selectionchanged","change"],function(t){"undefined"!=typeof this._highlightQueue[e.buttonName]&&this._highlightQueue[e.buttonName].cancel(),this._highlightQueue[e.buttonName]=u.soon(u.bind(function(t){r.selectionFilterMatches(e.tags,t.selectedNodes,o)?this.highlightButtons(e.buttonName):this.unHighlightButtons(e.buttonName)},this,t))},this))),this.buttonNames.push(e.buttonName),this.buttons[e.buttonName]=n,this.buttonStates[e.buttonName]=this.ENABLED,n},addBasicButton:function(t){return t.exec?(t.icon||(t.icon="e/"+t.exec),t.callback=function(){document.execCommand(t.exec,!1,null),this.markUpdated()},this.addButton(t)):null},addToolbarMenu:function(e){var n,i,t,o,a=this.get("group"),s=this.name,r="atto_"+s+"_button";return e.buttonName?r=r+"_"+e.buttonName:e.buttonName=s,e.buttonClass=r,(e=this._normalizeIcon(e)).title||(e.title="pluginname"),i=M.util.get_string(e.title,"atto_"+s),e.menuColor||(e.menuColor="transparent"),t="atto_"+s+"_menubutton_"+u.stamp(this),o=u.Handlebars.compile(l),n=u.Node.create(o({buttonClass:r,config:e,title:i,id:t})),e.buttonId=t,window.require(["core/templates"],function(t){t.renderPix(e.icon,e.iconComponent,i).then(function(t){n.one(c).append(t)}),t.renderPix("t/expanded","core","").then(function(t){n.one(d).append(t)})}),a.append(n),this.toolbar.getAttribute("aria-activedescendant")||(n.setAttribute("tabindex","0"),this.toolbar.setAttribute("aria-activedescendant",n.generateID())),this._buttonHandlers.push(this.toolbar.delegate("click",this._showToolbarMenu,"."+r,this,e),this.toolbar.delegate("key",this._showToolbarMenuAndFocus,"40, 32, enter","."+r,this,e)),this.buttonNames.push(e.buttonName),this.buttons[e.buttonName]=n,this.buttonStates[e.buttonName]=this.ENABLED,n},_showToolbarMenu:function(t,e){var n,i,o;t.preventDefault(),this.isEnabled()&&((n=t.currentTarget.ancestor("button",!0)).hasAttribute(a)||(this.menus[e.buttonClass]||(e.overlayWidth||(e.overlayWidth="14"),e.innerOverlayWidth||(e.innerOverlayWidth=parseInt(e.overlayWidth,10)-2+"em"),e.overlayWidth=parseInt(e.overlayWidth,10)+"em",this.menus[e.buttonClass]=new u.M.editor_atto.Menu(e),this.menus[e.buttonClass].get("contentBox").delegate("click",this._chooseMenuItem,".atto_menuentry a",this,e)),u.Array.each(this.get("host").openMenus,function(t){t.set("focusAfterHide",null)}),(o=this.buttons[e.buttonName]).focus(),this.get("host")._setTabFocus(o),(i=this.menus[e.buttonClass]).set("focusAfterHide",o),i.show(),n.setAttribute("aria-expanded",!0),i.align(this.buttons[e.buttonName],[u.WidgetPositionAlign.TL,u.WidgetPositionAlign.BL]),this.get("host").openMenus=[i]))},_showToolbarMenuAndFocus:function(t,e){this._showToolbarMenu(t,e),this.menus[e.buttonClass].get("boundingBox").one("a").focus()},_chooseMenuItem:function(t,e,n){var i=t.target.ancestor("a",!0).getData("index"),o=this._normalizeCallback(e.items[i],e.globalItemConfig);(n=this.menus[e.buttonClass]).set("preventHideMenu",!0),o.callback(t,o._callback,o.callbackArgs),n.set("preventHideMenu",!1),n.set("focusAfterHide",this.get("host").editor),n.hide(t)},_normalizeCallback:function(n,t){return n._callbackNormalized||(t=t||{},n.inlineFormat=n.inlineFormat||t.inlineFormat,n._inlineCallback=n.callback||t.callback,n._callback=n.callback||t.callback,n.inlineFormat&&"function"==typeof n._inlineCallback&&(n._callback=function(t,e){ -this.get("host").applyFormat(t,n._inlineCallback,this,e)}),n.callback=u.rbind(this._callbackWrapper,this,n._callback,n.callbackArgs),n._callbackNormalized=!0),n},_normalizeIcon:function(t){return t.iconurl||(t.iconComponent&&"moodle"!=t.iconComponent||(t.iconComponent="core"),t.iconurl=M.util.image_url(t.icon,t.iconComponent)),t},_callbackWrapper:function(t,e,n){var i,o;if(t.preventDefault(),this.isEnabled()&&(!(i=t.currentTarget.ancestor("button",!0))||!i.hasAttribute(a)))return YUI.Env.UA.android||this.get("host").isActive()||this.get("host").focus(),this.get("host").saveSelection(),i&&this.get("host")._setTabFocus(i),o=[t,n],this.get("host").restoreSelection(),e.apply(this,o)},_addKeyboardListener:function(n,t,e){var i,o,a,s="key",r=h;if(u.Lang.isArray(t))return u.Array.each(t,function(t){this._addKeyboardListener(n,t)},this),this;o="object"==typeof t?(t.eventtype&&(s=t.eventtype),t.container&&(r=t.container),i=t.keyCodes,n):(a=this._getDefaultMetaKey(),i=this._getKeyEvent()+t+"+"+a,"undefined"==typeof this._primaryKeyboardShortcut[e]&&(this._primaryKeyboardShortcut[e]=this._getDefaultMetaKeyDescription(t)),u.bind(function(t,e){this._eventUsesExactKeyModifiers(t,e)&&n.apply(this,[e])},this,[a])),this._buttonHandlers.push(this.editor.delegate(s,o,i,r,this))},_eventUsesExactKeyModifiers:function(t,e){var n,i=!0;return"key"===e.type&&(n=-1'),this.toolbar.append(e)),e}}}}),u.namespace("M.editor_atto").EditorPlugin=e,l='',a="disabled",o="highlight",h=".editor_atto_content",c=".editor_atto_menu_icon",d=".editor_atto_menu_expand",s.ATTRS={},s.prototype={buttons:null,buttonNames:null,buttonStates:null,menus:null,DISABLED:0,ENABLED:1,_buttonHandlers:null,_menuHideHandlers:null,_primaryKeyboardShortcut:null,_highlightQueue:null,addButton:function(e){var i,t,n,o=this.get("group"),a=this.name,s="atto_"+a+"_button",r=this.get("host");return e.exec&&(s=s+"_"+e.exec),e.buttonName?s=s+"_"+e.buttonName:e.buttonName=e.exec||a,e.buttonClass=s,(e=this._normalizeIcon(e)).title||(e.title="pluginname"),t=M.util.get_string(e.title,"atto_"+a),(i=u.Node.create('')).setAttribute("title",t),i.setAttribute("aria-label",t),window.require(["core/templates"],function(t){t.renderPix(e.icon,e.iconComponent,"").then(function(t){i.append(t)})}),o.append(i),this.toolbar.getAttribute("aria-activedescendant")||(i.setAttribute("tabindex","0"),this.toolbar.setAttribute("aria-activedescendant",i.generateID()),this.get("host")._tabFocus=i),e=this._normalizeCallback(e),this._buttonHandlers.push(this.toolbar.delegate("click",e.callback,"."+s,this)),e.keys&&("undefined"!=typeof e.keyDescription&&(this._primaryKeyboardShortcut[s]=e.keyDescription),this._addKeyboardListener(e.callback,e.keys,s),this._primaryKeyboardShortcut[s]&&(t=M.util.get_string("plugin_title_shortcut","editor_atto",{title:t,shortcut:this._primaryKeyboardShortcut[s]}),i.setAttribute("title",t),i.setAttribute("aria-label",t))),e.tags&&(n=!0,"boolean"==typeof e.tagMatchRequiresAll&&(n=e.tagMatchRequiresAll),this._buttonHandlers.push(r.on(["atto:selectionchanged","change"],function(t){"undefined"!=typeof this._highlightQueue[e.buttonName]&&this._highlightQueue[e.buttonName].cancel(),this._highlightQueue[e.buttonName]=u.soon(u.bind(function(t){r.selectionFilterMatches(e.tags,t.selectedNodes,n)?this.highlightButtons(e.buttonName):this.unHighlightButtons(e.buttonName)},this,t))},this))),this.buttonNames.push(e.buttonName),this.buttons[e.buttonName]=i,this.buttonStates[e.buttonName]=this.ENABLED,i},addBasicButton:function(t){return t.exec?(t.icon||(t.icon="e/"+t.exec),t.callback=function(){document.execCommand(t.exec,!1,null),this.markUpdated()},this.addButton(t)):null},addToolbarMenu:function(e){var i,t,n,o,a=this.get("group"),s=this.name,r="atto_"+s+"_button";return e.buttonName?r=r+"_"+e.buttonName:e.buttonName=s,e.buttonClass=r,(e=this._normalizeIcon(e)).title||(e.title="pluginname"),t=M.util.get_string(e.title,"atto_"+s),e.menuColor||(e.menuColor="transparent"),n="atto_"+s+"_menubutton_"+u.stamp(this),o=u.Handlebars.compile(l),i=u.Node.create(o({buttonClass:r,config:e,title:t,id:n})),e.buttonId=n,window.require(["core/templates"],function(t){t.renderPix(e.icon,e.iconComponent,"").then(function(t){i.one(c).append(t)}),t.renderPix("t/expanded","core","").then(function(t){i.one(d).append(t)})}),a.append(i),this.toolbar.getAttribute("aria-activedescendant")||(i.setAttribute("tabindex","0"),this.toolbar.setAttribute("aria-activedescendant",i.generateID())),this._buttonHandlers.push(this.toolbar.delegate("click",this._showToolbarMenu,"."+r,this,e),this.toolbar.delegate("key",this._showToolbarMenuAndFocus,"40, 32, enter","."+r,this,e)),this.buttonNames.push(e.buttonName),this.buttons[e.buttonName]=i,this.buttonStates[e.buttonName]=this.ENABLED,i},_showToolbarMenu:function(t,e){var i,n,o;t.preventDefault(),this.isEnabled()&&((i=t.currentTarget.ancestor("button",!0)).hasAttribute(a)||(this.menus[e.buttonClass]||(e.overlayWidth||(e.overlayWidth="14"),e.innerOverlayWidth||(e.innerOverlayWidth=parseInt(e.overlayWidth,10)-2+"em"),e.overlayWidth=parseInt(e.overlayWidth,10)+"em",this.menus[e.buttonClass]=new u.M.editor_atto.Menu(e),this.menus[e.buttonClass].get("contentBox").delegate("click",this._chooseMenuItem,".atto_menuentry a",this,e)),u.Array.each(this.get("host").openMenus,function(t){t.set("focusAfterHide",null)}),(o=this.buttons[e.buttonName]).focus(),this.get("host")._setTabFocus(o),(n=this.menus[e.buttonClass]).set("focusAfterHide",o),n.show(),i.setAttribute("aria-expanded",!0),n.align(this.buttons[e.buttonName],[u.WidgetPositionAlign.TL,u.WidgetPositionAlign.BL]),this.get("host").openMenus=[n]))},_showToolbarMenuAndFocus:function(t,e){this._showToolbarMenu(t,e),this.menus[e.buttonClass].get("boundingBox").one("a").focus()},_chooseMenuItem:function(t,e,i){var n=t.target.ancestor("a",!0).getData("index"),o=this._normalizeCallback(e.items[n],e.globalItemConfig);(i=this.menus[e.buttonClass]).set("preventHideMenu",!0),o.callback(t,o._callback,o.callbackArgs),i.set("preventHideMenu",!1),i.set("focusAfterHide",this.get("host").editor),i.hide(t)},_normalizeCallback:function(i,t){return i._callbackNormalized||(t=t||{},i.inlineFormat=i.inlineFormat||t.inlineFormat,i._inlineCallback=i.callback||t.callback, +i._callback=i.callback||t.callback,i.inlineFormat&&"function"==typeof i._inlineCallback&&(i._callback=function(t,e){this.get("host").applyFormat(t,i._inlineCallback,this,e)}),i.callback=u.rbind(this._callbackWrapper,this,i._callback,i.callbackArgs),i._callbackNormalized=!0),i},_normalizeIcon:function(t){return t.iconurl||(t.iconComponent&&"moodle"!=t.iconComponent||(t.iconComponent="core"),t.iconurl=M.util.image_url(t.icon,t.iconComponent)),t},_callbackWrapper:function(t,e,i){var n,o;if(t.preventDefault(),this.isEnabled()&&(!(n=t.currentTarget.ancestor("button",!0))||!n.hasAttribute(a)))return YUI.Env.UA.android||this.get("host").isActive()||this.get("host").focus(),this.get("host").saveSelection(),n&&this.get("host")._setTabFocus(n),o=[t,i],this.get("host").restoreSelection(),e.apply(this,o)},_addKeyboardListener:function(i,t,e){var n,o,a,s="key",r=h;if(u.Lang.isArray(t))return u.Array.each(t,function(t){this._addKeyboardListener(i,t)},this),this;o="object"==typeof t?(t.eventtype&&(s=t.eventtype),t.container&&(r=t.container),n=t.keyCodes,i):(a=this._getDefaultMetaKey(),n=this._getKeyEvent()+t+"+"+a,"undefined"==typeof this._primaryKeyboardShortcut[e]&&(this._primaryKeyboardShortcut[e]=this._getDefaultMetaKeyDescription(t)),u.bind(function(t,e){this._eventUsesExactKeyModifiers(t,e)&&i.apply(this,[e])},this,[a])),this._buttonHandlers.push(this.editor.delegate(s,o,n,r,this))},_eventUsesExactKeyModifiers:function(t,e){var i,n=!0;return"key"===e.type&&(i=-1' + '' + @@ -363,8 +364,10 @@ EditorPluginButtons.prototype = { button = Y.Node.create(''); button.setAttribute('title', title); + button.setAttribute('aria-label', title); window.require(['core/templates'], function(Templates) { - Templates.renderPix(config.icon, config.iconComponent, title).then(function(iconhtml) { + // The button already has title and label, so no need to set them again on the icon. + Templates.renderPix(config.icon, config.iconComponent, '').then(function(iconhtml) { button.append(iconhtml); }); }); @@ -398,10 +401,12 @@ EditorPluginButtons.prototype = { if (this._primaryKeyboardShortcut[buttonClass]) { // If we have a valid keyboard shortcut description, then set it with the title. - button.setAttribute('title', M.util.get_string('plugin_title_shortcut', 'editor_atto', { - title: title, - shortcut: this._primaryKeyboardShortcut[buttonClass] - })); + title = M.util.get_string('plugin_title_shortcut', 'editor_atto', { + title: title, + shortcut: this._primaryKeyboardShortcut[buttonClass] + }); + button.setAttribute('title', title); + button.setAttribute('aria-label', title); } } @@ -540,7 +545,8 @@ EditorPluginButtons.prototype = { config.buttonId = id; window.require(['core/templates'], function(Templates) { - Templates.renderPix(config.icon, config.iconComponent, title).then(function(iconhtml) { + // The button already has title and label, so no need to set them again on the icon. + Templates.renderPix(config.icon, config.iconComponent, '').then(function(iconhtml) { button.one(CSS.MENUICON).append(iconhtml); }); Templates.renderPix('t/expanded', 'core', '').then(function(iconhtml) { diff --git a/lib/editor/atto/yui/src/editor/js/editor-plugin-buttons.js b/lib/editor/atto/yui/src/editor/js/editor-plugin-buttons.js index 4b1665cbf7f..26ee2458485 100644 --- a/lib/editor/atto/yui/src/editor/js/editor-plugin-buttons.js +++ b/lib/editor/atto/yui/src/editor/js/editor-plugin-buttons.js @@ -32,6 +32,7 @@ var MENUTEMPLATE = '' + 'id="{{id}}" ' + 'tabindex="-1" ' + 'title="{{title}}" ' + + 'aria-label="{{title}}" ' + 'aria-haspopup="true" ' + 'aria-controls="{{id}}_menu">' + '' + @@ -213,8 +214,10 @@ EditorPluginButtons.prototype = { button = Y.Node.create(''); button.setAttribute('title', title); + button.setAttribute('aria-label', title); window.require(['core/templates'], function(Templates) { - Templates.renderPix(config.icon, config.iconComponent, title).then(function(iconhtml) { + // The button already has title and label, so no need to set them again on the icon. + Templates.renderPix(config.icon, config.iconComponent, '').then(function(iconhtml) { button.append(iconhtml); }); }); @@ -248,10 +251,12 @@ EditorPluginButtons.prototype = { if (this._primaryKeyboardShortcut[buttonClass]) { // If we have a valid keyboard shortcut description, then set it with the title. - button.setAttribute('title', M.util.get_string('plugin_title_shortcut', 'editor_atto', { - title: title, - shortcut: this._primaryKeyboardShortcut[buttonClass] - })); + title = M.util.get_string('plugin_title_shortcut', 'editor_atto', { + title: title, + shortcut: this._primaryKeyboardShortcut[buttonClass] + }); + button.setAttribute('title', title); + button.setAttribute('aria-label', title); } } @@ -392,7 +397,8 @@ EditorPluginButtons.prototype = { config.buttonId = id; window.require(['core/templates'], function(Templates) { - Templates.renderPix(config.icon, config.iconComponent, title).then(function(iconhtml) { + // The button already has title and label, so no need to set them again on the icon. + Templates.renderPix(config.icon, config.iconComponent, '').then(function(iconhtml) { button.one(CSS.MENUICON).append(iconhtml); }); Templates.renderPix('t/expanded', 'core', '').then(function(iconhtml) {