From ec522d29f56c66c7b7b194145a6bb707973dbc2e Mon Sep 17 00:00:00 2001
From: SaurabhSharma-884 <saurabh.sharma@brightscout.com>
Date: Fri, 13 Dec 2024 16:44:06 +0530
Subject: [PATCH] [MA-14]: Update styles

---
 .../components/emoji_picker_item.tsx          | 21 +++++++++----------
 .../components/emoji_picker/emoji_picker.tsx  |  1 +
 .../src/sass/components/_emoticons.scss       |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_item.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_item.tsx
index 91a277dce37..3a7c310074f 100644
--- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_item.tsx
+++ b/webapp/channels/src/components/emoji_picker/components/emoji_picker_item.tsx
@@ -55,7 +55,6 @@ function EmojiPickerItem({emoji, rowIndex, isSelected, onClick, onMouseOver}: Pr
     let content;
 
     if (isSystemEmoji(emoji)) {
-        const emojiName = emoji.short_name ? emoji.short_name : emoji.name;
         const emojiUnified = emoji.unified ? emoji.unified.toLowerCase() : emoji.name.toLowerCase();
 
         content = (
@@ -65,15 +64,6 @@ function EmojiPickerItem({emoji, rowIndex, isSelected, onClick, onMouseOver}: Pr
                 src={imgTrans}
                 className={`emojisprite emoji-category-${emoji.category} emoji-${emojiUnified}`}
                 id={`emoji-${emojiUnified}`}
-                aria-label={formatMessage(
-                    {
-                        id: 'emoji_picker_item.emoji_aria_label',
-                        defaultMessage: '{emojiName} emoji',
-                    },
-                    {
-                        emojiName: (emojiName).replace(/_/g, ' '),
-                    },
-                )}
             />
         );
     } else {
@@ -95,7 +85,16 @@ function EmojiPickerItem({emoji, rowIndex, isSelected, onClick, onMouseOver}: Pr
             data-testid='emojiItem'
             tabIndex={-1}
             type='button'
-            aria-label={isSystemEmoji(emoji) ? emoji.short_name : emoji.name}
+            id={emoji.name.toLocaleLowerCase().replaceAll(' ', '_')}
+            aria-label={formatMessage(
+                {
+                    id: 'emoji_picker_item.emoji_aria_label',
+                    defaultMessage: '{emojiName} emoji',
+                },
+                {
+                    emojiName: (isSystemEmoji(emoji) ? emoji.short_name : emoji.name).replace(/_/g, ' '),
+                },
+            )}
         >
             {content}
         </button>
diff --git a/webapp/channels/src/components/emoji_picker/emoji_picker.tsx b/webapp/channels/src/components/emoji_picker/emoji_picker.tsx
index f846fac5120..f93b7b31233 100644
--- a/webapp/channels/src/components/emoji_picker/emoji_picker.tsx
+++ b/webapp/channels/src/components/emoji_picker/emoji_picker.tsx
@@ -337,6 +337,7 @@ const EmojiPicker = ({
             return;
         }
 
+        searchInputRef.current?.setAttribute('aria-activedescendant', newCursorEmoji.name.toLocaleLowerCase().replaceAll(' ', '_'));
         setCursor({
             rowIndex: newCursor.rowIndex,
             emojiId: newCursor.emojiId,
diff --git a/webapp/channels/src/sass/components/_emoticons.scss b/webapp/channels/src/sass/components/_emoticons.scss
index 4a87a5deb95..0a1fc3737f3 100644
--- a/webapp/channels/src/sass/components/_emoticons.scss
+++ b/webapp/channels/src/sass/components/_emoticons.scss
@@ -538,7 +538,7 @@ $emoji-footer-height:  $emoji-footer-border-width + $emoji-half-height + $emoji-
     height: 36px;
     align-items: center;
     justify-content: center;
-    border:none;
+    border: none;
     border-radius: 3px;
     background-color: transparent;
     cursor: pointer;