[MA-14]: Update styles

Brightscout · Dec 13, 2024 · ec522d2 · ec522d2
1 parent 70c5e7f
commit ec522d2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 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
@@ -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
@@ -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
@@ -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;