Add aria-label and tooltip to the emoji picker

- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/68297

Changelog: changed

app/assets/javascripts/emoji/components/picker.vue

@@ -108,6 +108,7 @@ export default {
         class="gl-mx-5! gl-mb-2!"
         autofocus
         debounce="500"
+        :aria-label="__('Search for an emoji')"
         @input="onSearchInput"
       />
       <div

app/assets/javascripts/vue_shared/components/awards_list.vue

@@ -199,12 +199,15 @@ export default {
     <div v-if="canAwardEmoji" class="award-menu-holder gl-my-2">
       <emoji-picker
         v-if="glFeatures.improvedEmojiPicker"
+        v-gl-tooltip.viewport
+        :title="__('Add reaction')"
         :toggle-class="['add-reaction-button btn-icon gl-relative!', { 'is-active': isMenuOpen }]"
         @click="handleAward"
         @shown="setIsMenuOpen(true)"
         @hidden="setIsMenuOpen(false)"
       >
         <template #button-content>
+          <span class="gl-sr-only">{{ __('Add reaction') }}</span>
           <span class="reaction-control-icon reaction-control-icon-neutral">
             <gl-icon name="slight-smile" />
           </span>

locale/gitlab.pot

@@ -32027,6 +32027,9 @@ msgstr ""
 msgid "Search for a user"
 msgstr ""
 
+msgid "Search for an emoji"
+msgstr ""
+
 msgid "Search for projects, issues, etc."
 msgstr ""