Merge branch '61788-predefined-colours-dont-have-descriptive-labels' into 'master'

Fix for #61788 predefined colours dont have descriptive labels

Closes #61788

See merge request gitlab-org/gitlab-ce!28343

6 files changed, 104 insertions, 36 deletions

diff --git a/app/helpers/labels_helper.rb b/app/helpers/labels_helper.rb
index acc8aeae282..a6b3b79737b 100644
--- a/app/helpers/labels_helper.rb
+++ b/app/helpers/labels_helper.rb
@@ -76,29 +76,39 @@ module LabelsHelper
   end
 
   def suggested_colors
-    [
-      '#0033CC',
-      '#428BCA',
-      '#44AD8E',
-      '#A8D695',
-      '#5CB85C',
-      '#69D100',
-      '#004E00',
-      '#34495E',
-      '#7F8C8D',
-      '#A295D6',
-      '#5843AD',
-      '#8E44AD',
-      '#FFECDB',
-      '#AD4363',
-      '#D10069',
-      '#CC0033',
-      '#FF0000',
-      '#D9534F',
-      '#D1D100',
-      '#F0AD4E',
-      '#AD8D43'
-    ]
+    {
+      '#0033CC' => s_('SuggestedColors|UA blue'),
+      '#428BCA' => s_('SuggestedColors|Moderate blue'),
+      '#44AD8E' => s_('SuggestedColors|lime green'),
+      '#A8D695' => s_('SuggestedColors|Feijoa'),
+      '#5CB85C' => s_('SuggestedColors|Slightly desaturated green'),
+      '#69D100' => s_('SuggestedColors|Bright Green'),
+      '#004E00' => s_('SuggestedColors|Very dark lime green'),
+      '#34495E' => s_('SuggestedColors|Very dark desaturated blue'),
+      '#7F8C8D' => s_('SuggestedColors|Dark grayish cyan'),
+      '#A295D6' => s_('SuggestedColors|Slightly desaturated blue'),
+      '#5843AD' => s_('SuggestedColors|Dark moderate blue'),
+      '#8E44AD' => s_('SuggestedColors|Dark moderate violet'),
+      '#FFECDB' => s_('SuggestedColors|Very pale orange'),
+      '#AD4363' => s_('SuggestedColors|Dark moderate pink'),
+      '#D10069' => s_('SuggestedColors|Strong pink'),
+      '#CC0033' => s_('SuggestedColors|Strong red'),
+      '#FF0000' => s_('SuggestedColors|Pure red'),
+      '#D9534F' => s_('SuggestedColors|Soft red'),
+      '#D1D100' => s_('SuggestedColors|Strong yellow'),
+      '#F0AD4E' => s_('SuggestedColors|Soft orange'),
+      '#AD8D43' => s_('SuggestedColors|Dark moderate orange')
+    }
+  end
+
+  def render_suggested_colors
+    colors_html = suggested_colors.map do |color_hex_value, color_name|
+      link_to('', '#', class: "has-tooltip", style: "background-color: #{color_hex_value}", data: { color: color_hex_value }, title: color_name)
+    end
+
+    content_tag(:div, class: 'suggest-colors') do
+      colors_html.join.html_safe
+    end
   end
 
   def text_color_for_bg(bg_color)
diff --git a/app/views/admin/labels/_form.html.haml b/app/views/admin/labels/_form.html.haml
index 49aa62a5408..299d0a12e6c 100644
--- a/app/views/admin/labels/_form.html.haml
+++ b/app/views/admin/labels/_form.html.haml
@@ -24,10 +24,7 @@
         %br
         = _("Or you can choose one of the suggested colors below")
 
-      .suggest-colors
-        - suggested_colors.each do |color|
-          = link_to '#', style: "background-color: #{color}", data: { color: color } do
-             
+      = render_suggested_colors
 
   .form-actions
     = f.submit _('Save'), class: 'btn btn-success js-save-button'
diff --git a/app/views/shared/issuable/_label_page_create.html.haml b/app/views/shared/issuable/_label_page_create.html.haml
index d173e3c0192..a0d3bc64f1f 100644
--- a/app/views/shared/issuable/_label_page_create.html.haml
+++ b/app/views/shared/issuable/_label_page_create.html.haml
@@ -9,9 +9,7 @@
     .dropdown-labels-error.js-label-error
     %input#new_label_name.default-dropdown-input{ type: "text", placeholder: _('Name new label') }
     .suggest-colors.suggest-colors-dropdown
-      - suggested_colors.each do |color|
-        = link_to '#', style: "background-color: #{color}", data: { color: color } do
-          &nbsp
+      = render_suggested_colors
     .dropdown-label-color-input
       .dropdown-label-color-preview.js-dropdown-label-color-preview
       %input#new_label_color.default-dropdown-input{ type: "text", placeholder: _('Assign custom color like #FF0000') }
diff --git a/app/views/shared/labels/_form.html.haml b/app/views/shared/labels/_form.html.haml
index 4b88aff3313..78ff225daad 100644
--- a/app/views/shared/labels/_form.html.haml
+++ b/app/views/shared/labels/_form.html.haml
@@ -25,12 +25,7 @@
         Choose any color.
         %br
         Or you can choose one of the suggested colors below
-
-      .suggest-colors
-        - suggested_colors.each do |color|
-          = link_to '#', style: "background-color: #{color}", data: { color: color } do
-             
-
+      = render_suggested_colors
   .form-actions
     - if @label.persisted?
       = f.submit 'Save changes', class: 'btn btn-success js-save-button'
diff --git a/changelogs/unreleased/61788-predefined-colours-dont-have-descriptive-labels.yml b/changelogs/unreleased/61788-predefined-colours-dont-have-descriptive-labels.yml
new file mode 100644
index 00000000000..25c83d24007
--- /dev/null
+++ b/changelogs/unreleased/61788-predefined-colours-dont-have-descriptive-labels.yml
@@ -0,0 +1,5 @@
+---
+title: Adds a text label to color pickers to improve accessibility.
+merge_request: 28343
+author: Chris Toynbee
+type: changed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 81a0ad46b77..dc119784885 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -9400,6 +9400,69 @@ msgstr ""
 msgid "Suggested change"
 msgstr ""
 
+msgid "SuggestedColors|Bright Green"
+msgstr ""
+
+msgid "SuggestedColors|Dark grayish cyan"
+msgstr ""
+
+msgid "SuggestedColors|Dark moderate blue"
+msgstr ""
+
+msgid "SuggestedColors|Dark moderate orange"
+msgstr ""
+
+msgid "SuggestedColors|Dark moderate pink"
+msgstr ""
+
+msgid "SuggestedColors|Dark moderate violet"
+msgstr ""
+
+msgid "SuggestedColors|Feijoa"
+msgstr ""
+
+msgid "SuggestedColors|Moderate blue"
+msgstr ""
+
+msgid "SuggestedColors|Pure red"
+msgstr ""
+
+msgid "SuggestedColors|Slightly desaturated blue"
+msgstr ""
+
+msgid "SuggestedColors|Slightly desaturated green"
+msgstr ""
+
+msgid "SuggestedColors|Soft orange"
+msgstr ""
+
+msgid "SuggestedColors|Soft red"
+msgstr ""
+
+msgid "SuggestedColors|Strong pink"
+msgstr ""
+
+msgid "SuggestedColors|Strong red"
+msgstr ""
+
+msgid "SuggestedColors|Strong yellow"
+msgstr ""
+
+msgid "SuggestedColors|UA blue"
+msgstr ""
+
+msgid "SuggestedColors|Very dark desaturated blue"
+msgstr ""
+
+msgid "SuggestedColors|Very dark lime green"
+msgstr ""
+
+msgid "SuggestedColors|Very pale orange"
+msgstr ""
+
+msgid "SuggestedColors|lime green"
+msgstr ""
+
 msgid "Sunday"
 msgstr ""