Merge branch '212443-enhance-emoji-icon-for-screen-readers' into 'master'

Resolve "Enhance emoji icon for screen readers"

Closes #212443

See merge request gitlab-org/gitlab!28008

ee/app/views/layouts/header/_buy_ci_minutes.html.haml

@@ -3,4 +3,4 @@
 %li
   = link_to profile_pipeline_quota_path, class: 'ci-minutes-emoji' do
     = s_("CurrentUser|Buy CI minutes")
-    = emoji_icon('clock9')
+    = emoji_icon('clock9', 'aria-hidden': true)

lib/gitlab/emoji.rb

@@ -45,7 +45,7 @@ module Gitlab
     end
 
     # CSS sprite fallback takes precedence over image fallback
-    def gl_emoji_tag(name)
+    def gl_emoji_tag(name, options = {})
       emoji_name = emojis_aliases[name] || name
       emoji_info = emojis[emoji_name]
       return unless emoji_info
@@ -54,8 +54,9 @@ module Gitlab
         name: emoji_name,
         unicode_version: emoji_unicode_version(emoji_name)
       }
+      options = { title: emoji_info['description'], data: data }.merge(options)
 
-      ActionController::Base.helpers.content_tag('gl-emoji', emoji_info['moji'], title: emoji_info['description'], data: data)
+      ActionController::Base.helpers.content_tag('gl-emoji', emoji_info['moji'], options)
     end
 
     private

spec/helpers/emoji_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe EmojiHelper do
+  describe '#emoji_icon' do
+    let(:options) { {} }
+    let(:emoji_text) { 'rocket' }
+    let(:aria_hidden_option) { "aria-hidden=\"true\"" }
+
+    subject { helper.emoji_icon(emoji_text, options) }
+
+    it 'has no options' do
+      is_expected.to include('<gl-emoji',
+                             "title=\"#{emoji_text}\"",
+                             "data-name=\"#{emoji_text}\"",
+                             "data-unicode-version=\"#{::Gitlab::Emoji.emoji_unicode_version(emoji_text)}\"")
+      is_expected.not_to include(aria_hidden_option)
+    end
+
+    context 'with aria-hidden option' do
+      let(:options) { { 'aria-hidden': true } }
+
+      it 'applies aria-hidden' do
+        is_expected.to include('<gl-emoji',
+                               "title=\"#{emoji_text}\"",
+                               "data-name=\"#{emoji_text}\"",
+                               "data-unicode-version=\"#{::Gitlab::Emoji.emoji_unicode_version(emoji_text)}\"",
+                               aria_hidden_option)
+      end
+    end
+  end
+end