MDL-71603 editor_atto: Make button icons decorative only

This commit is contained in:
Shamim Rezaie 2021-06-27 04:05:00 +10:00
parent b078f18c6e
commit 1eeb7ce395
4 changed files with 38 additions and 20 deletions

View File

@ -182,6 +182,7 @@ var MENUTEMPLATE = '' +
'id="{{id}}" ' +
'tabindex="-1" ' +
'title="{{title}}" ' +
'aria-label="{{title}}" ' +
'aria-haspopup="true" ' +
'aria-controls="{{id}}_menu">' +
'<span class="editor_atto_menu_icon"></span>' +
@ -363,8 +364,10 @@ EditorPluginButtons.prototype = {
button = Y.Node.create('<button type="button" class="' + buttonClass + '"' +
'tabindex="-1"></button>');
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) {

File diff suppressed because one or more lines are too long

View File

@ -182,6 +182,7 @@ var MENUTEMPLATE = '' +
'id="{{id}}" ' +
'tabindex="-1" ' +
'title="{{title}}" ' +
'aria-label="{{title}}" ' +
'aria-haspopup="true" ' +
'aria-controls="{{id}}_menu">' +
'<span class="editor_atto_menu_icon"></span>' +
@ -363,8 +364,10 @@ EditorPluginButtons.prototype = {
button = Y.Node.create('<button type="button" class="' + buttonClass + '"' +
'tabindex="-1"></button>');
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) {

View File

@ -32,6 +32,7 @@ var MENUTEMPLATE = '' +
'id="{{id}}" ' +
'tabindex="-1" ' +
'title="{{title}}" ' +
'aria-label="{{title}}" ' +
'aria-haspopup="true" ' +
'aria-controls="{{id}}_menu">' +
'<span class="editor_atto_menu_icon"></span>' +
@ -213,8 +214,10 @@ EditorPluginButtons.prototype = {
button = Y.Node.create('<button type="button" class="' + buttonClass + '"' +
'tabindex="-1"></button>');
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) {