From 28dbc3cabbabfb3b7df3fdca7f352a2faf8f2bc7 Mon Sep 17 00:00:00 2001
From: Saurabh Sharma <saurabh.sharma@brightscout.com>
Date: Mon, 3 Feb 2025 00:20:01 +0530
Subject: [PATCH] [MM-61598]: Fix ARIA roles, states, and properties are valid
 in user profile image and @user buttons (#29692)

* [MA-26]: Fix ARIA roles, states, and properties are valid in user profile image and @user buttons

* [MA-26]: Remove irrelevant e2e tests

* [MA-26]: Remove nested interactive elements

* [MA-26]: Updated mention-link styles

* Minor change

---------

Co-authored-by: ayush-chauhan233 <ayush.chauhan@brightscout.com>
---
 .../accessibility_keyboard_usability_spec.js  |   2 -
 .../accessibility/accessibility_post_spec.js  |   2 +-
 .../admin_user_card.test.tsx.snap             | 116 ++++-----
 .../system_user_detail.test.tsx.snap          | 174 ++++++-------
 .../__snapshots__/at_mention.test.tsx.snap    |  63 ++---
 .../src/components/at_mention/at_mention.tsx  |   9 +-
 .../__snapshots__/panel_body.test.tsx.snap    | 244 ++++++++++--------
 .../src/components/post/post_component.tsx    |   1 -
 .../profile_picture.test.tsx.snap             |  27 +-
 .../src/components/profile_picture/index.tsx  |  34 +--
 .../src/sass/components/_mentions.scss        |   9 +
 11 files changed, 333 insertions(+), 348 deletions(-)

diff --git a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_keyboard_usability_spec.js b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_keyboard_usability_spec.js
index 9877e57b38..f33868da7a 100644
--- a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_keyboard_usability_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_keyboard_usability_spec.js
@@ -156,8 +156,6 @@ describe('Verify Accessibility keyboard usability across different regions in th
                 cy.get(region).should('have.attr', 'role', 'application');
             });
             cy.get('.search__form').should('have.attr', 'role', 'search');
-            cy.get(`#post_${postId}`).children('.post__content').eq(0).should('have.attr', 'role', 'application');
-            cy.get(`#rhsPost_${postId}`).children('.post__content').eq(0).should('have.attr', 'role', 'application');
         });
     });
 });
diff --git a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js
index b71ed0ec78..861ea3c04e 100644
--- a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js
@@ -162,7 +162,7 @@ describe('Verify Accessibility Support in Post', () => {
         cy.getLastPostId().then((postId) => {
             cy.get(`#post_${postId}`).within(() => {
                 // * Verify focus is on profile image
-                cy.get('.status-wrapper button').first().should('be.focused');
+                cy.get('button.status-wrapper').first().should('be.focused');
                 cy.focused().tab();
 
                 // * Verify focus is on the username
diff --git a/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap b/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap
index f8b543c9e9..b7d10df6a7 100644
--- a/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap
@@ -8,26 +8,23 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match d
     <div
       class="AdminUserCard__header"
     >
-      <span
+      <button
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="status-wrapper admin-user-card"
+        class="status-wrapper style--none admin-user-card"
+        style="border-radius: 50%; width: 128px; height: 128px;"
       >
-        <button
-          class="RoundButton-dvlhqG gnYSKj style--none"
+        <span
+          class="profile-icon "
         >
-          <span
-            class="profile-icon "
-          >
-            <img
-              alt="user profile image"
-              class="Avatar Avatar-xxl"
-              loading="lazy"
-              src="/api/v4/users/1234/image"
-            />
-          </span>
-        </button>
-      </span>
+          <img
+            alt="user profile image"
+            class="Avatar Avatar-xxl"
+            loading="lazy"
+            src="/api/v4/users/1234/image"
+          />
+        </span>
+      </button>
       <div
         class="AdminUserCard__user-info"
       >
@@ -69,26 +66,23 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
     <div
       class="AdminUserCard__header"
     >
-      <span
+      <button
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="status-wrapper admin-user-card"
+        class="status-wrapper style--none admin-user-card"
+        style="border-radius: 50%; width: 128px; height: 128px;"
       >
-        <button
-          class="RoundButton-dvlhqG gnYSKj style--none"
+        <span
+          class="profile-icon "
         >
-          <span
-            class="profile-icon "
-          >
-            <img
-              alt="user profile image"
-              class="Avatar Avatar-xxl"
-              loading="lazy"
-              src="/api/v4/users/1234/image"
-            />
-          </span>
-        </button>
-      </span>
+          <img
+            alt="user profile image"
+            class="Avatar Avatar-xxl"
+            loading="lazy"
+            src="/api/v4/users/1234/image"
+          />
+        </span>
+      </button>
       <div
         class="AdminUserCard__user-info"
       >
@@ -125,26 +119,23 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
     <div
       class="AdminUserCard__header"
     >
-      <span
+      <button
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="status-wrapper admin-user-card"
+        class="status-wrapper style--none admin-user-card"
+        style="border-radius: 50%; width: 128px; height: 128px;"
       >
-        <button
-          class="RoundButton-dvlhqG gnYSKj style--none"
+        <span
+          class="profile-icon "
         >
-          <span
-            class="profile-icon "
-          >
-            <img
-              alt="user profile image"
-              class="Avatar Avatar-xxl"
-              loading="lazy"
-              src="/api/v4/users/1234/image"
-            />
-          </span>
-        </button>
-      </span>
+          <img
+            alt="user profile image"
+            class="Avatar Avatar-xxl"
+            loading="lazy"
+            src="/api/v4/users/1234/image"
+          />
+        </span>
+      </button>
       <div
         class="AdminUserCard__user-info"
       >
@@ -179,26 +170,23 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
     <div
       class="AdminUserCard__header"
     >
-      <span
+      <button
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="status-wrapper admin-user-card"
+        class="status-wrapper style--none admin-user-card"
+        style="border-radius: 50%; width: 128px; height: 128px;"
       >
-        <button
-          class="RoundButton-dvlhqG gnYSKj style--none"
+        <span
+          class="profile-icon "
         >
-          <span
-            class="profile-icon "
-          >
-            <img
-              alt="user profile image"
-              class="Avatar Avatar-xxl"
-              loading="lazy"
-              src="/api/v4/users/1234/image"
-            />
-          </span>
-        </button>
-      </span>
+          <img
+            alt="user profile image"
+            class="Avatar Avatar-xxl"
+            loading="lazy"
+            src="/api/v4/users/1234/image"
+          />
+        </span>
+      </button>
       <div
         class="AdminUserCard__user-info"
       >
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
index f38211d9c7..375df66329 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
@@ -28,26 +28,23 @@ exports[`SystemUserDetail should match default snapshot 1`] = `
           <div
             class="AdminUserCard__header"
           >
-            <span
+            <button
               aria-expanded="false"
               aria-haspopup="dialog"
-              class="status-wrapper admin-user-card"
+              class="status-wrapper style--none admin-user-card"
+              style="border-radius: 50%; width: 128px; height: 128px;"
             >
-              <button
-                class="RoundButton-dvlhqG gnYSKj style--none"
+              <span
+                class="profile-icon "
               >
-                <span
-                  class="profile-icon "
-                >
-                  <img
-                    alt="user profile image"
-                    class="Avatar Avatar-xxl"
-                    loading="lazy"
-                    src="/api/v4/users/user_id/image"
-                  />
-                </span>
-              </button>
-            </span>
+                <img
+                  alt="user profile image"
+                  class="Avatar Avatar-xxl"
+                  loading="lazy"
+                  src="/api/v4/users/user_id/image"
+                />
+              </span>
+            </button>
             <div
               class="AdminUserCard__user-info"
             >
@@ -240,26 +237,23 @@ exports[`SystemUserDetail should match snapshot if MFA is enabled 1`] = `
           <div
             class="AdminUserCard__header"
           >
-            <span
+            <button
               aria-expanded="false"
               aria-haspopup="dialog"
-              class="status-wrapper admin-user-card"
+              class="status-wrapper style--none admin-user-card"
+              style="border-radius: 50%; width: 128px; height: 128px;"
             >
-              <button
-                class="RoundButton-dvlhqG gnYSKj style--none"
+              <span
+                class="profile-icon "
               >
-                <span
-                  class="profile-icon "
-                >
-                  <img
-                    alt="user profile image"
-                    class="Avatar Avatar-xxl"
-                    loading="lazy"
-                    src="/api/v4/users/user_id/image"
-                  />
-                </span>
-              </button>
-            </span>
+                <img
+                  alt="user profile image"
+                  class="Avatar Avatar-xxl"
+                  loading="lazy"
+                  src="/api/v4/users/user_id/image"
+                />
+              </span>
+            </button>
             <div
               class="AdminUserCard__user-info"
             >
@@ -452,26 +446,23 @@ exports[`SystemUserDetail should not show manage user settings button when user
           <div
             class="AdminUserCard__header"
           >
-            <span
+            <button
               aria-expanded="false"
               aria-haspopup="dialog"
-              class="status-wrapper admin-user-card"
+              class="status-wrapper style--none admin-user-card"
+              style="border-radius: 50%; width: 128px; height: 128px;"
             >
-              <button
-                class="RoundButton-dvlhqG gnYSKj style--none"
+              <span
+                class="profile-icon "
               >
-                <span
-                  class="profile-icon "
-                >
-                  <img
-                    alt="user profile image"
-                    class="Avatar Avatar-xxl"
-                    loading="lazy"
-                    src="/api/v4/users/user_id/image"
-                  />
-                </span>
-              </button>
-            </span>
+                <img
+                  alt="user profile image"
+                  class="Avatar Avatar-xxl"
+                  loading="lazy"
+                  src="/api/v4/users/user_id/image"
+                />
+              </span>
+            </button>
             <div
               class="AdminUserCard__user-info"
             >
@@ -664,26 +655,23 @@ exports[`SystemUserDetail should show manage user settings button as activated 1
           <div
             class="AdminUserCard__header"
           >
-            <span
+            <button
               aria-expanded="false"
               aria-haspopup="dialog"
-              class="status-wrapper admin-user-card"
+              class="status-wrapper style--none admin-user-card"
+              style="border-radius: 50%; width: 128px; height: 128px;"
             >
-              <button
-                class="RoundButton-dvlhqG gnYSKj style--none"
+              <span
+                class="profile-icon "
               >
-                <span
-                  class="profile-icon "
-                >
-                  <img
-                    alt="user profile image"
-                    class="Avatar Avatar-xxl"
-                    loading="lazy"
-                    src="/api/v4/users/user_id/image"
-                  />
-                </span>
-              </button>
-            </span>
+                <img
+                  alt="user profile image"
+                  class="Avatar Avatar-xxl"
+                  loading="lazy"
+                  src="/api/v4/users/user_id/image"
+                />
+              </span>
+            </button>
             <div
               class="AdminUserCard__user-info"
             >
@@ -881,26 +869,23 @@ exports[`SystemUserDetail should show manage user settings button as disabled wh
           <div
             class="AdminUserCard__header"
           >
-            <span
+            <button
               aria-expanded="false"
               aria-haspopup="dialog"
-              class="status-wrapper admin-user-card"
+              class="status-wrapper style--none admin-user-card"
+              style="border-radius: 50%; width: 128px; height: 128px;"
             >
-              <button
-                class="RoundButton-dvlhqG gnYSKj style--none"
+              <span
+                class="profile-icon "
               >
-                <span
-                  class="profile-icon "
-                >
-                  <img
-                    alt="user profile image"
-                    class="Avatar Avatar-xxl"
-                    loading="lazy"
-                    src="/api/v4/users/user_id/image"
-                  />
-                </span>
-              </button>
-            </span>
+                <img
+                  alt="user profile image"
+                  class="Avatar Avatar-xxl"
+                  loading="lazy"
+                  src="/api/v4/users/user_id/image"
+                />
+              </span>
+            </button>
             <div
               class="AdminUserCard__user-info"
             >
@@ -1093,26 +1078,23 @@ exports[`SystemUserDetail should show the activate user button as disabled when
           <div
             class="AdminUserCard__header"
           >
-            <span
+            <button
               aria-expanded="false"
               aria-haspopup="dialog"
-              class="status-wrapper admin-user-card"
+              class="status-wrapper style--none admin-user-card"
+              style="border-radius: 50%; width: 128px; height: 128px;"
             >
-              <button
-                class="RoundButton-dvlhqG gnYSKj style--none"
+              <span
+                class="profile-icon "
               >
-                <span
-                  class="profile-icon "
-                >
-                  <img
-                    alt="user profile image"
-                    class="Avatar Avatar-xxl"
-                    loading="lazy"
-                    src="/api/v4/users/user_id/image"
-                  />
-                </span>
-              </button>
-            </span>
+                <img
+                  alt="user profile image"
+                  class="Avatar Avatar-xxl"
+                  loading="lazy"
+                  src="/api/v4/users/user_id/image"
+                />
+              </span>
+            </button>
             <div
               class="AdminUserCard__user-info"
             >
diff --git a/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap b/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
index 24dad75450..c2826dd19b 100644
--- a/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
+++ b/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
@@ -96,16 +96,15 @@ exports[`components/AtMention should match snapshot when mentioning current user
   <ProfilePopoverController
     returnFocus={[Function]}
     src="/api/v4/users/abc1/image"
-    triggerComponentClass="mention--highlight"
+    triggerComponentAs="button"
+    triggerComponentClass="style--none mention--highlight"
     userId="abc1"
   >
-    <a
+    <span
       className="mention-link"
-      role="button"
-      tabIndex={0}
     >
       @First Last
-    </a>
+    </span>
   </ProfilePopoverController>
 </Fragment>
 `;
@@ -115,16 +114,15 @@ exports[`components/AtMention should match snapshot when mentioning user 1`] = `
   <ProfilePopoverController
     returnFocus={[Function]}
     src="/api/v4/users/abc2/image"
-    triggerComponentClass=""
+    triggerComponentAs="button"
+    triggerComponentClass="style--none"
     userId="abc2"
   >
-    <a
+    <span
       className="mention-link"
-      role="button"
-      tabIndex={0}
     >
       @Nick
-    </a>
+    </span>
   </ProfilePopoverController>
 </Fragment>
 `;
@@ -134,16 +132,15 @@ exports[`components/AtMention should match snapshot when mentioning user contain
   <ProfilePopoverController
     returnFocus={[Function]}
     src="/api/v4/users/abc3/image"
-    triggerComponentClass=""
+    triggerComponentAs="button"
+    triggerComponentClass="style--none"
     userId="abc3"
   >
-    <a
+    <span
       className="mention-link"
-      role="button"
-      tabIndex={0}
     >
       @Dot Matrix
-    </a>
+    </span>
   </ProfilePopoverController>
   .
 </Fragment>
@@ -154,16 +151,15 @@ exports[`components/AtMention should match snapshot when mentioning user contain
   <ProfilePopoverController
     returnFocus={[Function]}
     src="/api/v4/users/abc3/image"
-    triggerComponentClass=""
+    triggerComponentAs="button"
+    triggerComponentClass="style--none"
     userId="abc3"
   >
-    <a
+    <span
       className="mention-link"
-      role="button"
-      tabIndex={0}
     >
       @Dot Matrix
-    </a>
+    </span>
   </ProfilePopoverController>
 </Fragment>
 `;
@@ -173,16 +169,15 @@ exports[`components/AtMention should match snapshot when mentioning user followe
   <ProfilePopoverController
     returnFocus={[Function]}
     src="/api/v4/users/abc2/image"
-    triggerComponentClass=""
+    triggerComponentAs="button"
+    triggerComponentClass="style--none"
     userId="abc2"
   >
-    <a
+    <span
       className="mention-link"
-      role="button"
-      tabIndex={0}
     >
       @Nick
-    </a>
+    </span>
   </ProfilePopoverController>
   ...
 </Fragment>
@@ -193,16 +188,15 @@ exports[`components/AtMention should match snapshot when mentioning user with di
   <ProfilePopoverController
     returnFocus={[Function]}
     src="/api/v4/users/abc2/image"
-    triggerComponentClass=""
+    triggerComponentAs="button"
+    triggerComponentClass="style--none"
     userId="abc2"
   >
-    <a
+    <span
       className="mention-link"
-      role="button"
-      tabIndex={0}
     >
       @user1
-    </a>
+    </span>
   </ProfilePopoverController>
 </Fragment>
 `;
@@ -212,16 +206,15 @@ exports[`components/AtMention should match snapshot when mentioning user with mi
   <ProfilePopoverController
     returnFocus={[Function]}
     src="/api/v4/users/abc2/image"
-    triggerComponentClass=""
+    triggerComponentAs="button"
+    triggerComponentClass="style--none"
     userId="abc2"
   >
-    <a
+    <span
       className="mention-link"
-      role="button"
-      tabIndex={0}
     >
       @Nick
-    </a>
+    </span>
   </ProfilePopoverController>
 </Fragment>
 `;
diff --git a/webapp/channels/src/components/at_mention/at_mention.tsx b/webapp/channels/src/components/at_mention/at_mention.tsx
index 93deefe497..dff776be61 100644
--- a/webapp/channels/src/components/at_mention/at_mention.tsx
+++ b/webapp/channels/src/components/at_mention/at_mention.tsx
@@ -60,20 +60,19 @@ const AtMention = (props: Props) => {
         return (
             <>
                 <ProfilePopover
-                    triggerComponentClass={classNames({'mention--highlight': highlightMention})}
+                    triggerComponentClass={classNames('style--none', {'mention--highlight': highlightMention})}
                     userId={user.id}
                     src={Client4.getProfilePictureUrl(user.id, user.last_picture_update)}
                     channelId={props.channelId}
                     returnFocus={returnFocus}
+                    triggerComponentAs='button'
                 >
-                    <a
+                    <span
                         ref={ref}
                         className='mention-link'
-                        role='button'
-                        tabIndex={0}
                     >
                         {'@' + userDisplayName}
-                    </a>
+                    </span>
                 </ProfilePopover>
                 {userMentionNameSuffix}
             </>
diff --git a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
index e701adff24..c53c3c4549 100644
--- a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
@@ -40,47 +40,52 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
           <ProfilePopoverController
             channelId="channel_id"
             src="/api/v4/users/user_id/image?_=0"
-            triggerComponentClass="status-wrapper"
+            triggerComponentAs="button"
+            triggerComponentClass="status-wrapper style--none"
+            triggerComponentStyle={
+              Object {
+                "borderRadius": "50%",
+                "height": "32px",
+                "width": "32px",
+              }
+            }
             userId="user_id"
             username="username"
           >
-            <span
+            <button
               aria-expanded="false"
               aria-haspopup="dialog"
-              className="status-wrapper"
+              className="status-wrapper style--none"
               onClick={[Function]}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
               onPointerDown={[Function]}
+              style={
+                Object {
+                  "borderRadius": "50%",
+                  "height": "32px",
+                  "width": "32px",
+                }
+              }
             >
-              <RoundButton
-                className="style--none"
-                size="md"
+              <span
+                className="profile-icon "
               >
-                <button
-                  className="RoundButton-dvlhqG gfRzmz style--none"
+                <Avatar
                   size="md"
+                  url="/api/v4/users/user_id/image?_=0"
+                  username="username"
                 >
-                  <span
-                    className="profile-icon "
-                  >
-                    <Avatar
-                      size="md"
-                      url="/api/v4/users/user_id/image?_=0"
-                      username="username"
-                    >
-                      <img
-                        alt="username profile image"
-                        className="Avatar Avatar-md"
-                        loading="lazy"
-                        onError={[Function]}
-                        src="/api/v4/users/user_id/image?_=0"
-                      />
-                    </Avatar>
-                  </span>
-                </button>
-              </RoundButton>
+                  <img
+                    alt="username profile image"
+                    className="Avatar Avatar-md"
+                    loading="lazy"
+                    onError={[Function]}
+                    src="/api/v4/users/user_id/image?_=0"
+                  />
+                </Avatar>
+              </span>
               <Memo(StatusIcon)
                 status="status"
               >
@@ -113,7 +118,7 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                   </span>
                 </StatusOfflineIcon>
               </Memo(StatusIcon)>
-            </span>
+            </button>
           </ProfilePopoverController>
         </ProfilePicture>
       </div>
@@ -267,47 +272,52 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
           <ProfilePopoverController
             channelId="channel_id"
             src="/api/v4/users/user_id/image?_=0"
-            triggerComponentClass="status-wrapper"
+            triggerComponentAs="button"
+            triggerComponentClass="status-wrapper style--none"
+            triggerComponentStyle={
+              Object {
+                "borderRadius": "50%",
+                "height": "32px",
+                "width": "32px",
+              }
+            }
             userId="user_id"
             username="username"
           >
-            <span
+            <button
               aria-expanded="false"
               aria-haspopup="dialog"
-              className="status-wrapper"
+              className="status-wrapper style--none"
               onClick={[Function]}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
               onPointerDown={[Function]}
+              style={
+                Object {
+                  "borderRadius": "50%",
+                  "height": "32px",
+                  "width": "32px",
+                }
+              }
             >
-              <RoundButton
-                className="style--none"
-                size="md"
+              <span
+                className="profile-icon "
               >
-                <button
-                  className="RoundButton-dvlhqG gfRzmz style--none"
+                <Avatar
                   size="md"
+                  url="/api/v4/users/user_id/image?_=0"
+                  username="username"
                 >
-                  <span
-                    className="profile-icon "
-                  >
-                    <Avatar
-                      size="md"
-                      url="/api/v4/users/user_id/image?_=0"
-                      username="username"
-                    >
-                      <img
-                        alt="username profile image"
-                        className="Avatar Avatar-md"
-                        loading="lazy"
-                        onError={[Function]}
-                        src="/api/v4/users/user_id/image?_=0"
-                      />
-                    </Avatar>
-                  </span>
-                </button>
-              </RoundButton>
+                  <img
+                    alt="username profile image"
+                    className="Avatar Avatar-md"
+                    loading="lazy"
+                    onError={[Function]}
+                    src="/api/v4/users/user_id/image?_=0"
+                  />
+                </Avatar>
+              </span>
               <Memo(StatusIcon)
                 status="status"
               >
@@ -340,7 +350,7 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                   </span>
                 </StatusOfflineIcon>
               </Memo(StatusIcon)>
-            </span>
+            </button>
           </ProfilePopoverController>
         </ProfilePicture>
       </div>
@@ -500,47 +510,52 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
           <ProfilePopoverController
             channelId="channel_id"
             src="/api/v4/users/user_id/image?_=0"
-            triggerComponentClass="status-wrapper"
+            triggerComponentAs="button"
+            triggerComponentClass="status-wrapper style--none"
+            triggerComponentStyle={
+              Object {
+                "borderRadius": "50%",
+                "height": "32px",
+                "width": "32px",
+              }
+            }
             userId="user_id"
             username="username"
           >
-            <span
+            <button
               aria-expanded="false"
               aria-haspopup="dialog"
-              className="status-wrapper"
+              className="status-wrapper style--none"
               onClick={[Function]}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
               onPointerDown={[Function]}
+              style={
+                Object {
+                  "borderRadius": "50%",
+                  "height": "32px",
+                  "width": "32px",
+                }
+              }
             >
-              <RoundButton
-                className="style--none"
-                size="md"
+              <span
+                className="profile-icon "
               >
-                <button
-                  className="RoundButton-dvlhqG gfRzmz style--none"
+                <Avatar
                   size="md"
+                  url="/api/v4/users/user_id/image?_=0"
+                  username="username"
                 >
-                  <span
-                    className="profile-icon "
-                  >
-                    <Avatar
-                      size="md"
-                      url="/api/v4/users/user_id/image?_=0"
-                      username="username"
-                    >
-                      <img
-                        alt="username profile image"
-                        className="Avatar Avatar-md"
-                        loading="lazy"
-                        onError={[Function]}
-                        src="/api/v4/users/user_id/image?_=0"
-                      />
-                    </Avatar>
-                  </span>
-                </button>
-              </RoundButton>
+                  <img
+                    alt="username profile image"
+                    className="Avatar Avatar-md"
+                    loading="lazy"
+                    onError={[Function]}
+                    src="/api/v4/users/user_id/image?_=0"
+                  />
+                </Avatar>
+              </span>
               <Memo(StatusIcon)
                 status="status"
               >
@@ -573,7 +588,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                   </span>
                 </StatusOfflineIcon>
               </Memo(StatusIcon)>
-            </span>
+            </button>
           </ProfilePopoverController>
         </ProfilePicture>
       </div>
@@ -790,47 +805,52 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
           <ProfilePopoverController
             channelId="channel_id"
             src="/api/v4/users/user_id/image?_=0"
-            triggerComponentClass="status-wrapper"
+            triggerComponentAs="button"
+            triggerComponentClass="status-wrapper style--none"
+            triggerComponentStyle={
+              Object {
+                "borderRadius": "50%",
+                "height": "32px",
+                "width": "32px",
+              }
+            }
             userId="user_id"
             username="username"
           >
-            <span
+            <button
               aria-expanded="false"
               aria-haspopup="dialog"
-              className="status-wrapper"
+              className="status-wrapper style--none"
               onClick={[Function]}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
               onPointerDown={[Function]}
+              style={
+                Object {
+                  "borderRadius": "50%",
+                  "height": "32px",
+                  "width": "32px",
+                }
+              }
             >
-              <RoundButton
-                className="style--none"
-                size="md"
+              <span
+                className="profile-icon "
               >
-                <button
-                  className="RoundButton-dvlhqG gfRzmz style--none"
+                <Avatar
                   size="md"
+                  url="/api/v4/users/user_id/image?_=0"
+                  username="username"
                 >
-                  <span
-                    className="profile-icon "
-                  >
-                    <Avatar
-                      size="md"
-                      url="/api/v4/users/user_id/image?_=0"
-                      username="username"
-                    >
-                      <img
-                        alt="username profile image"
-                        className="Avatar Avatar-md"
-                        loading="lazy"
-                        onError={[Function]}
-                        src="/api/v4/users/user_id/image?_=0"
-                      />
-                    </Avatar>
-                  </span>
-                </button>
-              </RoundButton>
+                  <img
+                    alt="username profile image"
+                    className="Avatar Avatar-md"
+                    loading="lazy"
+                    onError={[Function]}
+                    src="/api/v4/users/user_id/image?_=0"
+                  />
+                </Avatar>
+              </span>
               <Memo(StatusIcon)
                 status="status"
               >
@@ -863,7 +883,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                   </span>
                 </StatusOfflineIcon>
               </Memo(StatusIcon)>
-            </span>
+            </button>
           </ProfilePopoverController>
         </ProfilePicture>
       </div>
diff --git a/webapp/channels/src/components/post/post_component.tsx b/webapp/channels/src/components/post/post_component.tsx
index de8c16a1e0..9872d08af8 100644
--- a/webapp/channels/src/components/post/post_component.tsx
+++ b/webapp/channels/src/components/post/post_component.tsx
@@ -566,7 +566,6 @@ function PostComponent(props: Props) {
                     channelId={post.channel_id}
                 />
                 <div
-                    role='application'
                     className={`post__content ${props.center ? 'center' : ''}`}
                     data-testid='postContent'
                 >
diff --git a/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap b/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap
index 220dee0c79..1fcc8aaac1 100644
--- a/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap
+++ b/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap
@@ -39,21 +39,24 @@ exports[`components/ProfilePicture should match snapshot, no user specified, ove
 exports[`components/ProfilePicture should match snapshot, profile and src, default props 1`] = `
 <ProfilePopoverController
   src="http://example.com/image.png"
-  triggerComponentClass="status-wrapper"
+  triggerComponentAs="button"
+  triggerComponentClass="status-wrapper style--none"
+  triggerComponentStyle={
+    Object {
+      "borderRadius": "50%",
+      "height": "32px",
+      "width": "32px",
+    }
+  }
   userId="uid"
 >
-  <RoundButton
-    className="style--none"
-    size="md"
+  <span
+    className="profile-icon "
   >
-    <span
-      className="profile-icon "
-    >
-      <Memo(Avatar)
-        url="http://example.com/emoji.png"
-      />
-    </span>
-  </RoundButton>
+    <Memo(Avatar)
+      url="http://example.com/emoji.png"
+    />
+  </span>
   <Memo(StatusIcon)
     status="away"
   />
diff --git a/webapp/channels/src/components/profile_picture/index.tsx b/webapp/channels/src/components/profile_picture/index.tsx
index a423ba74f0..9669725485 100644
--- a/webapp/channels/src/components/profile_picture/index.tsx
+++ b/webapp/channels/src/components/profile_picture/index.tsx
@@ -3,7 +3,6 @@
 
 import classNames from 'classnames';
 import React from 'react';
-import styled from 'styled-components';
 
 import ProfilePopover from 'components/profile_popover';
 import StatusIcon from 'components/status_icon';
@@ -42,7 +41,7 @@ function ProfilePicture(props: Props) {
     if (props.userId) {
         return (
             <ProfilePopover
-                triggerComponentClass={classNames('status-wrapper', props.wrapperClass)}
+                triggerComponentClass={classNames('status-wrapper style--none', props.wrapperClass)}
                 userId={props.userId}
                 src={profileSrc}
                 username={props.username}
@@ -51,20 +50,21 @@ function ProfilePicture(props: Props) {
                 overwriteIcon={props.overwriteIcon}
                 overwriteName={props.overwriteName}
                 fromWebhook={props.fromWebhook}
+                triggerComponentAs='button'
+                triggerComponentStyle={{
+                    borderRadius: '50%',
+                    width: `${getAvatarWidth(props?.size ?? 'md')}px`,
+                    height: `${getAvatarWidth(props?.size ?? 'md')}px`,
+                }}
             >
                 <>
-                    <RoundButton
-                        className='style--none'
-                        size={props?.size ?? 'md'}
-                    >
-                        <span className={profileIconClass}>
-                            <Avatar
-                                username={props.username}
-                                size={props.size}
-                                url={props.src}
-                            />
-                        </span>
-                    </RoundButton>
+                    <span className={profileIconClass}>
+                        <Avatar
+                            username={props.username}
+                            size={props.size}
+                            url={props.src}
+                        />
+                    </span>
                     <StatusIcon status={props.status}/>
                 </>
             </ProfilePopover>
@@ -93,10 +93,4 @@ function ProfilePicture(props: Props) {
     );
 }
 
-const RoundButton = styled.button<{size: TAvatarSizeToken}>`
-    border-radius: 50%;
-    width: ${(p) => getAvatarWidth(p.size)}px;
-    height: ${(p) => getAvatarWidth(p.size)}px;
-`;
-
 export default ProfilePicture;
diff --git a/webapp/channels/src/sass/components/_mentions.scss b/webapp/channels/src/sass/components/_mentions.scss
index 3e5bb16f49..0da0fdd7c6 100644
--- a/webapp/channels/src/sass/components/_mentions.scss
+++ b/webapp/channels/src/sass/components/_mentions.scss
@@ -21,6 +21,15 @@ del .group-mention-link:focus {
     color: variables.$white;
 }
 
+.mention-link {
+    color: var(--link-color);
+
+    &:hover,
+    &:focus {
+        text-decoration: underline;
+    }
+}
+
 .badge {
     display: inline-block;
     min-width: 10px;