From d76e0b9d3d5c7a06d2d16130b88e25136aebff88 Mon Sep 17 00:00:00 2001
From: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Date: Thu, 20 Feb 2025 02:24:59 +0530
Subject: [PATCH] [MM-61616]: Add tab roles inside Emoji Picker (#29902)

* MM-61616: Add tab roles inside Emoji Picker

* MM-61616: Update snapshot tests

* MM-61616: Update emoji_picker_category E2E

* MM-61616: Minor aria properties changes

* [MM-61616]: Removed tab roles from emoji picker and added aria-pressed attribute in button

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../__snapshots__/emoji_picker.test.tsx.snap  | 80 +++++++++----------
 .../emoji_picker_category.test.tsx.snap       |  8 +-
 .../components/emoji_picker_category.test.tsx |  4 +-
 .../components/emoji_picker_category.tsx      |  8 +-
 4 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap b/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap
index 4359f2d642..1e0d58fb9d 100644
--- a/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap
+++ b/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap
@@ -38,96 +38,96 @@ exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = `
       class="emoji-picker__categories"
       id="emojiPickerCategories"
     >
-      <a
+      <button
         aria-label="Smileys & Emotion"
-        class="emoji-picker__category emoji-picker__category--selected"
-        href="#"
+        aria-pressed="true"
+        class="style--none emoji-picker__category emoji-picker__category--selected"
       >
         <i
           class="icon-emoticon-happy-outline"
         />
-      </a>
-      <a
+      </button>
+      <button
         aria-label="People & Body"
-        class="emoji-picker__category"
-        href="#"
+        aria-pressed="false"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-account-outline"
         />
-      </a>
-      <a
+      </button>
+      <button
         aria-label="Animals & Nature"
-        class="emoji-picker__category"
-        href="#"
+        aria-pressed="false"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-leaf-outline"
         />
-      </a>
-      <a
+      </button>
+      <button
         aria-label="Food & Drink"
-        class="emoji-picker__category"
-        href="#"
+        aria-pressed="false"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-food-apple"
         />
-      </a>
-      <a
+      </button>
+      <button
         aria-label="Travel & Places"
-        class="emoji-picker__category"
-        href="#"
+        aria-pressed="false"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-airplane-variant"
         />
-      </a>
-      <a
+      </button>
+      <button
         aria-label="Activities"
-        class="emoji-picker__category"
-        href="#"
+        aria-pressed="false"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-basketball"
         />
-      </a>
-      <a
+      </button>
+      <button
         aria-label="Objects"
-        class="emoji-picker__category"
-        href="#"
+        aria-pressed="false"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-lightbulb-outline"
         />
-      </a>
-      <a
+      </button>
+      <button
         aria-label="Symbols"
-        class="emoji-picker__category"
-        href="#"
+        aria-pressed="false"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-heart-outline"
         />
-      </a>
-      <a
+      </button>
+      <button
         aria-label="Flags"
-        class="emoji-picker__category"
-        href="#"
+        aria-pressed="false"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-flag-outline"
         />
-      </a>
-      <a
+      </button>
+      <button
         aria-label="Custom"
-        class="emoji-picker__category"
-        href="#"
+        aria-pressed="false"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-emoticon-custom-outline"
         />
-      </a>
+      </button>
     </div>
     <div
       class="emoji-picker__items"
diff --git a/webapp/channels/src/components/emoji_picker/components/__snapshots__/emoji_picker_category.test.tsx.snap b/webapp/channels/src/components/emoji_picker/components/__snapshots__/emoji_picker_category.test.tsx.snap
index 248ef4c84e..0456c48df2 100644
--- a/webapp/channels/src/components/emoji_picker/components/__snapshots__/emoji_picker_category.test.tsx.snap
+++ b/webapp/channels/src/components/emoji_picker/components/__snapshots__/emoji_picker_category.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`EmojiPickerCategory should match snapshot 1`] = `
 <DocumentFragment>
-  <a
+  <button
     aria-label="category name"
-    class="emoji-picker__category"
-    href="#"
+    aria-pressed="false"
+    class="style--none emoji-picker__category"
   >
     <i
       class="categoryClass"
     />
-  </a>
+  </button>
 </DocumentFragment>
 `;
diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.test.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.test.tsx
index 69d54f293d..2f014facd0 100644
--- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.test.tsx
+++ b/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.test.tsx
@@ -43,14 +43,14 @@ describe('EmojiPickerCategory', () => {
         renderWithContext(<EmojiPickerCategory {...props}/>);
 
         // TODO: Change when we actually disabled the element when enable is false
-        expect(screen.getByRole('link')).toHaveClass('emoji-picker__category disable');
+        expect(screen.getByRole('button')).toHaveClass('emoji-picker__category disable');
     });
 
     test('should have tooltip on hover', async () => {
         renderWithContext(<EmojiPickerCategory {...defaultProps}/>);
 
         await act(async () => {
-            const emojiPickerCategory = screen.getByRole('link');
+            const emojiPickerCategory = screen.getByRole('button');
             userEvent.hover(emojiPickerCategory);
             await new Promise((resolve) => setTimeout(resolve, 1000));
         });
diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.tsx
index 2427119bb4..b2ac5b14c2 100644
--- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.tsx
+++ b/webapp/channels/src/components/emoji_picker/components/emoji_picker_category.tsx
@@ -42,14 +42,14 @@ function EmojiPickerCategory({category, categoryRowIndex, selected, enable, onCl
                 <FormattedMessage {...category.label}/>
             }
         >
-            <a
-                className={className}
-                href='#'
+            <button
+                aria-pressed={selected}
+                className={classNames('style--none', className)}
                 onClick={handleClick}
                 aria-label={intl.formatMessage(category.label)}
             >
                 <i className={category.iconClassName}/>
-            </a>
+            </button>
         </WithTooltip>
     );
 }