[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>

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"
+        aria-pressed="true"
-        href="#"
+        class="style--none emoji-picker__category emoji-picker__category--selected"
       >
         <i
           class="icon-emoticon-happy-outline"
         />
-      </a>
+      </button>
-      <a
+      <button
         aria-label="People & Body"
-        class="emoji-picker__category"
+        aria-pressed="false"
-        href="#"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-account-outline"
         />
-      </a>
+      </button>
-      <a
+      <button
         aria-label="Animals & Nature"
-        class="emoji-picker__category"
+        aria-pressed="false"
-        href="#"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-leaf-outline"
         />
-      </a>
+      </button>
-      <a
+      <button
         aria-label="Food & Drink"
-        class="emoji-picker__category"
+        aria-pressed="false"
-        href="#"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-food-apple"
         />
-      </a>
+      </button>
-      <a
+      <button
         aria-label="Travel & Places"
-        class="emoji-picker__category"
+        aria-pressed="false"
-        href="#"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-airplane-variant"
         />
-      </a>
+      </button>
-      <a
+      <button
         aria-label="Activities"
-        class="emoji-picker__category"
+        aria-pressed="false"
-        href="#"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-basketball"
         />
-      </a>
+      </button>
-      <a
+      <button
         aria-label="Objects"
-        class="emoji-picker__category"
+        aria-pressed="false"
-        href="#"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-lightbulb-outline"
         />
-      </a>
+      </button>
-      <a
+      <button
         aria-label="Symbols"
-        class="emoji-picker__category"
+        aria-pressed="false"
-        href="#"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-heart-outline"
         />
-      </a>
+      </button>
-      <a
+      <button
         aria-label="Flags"
-        class="emoji-picker__category"
+        aria-pressed="false"
-        href="#"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-flag-outline"
         />
-      </a>
+      </button>
-      <a
+      <button
         aria-label="Custom"
-        class="emoji-picker__category"
+        aria-pressed="false"
-        href="#"
+        class="style--none emoji-picker__category"
       >
         <i
           class="icon-emoticon-custom-outline"
         />
-      </a>
+      </button>
     </div>
     <div
       class="emoji-picker__items"

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"
+    aria-pressed="false"
-    href="#"
+    class="style--none emoji-picker__category"
   >
     <i
       class="categoryClass"
     />
-  </a>
+  </button>
 </DocumentFragment>
 `;

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));
         });

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
+            <button
-                className={className}
+                aria-pressed={selected}
-                href='#'
+                className={classNames('style--none', className)}
                 onClick={handleClick}
                 aria-label={intl.formatMessage(category.label)}
             >
                 <i className={category.iconClassName}/>
-            </a>
+            </button>
         </WithTooltip>
     );
 }