MM-54404 : E2E tests for the Gif picker (#24486)

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx

@@ -232,10 +232,6 @@ const AdvanceTextEditor = ({
     };
 
     let emojiPicker = null;
-    const emojiButtonAriaLabel = formatMessage({
-        id: 'emoji_picker.emojiPicker',
-        defaultMessage: 'Emoji Picker',
-    }).toLowerCase();
 
     if (enableEmojiPicker && !readOnlyChannel) {
         const emojiPickerTooltip = (
@@ -269,7 +265,7 @@ const AdvanceTextEditor = ({
                         ref={emojiPickerRef}
                         onClick={toggleEmojiPicker}
                         type='button'
-                        aria-label={emojiButtonAriaLabel}
+                        aria-label={formatMessage({id: 'emoji_picker.emojiPicker.button.ariaLabel', defaultMessage: 'select an emoji'})}
                         disabled={shouldShowPreview}
                         className={classNames({active: showEmojiPicker})}
                     >

webapp/channels/src/components/edit_post/edit_post.tsx

@@ -446,10 +446,6 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft,
     const getEmojiTargetRef = useCallback(() => emojiButtonRef.current, [emojiButtonRef]);
 
     let emojiPicker = null;
-    const emojiButtonAriaLabel = formatMessage({
-        id: 'emoji_picker.emojiPicker',
-        defaultMessage: 'Emoji Picker',
-    }).toLowerCase();
 
     if (config.EnableEmojiPicker === 'true') {
         emojiPicker = (
@@ -466,7 +462,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft,
                     rightOffset={RIGHT_OFFSET}
                 />
                 <button
-                    aria-label={emojiButtonAriaLabel}
+                    aria-label={formatMessage({id: 'emoji_picker.emojiPicker.button.ariaLabel', defaultMessage: 'select an emoji'})}
                     id='editPostEmoji'
                     ref={emojiButtonRef}
                     className='style--none post-action'

webapp/channels/src/components/emoji_picker/emoji_picker_tabs.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import type {CSSProperties, RefObject} from 'react';
 import React, {PureComponent, createRef} from 'react';
 import {Tab, Tabs} from 'react-bootstrap';
@@ -90,17 +91,15 @@ export default class EmojiPickerTabs extends PureComponent<Props, State> {
             }
         }
 
-        let pickerClass = 'emoji-picker';
-        if (this.props.placement === 'bottom') {
-            pickerClass += ' bottom';
-        }
-
         if (this.props.enableGifPicker && typeof this.props.onGifClick != 'undefined') {
             return (
                 <div
+                    id='emojiGifPicker'
                     ref={this.rootPickerNodeRef}
                     style={pickerStyle}
-                    className={pickerClass}
+                    className={classNames('a11y__popup', 'emoji-picker', {
+                        bottom: this.props.placement === 'bottom',
+                    })}
                 >
                     <Tabs
                         id='emoji-picker-tabs'
@@ -167,7 +166,9 @@ export default class EmojiPickerTabs extends PureComponent<Props, State> {
             <div
                 id='emojiPicker'
                 style={pickerStyle}
-                className={`a11y__popup ${pickerClass} emoji-picker--single`}
+                className={classNames('a11y__popup', 'emoji-picker', 'emoji-picker--single', {
+                    bottom: this.props.placement === 'bottom',
+                })}
             >
                 <EmojiPickerHeader handleEmojiPickerClose={this.handleEmojiPickerClose}/>
                 <EmojiPicker

webapp/channels/src/i18n/en.json

@@ -3384,7 +3384,7 @@
   "emoji_picker.close": "Close",
   "emoji_picker.custom": "Custom",
   "emoji_picker.custom_emoji": "Custom Emoji",
-  "emoji_picker.emojiPicker": "Select an Emoji",
+  "emoji_picker.emojiPicker.button.ariaLabel": "select an emoji",
   "emoji_picker.emojiPicker.previewPlaceholder": "Select an Emoji",
   "emoji_picker.flags": "Flags",
   "emoji_picker.food-drink": "Food & Drink",