From f53dd9c5d2dd7fa75668e0086d89c702c569fb3b Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongnv13@gmail.com>
Date: Wed, 7 Jul 2021 09:27:35 +0700
Subject: [PATCH] MDL-71656 atto: Add meaningful labels to colour items

Colour chooser supported:
 - atto_fontcolor
 - atto_backcolor
---
 .../backcolor/lang/en/atto_backcolor.php      |  6 +++
 lib/editor/atto/plugins/backcolor/lib.php     | 41 +++++++++++++++++++
 lib/editor/atto/plugins/backcolor/styles.css  | 23 +++++++++++
 .../moodle-atto_backcolor-button-debug.js     |  6 +--
 .../moodle-atto_backcolor-button-min.js       |  2 +-
 .../moodle-atto_backcolor-button.js           |  6 +--
 .../backcolor/yui/src/button/js/button.js     |  6 +--
 .../fontcolor/lang/en/atto_fontcolor.php      |  6 +++
 lib/editor/atto/plugins/fontcolor/lib.php     | 41 +++++++++++++++++++
 lib/editor/atto/plugins/fontcolor/styles.css  | 23 +++++++++++
 .../moodle-atto_fontcolor-button-debug.js     |  6 +--
 .../moodle-atto_fontcolor-button-min.js       |  2 +-
 .../moodle-atto_fontcolor-button.js           |  6 +--
 .../fontcolor/yui/src/button/js/button.js     |  6 +--
 14 files changed, 160 insertions(+), 20 deletions(-)
 create mode 100644 lib/editor/atto/plugins/backcolor/lib.php
 create mode 100644 lib/editor/atto/plugins/fontcolor/lib.php

diff --git a/lib/editor/atto/plugins/backcolor/lang/en/atto_backcolor.php b/lib/editor/atto/plugins/backcolor/lang/en/atto_backcolor.php
index 446381f54e5..2afcfdd7bc8 100644
--- a/lib/editor/atto/plugins/backcolor/lang/en/atto_backcolor.php
+++ b/lib/editor/atto/plugins/backcolor/lang/en/atto_backcolor.php
@@ -22,5 +22,11 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
+$string['color_white'] = 'White';
+$string['color_red'] = 'Red';
+$string['color_yellow'] = 'Yellow';
+$string['color_green'] = 'Green';
+$string['color_blue'] = 'Blue';
+$string['color_black'] = 'Black';
 $string['pluginname'] = 'Background colour';
 $string['privacy:metadata'] = 'The atto_backcolor plugin does not store any personal data.';
diff --git a/lib/editor/atto/plugins/backcolor/lib.php b/lib/editor/atto/plugins/backcolor/lib.php
new file mode 100644
index 00000000000..f21a4689bf6
--- /dev/null
+++ b/lib/editor/atto/plugins/backcolor/lib.php
@@ -0,0 +1,41 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor integration version file.
+ *
+ * @package    atto_backcolor
+ * @copyright  2021 Huong Nguyen <huongn@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Initialise the js strings required for this module.
+ */
+function atto_backcolor_strings_for_js() {
+    global $PAGE;
+
+    $PAGE->requires->strings_for_js([
+        'color_white',
+        'color_red',
+        'color_yellow',
+        'color_green',
+        'color_blue',
+        'color_black'
+    ], 'atto_backcolor');
+}
diff --git a/lib/editor/atto/plugins/backcolor/styles.css b/lib/editor/atto/plugins/backcolor/styles.css
index 2d0a90c3137..75f81c75a93 100644
--- a/lib/editor/atto/plugins/backcolor/styles.css
+++ b/lib/editor/atto/plugins/backcolor/styles.css
@@ -1,3 +1,26 @@
 .atto_backcolor_button .dropdown-menu {
     min-width: inherit;
 }
+
+.atto_backcolor_button .dropdown-menu .atto_menuentry {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.atto_backcolor_button .dropdown-menu .atto_menuentry a[role=menuitem] {
+    display: flex;
+}
+
+.atto_backcolor_button .dropdown-menu .atto_menuentry a[role=menuitem]:hover,
+.atto_backcolor_button .dropdown-menu .atto_menuentry a[role=menuitem]:focus {
+    box-shadow: #0f6fc5 0 0 3px 1px;
+}
+
+.atto_backcolor_button .dropdown-menu .coloroption {
+    display: flex;
+    align-items: center;
+    float: left;
+    height: 20px;
+    width: 20px;
+    border: 1px solid #ccc;
+}
diff --git a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-debug.js b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-debug.js
index 760c8a13f1d..902830a4c32 100644
--- a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-debug.js
+++ b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-debug.js
@@ -59,10 +59,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_backcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color
             });
         });
diff --git a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-min.js b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-min.js
index dfb0e54c540..847612cddc0 100644
--- a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-min.js
+++ b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-min.js
@@ -1 +1 @@
-YUI.add("moodle-atto_backcolor-button",function(o,t){var e=[{name:"white",color:"#FFFFFF"},{name:"red",color:"#EF4540"},{name:"yellow",color:"#FFCF35"},{name:"green",color:"#98CA3E"},{name:"blue",color:"#7D9FD3"},{name:"black",color:"#333333"}];o.namespace("M.atto_backcolor").Button=o.Base.create("button",o.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];o.Array.each(e,function(o){t.push({text:'<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: '+o.color+'"></div>',callbackArgs:o.color})}),this.addToolbarMenu({icon:"e/text_highlight",overlayWidth:"4",globalItemConfig:{inlineFormat:!0,callback:this._changeStyle},items:t})},_changeStyle:function(o,t){this.get("host").formatSelectionInlineStyle({backgroundColor:t})}})},"@VERSION@");
\ No newline at end of file
+YUI.add("moodle-atto_backcolor-button",function(o,t){var e=[{name:"white",color:"#FFFFFF"},{name:"red",color:"#EF4540"},{name:"yellow",color:"#FFCF35"},{name:"green",color:"#98CA3E"},{name:"blue",color:"#7D9FD3"},{name:"black",color:"#333333"}];o.namespace("M.atto_backcolor").Button=o.Base.create("button",o.M.editor_atto.EditorPlugin,[],{initializer:function(){var a=[];o.Array.each(e,function(o){var t=M.util.get_string("color_"+o.name,"atto_backcolor");a.push({text:'<div class="coloroption" style="background-color: '+o.color+'" aria-label="'+t+'" title="'+t+'"></div>',callbackArgs:o.color})}),this.addToolbarMenu({icon:"e/text_highlight",overlayWidth:"4",globalItemConfig:{inlineFormat:!0,callback:this._changeStyle},items:a})},_changeStyle:function(o,t){this.get("host").formatSelectionInlineStyle({backgroundColor:t})}})},"@VERSION@");
\ No newline at end of file
diff --git a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button.js b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button.js
index 760c8a13f1d..902830a4c32 100644
--- a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button.js
+++ b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button.js
@@ -59,10 +59,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_backcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color
             });
         });
diff --git a/lib/editor/atto/plugins/backcolor/yui/src/button/js/button.js b/lib/editor/atto/plugins/backcolor/yui/src/button/js/button.js
index 653cb1c06d6..441a12bd7c0 100644
--- a/lib/editor/atto/plugins/backcolor/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/backcolor/yui/src/button/js/button.js
@@ -57,10 +57,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_backcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color
             });
         });
diff --git a/lib/editor/atto/plugins/fontcolor/lang/en/atto_fontcolor.php b/lib/editor/atto/plugins/fontcolor/lang/en/atto_fontcolor.php
index 1af20df7211..398233c3464 100644
--- a/lib/editor/atto/plugins/fontcolor/lang/en/atto_fontcolor.php
+++ b/lib/editor/atto/plugins/fontcolor/lang/en/atto_fontcolor.php
@@ -22,5 +22,11 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
+$string['color_white'] = 'White';
+$string['color_red'] = 'Red';
+$string['color_yellow'] = 'Yellow';
+$string['color_green'] = 'Green';
+$string['color_blue'] = 'Blue';
+$string['color_black'] = 'Black';
 $string['pluginname'] = 'Font colour';
 $string['privacy:metadata'] = 'The atto_fontcolor plugin does not store any personal data.';
diff --git a/lib/editor/atto/plugins/fontcolor/lib.php b/lib/editor/atto/plugins/fontcolor/lib.php
new file mode 100644
index 00000000000..bc8cfad5b91
--- /dev/null
+++ b/lib/editor/atto/plugins/fontcolor/lib.php
@@ -0,0 +1,41 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor integration version file.
+ *
+ * @package    atto_fontcolor
+ * @copyright  2021 Huong Nguyen <huongn@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Initialise the js strings required for this module.
+ */
+function atto_fontcolor_strings_for_js() {
+    global $PAGE;
+
+    $PAGE->requires->strings_for_js([
+        'color_white',
+        'color_red',
+        'color_yellow',
+        'color_green',
+        'color_blue',
+        'color_black'
+    ], 'atto_fontcolor');
+}
diff --git a/lib/editor/atto/plugins/fontcolor/styles.css b/lib/editor/atto/plugins/fontcolor/styles.css
index 7333969bcaf..2c22dc856cf 100644
--- a/lib/editor/atto/plugins/fontcolor/styles.css
+++ b/lib/editor/atto/plugins/fontcolor/styles.css
@@ -1,3 +1,26 @@
 .atto_fontcolor_button .dropdown-menu {
     min-width: inherit;
 }
+
+.atto_fontcolor_button .dropdown-menu .atto_menuentry {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.atto_fontcolor_button .dropdown-menu .atto_menuentry a[role=menuitem] {
+    display: flex;
+}
+
+.atto_fontcolor_button .dropdown-menu .atto_menuentry a[role=menuitem]:hover,
+.atto_fontcolor_button .dropdown-menu .atto_menuentry a[role=menuitem]:focus {
+    box-shadow: #0f6fc5 0 0 3px 1px;
+}
+
+.atto_fontcolor_button .dropdown-menu .coloroption {
+    display: flex;
+    align-items: center;
+    float: left;
+    height: 20px;
+    width: 20px;
+    border: 1px solid #ccc;
+}
diff --git a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-debug.js b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-debug.js
index 52449edddca..23d9b2d8ce7 100644
--- a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-debug.js
+++ b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-debug.js
@@ -59,10 +59,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_fontcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color,
                 callback: this._changeStyle
             });
diff --git a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-min.js b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-min.js
index 68a66c42edc..8659fdce824 100644
--- a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-min.js
+++ b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-min.js
@@ -1 +1 @@
-YUI.add("moodle-atto_fontcolor-button",function(o,t){var e=[{name:"white",color:"#FFFFFF"},{name:"red",color:"#EF4540"},{name:"yellow",color:"#FFCF35"},{name:"green",color:"#98CA3E"},{name:"blue",color:"#7D9FD3"},{name:"black",color:"#333333"}];o.namespace("M.atto_fontcolor").Button=o.Base.create("button",o.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];o.Array.each(e,function(o){t.push({text:'<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: '+o.color+'"></div>',callbackArgs:o.color,callback:this._changeStyle})}),this.addToolbarMenu({icon:"e/text_color",overlayWidth:"4",menuColor:"#333333",globalItemConfig:{inlineFormat:!0,callback:this._changeStyle},items:t})},_changeStyle:function(o,t){this.get("host").formatSelectionInlineStyle({color:t})}})},"@VERSION@");
\ No newline at end of file
+YUI.add("moodle-atto_fontcolor-button",function(o,t){var e=[{name:"white",color:"#FFFFFF"},{name:"red",color:"#EF4540"},{name:"yellow",color:"#FFCF35"},{name:"green",color:"#98CA3E"},{name:"blue",color:"#7D9FD3"},{name:"black",color:"#333333"}];o.namespace("M.atto_fontcolor").Button=o.Base.create("button",o.M.editor_atto.EditorPlugin,[],{initializer:function(){var l=[];o.Array.each(e,function(o){var t=M.util.get_string("color_"+o.name,"atto_fontcolor");l.push({text:'<div class="coloroption" style="background-color: '+o.color+'" aria-label="'+t+'" title="'+t+'"></div>',callbackArgs:o.color,callback:this._changeStyle})}),this.addToolbarMenu({icon:"e/text_color",overlayWidth:"4",menuColor:"#333333",globalItemConfig:{inlineFormat:!0,callback:this._changeStyle},items:l})},_changeStyle:function(o,t){this.get("host").formatSelectionInlineStyle({color:t})}})},"@VERSION@");
\ No newline at end of file
diff --git a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button.js b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button.js
index 52449edddca..23d9b2d8ce7 100644
--- a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button.js
+++ b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button.js
@@ -59,10 +59,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_fontcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color,
                 callback: this._changeStyle
             });
diff --git a/lib/editor/atto/plugins/fontcolor/yui/src/button/js/button.js b/lib/editor/atto/plugins/fontcolor/yui/src/button/js/button.js
index 789933201b4..f8dcf6a65f8 100644
--- a/lib/editor/atto/plugins/fontcolor/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/fontcolor/yui/src/button/js/button.js
@@ -57,10 +57,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_fontcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color,
                 callback: this._changeStyle
             });