From 213dbad3379512015f84d87a8ede823fb3a53f08 Mon Sep 17 00:00:00 2001
From: SaurabhSharma-884 <saurabh.sharma@brightscout.com>
Date: Mon, 16 Dec 2024 14:46:09 +0530
Subject: [PATCH] [MA-26]: Fix ARIA roles, states, and properties are valid in
 user profile image and @user buttons

---
 .../admin_user_card.test.tsx.snap             | 116 ++++-----
 .../system_user_detail.test.tsx.snap          | 174 ++++++-------
 .../__snapshots__/at_mention.test.tsx.snap    |  21 +-
 .../src/components/at_mention/at_mention.tsx  |   3 +-
 .../__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 +--
 .../__snapshots__/generic_modal.test.tsx.snap |   2 +-
 9 files changed, 308 insertions(+), 314 deletions(-)

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 f8b543c9e91..b7d10df6a70 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 f38211d9c79..375df663297 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 24dad754501..1fd693c2555 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,7 +96,8 @@ 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
@@ -115,7 +116,8 @@ 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
@@ -134,7 +136,8 @@ 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
@@ -154,7 +157,8 @@ 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
@@ -173,7 +177,8 @@ 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
@@ -193,7 +198,8 @@ 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
@@ -212,7 +218,8 @@ 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
diff --git a/webapp/channels/src/components/at_mention/at_mention.tsx b/webapp/channels/src/components/at_mention/at_mention.tsx
index 93deefe4977..c1ffb78d89d 100644
--- a/webapp/channels/src/components/at_mention/at_mention.tsx
+++ b/webapp/channels/src/components/at_mention/at_mention.tsx
@@ -60,11 +60,12 @@ 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
                         ref={ref}
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 026c6d632ef..1b46084f016 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,46 +40,51 @@ 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"
           >
-            <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"
+                <Memo(Avatar)
                   size="md"
+                  url="/api/v4/users/user_id/image?_=0"
+                  username="username"
                 >
-                  <span
-                    className="profile-icon "
-                  >
-                    <Memo(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"
-                      />
-                    </Memo(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"
+                  />
+                </Memo(Avatar)>
+              </span>
               <Memo(StatusIcon)
                 status="status"
               >
@@ -112,7 +117,7 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                   </span>
                 </StatusOfflineIcon>
               </Memo(StatusIcon)>
-            </span>
+            </button>
           </ProfilePopoverController>
         </ProfilePicture>
       </div>
@@ -266,46 +271,51 @@ 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"
           >
-            <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"
+                <Memo(Avatar)
                   size="md"
+                  url="/api/v4/users/user_id/image?_=0"
+                  username="username"
                 >
-                  <span
-                    className="profile-icon "
-                  >
-                    <Memo(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"
-                      />
-                    </Memo(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"
+                  />
+                </Memo(Avatar)>
+              </span>
               <Memo(StatusIcon)
                 status="status"
               >
@@ -338,7 +348,7 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                   </span>
                 </StatusOfflineIcon>
               </Memo(StatusIcon)>
-            </span>
+            </button>
           </ProfilePopoverController>
         </ProfilePicture>
       </div>
@@ -498,46 +508,51 @@ 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"
           >
-            <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"
+                <Memo(Avatar)
                   size="md"
+                  url="/api/v4/users/user_id/image?_=0"
+                  username="username"
                 >
-                  <span
-                    className="profile-icon "
-                  >
-                    <Memo(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"
-                      />
-                    </Memo(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"
+                  />
+                </Memo(Avatar)>
+              </span>
               <Memo(StatusIcon)
                 status="status"
               >
@@ -570,7 +585,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                   </span>
                 </StatusOfflineIcon>
               </Memo(StatusIcon)>
-            </span>
+            </button>
           </ProfilePopoverController>
         </ProfilePicture>
       </div>
@@ -792,46 +807,51 @@ 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"
           >
-            <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"
+                <Memo(Avatar)
                   size="md"
+                  url="/api/v4/users/user_id/image?_=0"
+                  username="username"
                 >
-                  <span
-                    className="profile-icon "
-                  >
-                    <Memo(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"
-                      />
-                    </Memo(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"
+                  />
+                </Memo(Avatar)>
+              </span>
               <Memo(StatusIcon)
                 status="status"
               >
@@ -864,7 +884,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 3c037451eb0..4292d348871 100644
--- a/webapp/channels/src/components/post/post_component.tsx
+++ b/webapp/channels/src/components/post/post_component.tsx
@@ -562,7 +562,6 @@ const PostComponent = (props: Props): JSX.Element => {
                     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 220dee0c791..1fcc8aaac13 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 ec676786e73..1d43a368b71 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}
                 channelId={props.channelId}
@@ -50,20 +49,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>
@@ -92,10 +92,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/platform/components/src/generic_modal/__snapshots__/generic_modal.test.tsx.snap b/webapp/platform/components/src/generic_modal/__snapshots__/generic_modal.test.tsx.snap
index 83e41d8c6b9..78b4f1b0564 100644
--- a/webapp/platform/components/src/generic_modal/__snapshots__/generic_modal.test.tsx.snap
+++ b/webapp/platform/components/src/generic_modal/__snapshots__/generic_modal.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`GenericModal should match snapshot for base case 1`] = `
       aria-hidden="true"
     />
     <div
-      role="dialog"
+      role="none"
     >
       <div
         class="fade modal-backdrop in"