Change avatar to use Compound implementation (#11448)

* Move avatar to new compound implementation

* Make space avatars square

* Remove reference to the avatar initial CSS class

* remove references to mx_BaseAvatar_image

* Fixe test suites

* Fix accessbility violations

* Add ConfirmUserActionDialog test

* Fix tests

* Add FacePile test

* Fix items clipping in members list

* Fix user info avatar sizing

* Fix tests

test/components/views/messages/TextualBody-test.tsx

@@ -199,7 +199,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><img loading="lazy" class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" style="width: 16px; height: 16px;" alt="" data-testid="avatar-img" aria-hidden="true"><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
+                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_i91o9_45" data-type="round" width="16px" height="16px" title="@member:domain.bla"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
             );
         });
 
@@ -217,7 +217,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com" aria-describedby="mx_Pill_0.123456"><div class="mx_Pill_LinkIcon mx_BaseAvatar mx_BaseAvatar_image"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
+                `"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com" aria-describedby="mx_Pill_0.123456"><div class="mx_Pill_LinkIcon mx_BaseAvatar"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
             );
         });
 

test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap

@@ -83,26 +83,15 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
               class="mx_Marker_border"
             >
               <span
-                class="mx_BaseAvatar"
+                class="_avatar_i91o9_17 mx_BaseAvatar"
+                data-color="1"
+                data-testid="avatar-img"
+                data-type="round"
                 role="presentation"
+                style="--cpd-avatar-size: 36px;"
+                title="@user:server"
               >
-                <span
-                  aria-hidden="true"
-                  class="mx_BaseAvatar_initial"
-                  style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
-                >
-                  U
-                </span>
-                <img
-                  alt=""
-                  aria-hidden="true"
-                  class="mx_BaseAvatar_image"
-                  data-testid="avatar-img"
-                  loading="lazy"
-                  src="data:image/png;base64,00"
-                  style="width: 36px; height: 36px;"
-                  title="@user:server"
-                />
+                u
               </span>
             </div>
           </div>

test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

@@ -54,15 +54,28 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
         class="mx_Pill mx_UserPill"
         href="https://matrix.to/#/@user:example.com"
       >
-        <img
-          alt=""
+        <span
           aria-hidden="true"
-          class="mx_BaseAvatar mx_BaseAvatar_image"
+          aria-label="Profile picture"
+          class="_avatar_i91o9_17 mx_BaseAvatar"
+          data-color="8"
           data-testid="avatar-img"
-          loading="lazy"
-          src="mxc://avatar.url/image.png"
-          style="width: 16px; height: 16px;"
-        />
+          data-type="round"
+          style="--cpd-avatar-size: 16px;"
+        >
+          <img
+            alt=""
+            class="_image_i91o9_45"
+            crossorigin="anonymous"
+            data-type="round"
+            height="16px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="mxc://avatar.url/image.png"
+            title="@member:domain.bla"
+            width="16px"
+          />
+        </span>
         <span
           class="mx_Pill_text"
         >
@@ -91,15 +104,28 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
             class="mx_Pill mx_EventPill"
             href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/$16085560162aNpaH:example.com?via=example.com"
           >
-            <img
-              alt=""
+            <span
               aria-hidden="true"
-              class="mx_BaseAvatar mx_BaseAvatar_image"
+              aria-label="Avatar"
+              class="_avatar_i91o9_17 mx_BaseAvatar"
+              data-color="3"
               data-testid="avatar-img"
-              loading="lazy"
-              src="mxc://avatar.url/room.png"
-              style="width: 16px; height: 16px;"
-            />
+              data-type="round"
+              style="--cpd-avatar-size: 16px;"
+            >
+              <img
+                alt=""
+                class="_image_i91o9_45"
+                crossorigin="anonymous"
+                data-type="round"
+                height="16px"
+                loading="lazy"
+                referrerpolicy="no-referrer"
+                src="mxc://avatar.url/room.png"
+                title="!room1:example.com"
+                width="16px"
+              />
+            </span>
             <span
               class="mx_Pill_text"
             >
@@ -130,15 +156,28 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
             class="mx_Pill mx_RoomPill"
             href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com?via=example.com&via=bob.com"
           >
-            <img
-              alt=""
+            <span
               aria-hidden="true"
-              class="mx_BaseAvatar mx_BaseAvatar_image"
+              aria-label="Avatar"
+              class="_avatar_i91o9_17 mx_BaseAvatar"
+              data-color="3"
               data-testid="avatar-img"
-              loading="lazy"
-              src="mxc://avatar.url/room.png"
-              style="width: 16px; height: 16px;"
-            />
+              data-type="round"
+              style="--cpd-avatar-size: 16px;"
+            >
+              <img
+                alt=""
+                class="_image_i91o9_45"
+                crossorigin="anonymous"
+                data-type="round"
+                height="16px"
+                loading="lazy"
+                referrerpolicy="no-referrer"
+                src="mxc://avatar.url/room.png"
+                title="!room1:example.com"
+                width="16px"
+              />
+            </span>
             <span
               class="mx_Pill_text"
             >
@@ -228,15 +267,28 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
         class="mx_Pill mx_UserPill"
         href="https://matrix.to/#/@user:server"
       >
-        <img
-          alt=""
+        <span
           aria-hidden="true"
-          class="mx_BaseAvatar mx_BaseAvatar_image"
+          aria-label="Profile picture"
+          class="_avatar_i91o9_17 mx_BaseAvatar"
+          data-color="8"
           data-testid="avatar-img"
-          loading="lazy"
-          src="mxc://avatar.url/image.png"
-          style="width: 16px; height: 16px;"
-        />
+          data-type="round"
+          style="--cpd-avatar-size: 16px;"
+        >
+          <img
+            alt=""
+            class="_image_i91o9_45"
+            crossorigin="anonymous"
+            data-type="round"
+            height="16px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="mxc://avatar.url/image.png"
+            title="@member:domain.bla"
+            width="16px"
+          />
+        </span>
         <span
           class="mx_Pill_text"
         >
@@ -256,15 +308,26 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
       class="mx_Pill mx_EventPill"
       href="https://matrix.to/#/!room1:example.com/%event_id%"
       aria-describedby="mx_Pill_0.123456"
-      ><img
-        loading="lazy"
-        class="mx_BaseAvatar mx_BaseAvatar_image"
-        src="mxc://avatar.url/image.png"
-        style="width: 16px; height: 16px"
-        alt=""
-        data-testid="avatar-img"
+      ><span
+        aria-label="Profile picture"
         aria-hidden="true"
-      /><span class="mx_Pill_text">Message from Member</span></a
+        data-testid="avatar-img"
+        data-type="round"
+        data-color="8"
+        class="_avatar_i91o9_17 mx_BaseAvatar"
+        style="--cpd-avatar-size: 16px"
+        ><img
+          loading="lazy"
+          alt=""
+          src="mxc://avatar.url/image.png"
+          crossorigin="anonymous"
+          referrerpolicy="no-referrer"
+          class="_image_i91o9_45"
+          data-type="round"
+          width="16px"
+          height="16px"
+          title="@member:domain.bla" /></span
+      ><span class="mx_Pill_text">Message from Member</span></a
     ></bdi
   ></span
 >
@@ -279,15 +342,26 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
       class="mx_Pill mx_EventPill"
       href="https://matrix.to/#/!room2:example.com/%event_id%"
       aria-describedby="mx_Pill_0.123456"
-      ><img
-        loading="lazy"
-        class="mx_BaseAvatar mx_BaseAvatar_image"
-        src="mxc://avatar.url/room.png"
-        style="width: 16px; height: 16px"
-        alt=""
-        data-testid="avatar-img"
+      ><span
+        aria-label="Avatar"
         aria-hidden="true"
-      /><span class="mx_Pill_text">Message in Room 2</span></a
+        data-testid="avatar-img"
+        data-type="round"
+        data-color="4"
+        class="_avatar_i91o9_17 mx_BaseAvatar"
+        style="--cpd-avatar-size: 16px"
+        ><img
+          loading="lazy"
+          alt=""
+          src="mxc://avatar.url/room.png"
+          crossorigin="anonymous"
+          referrerpolicy="no-referrer"
+          class="_image_i91o9_45"
+          data-type="round"
+          width="16px"
+          height="16px"
+          title="!room2:example.com" /></span
+      ><span class="mx_Pill_text">Message in Room 2</span></a
     ></bdi
   ></span
 >
@@ -308,7 +382,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
         href="https://matrix.to/#/!room1:example.com/!abc123"
       >
         <div
-          class="mx_Pill_LinkIcon mx_BaseAvatar mx_BaseAvatar_image"
+          class="mx_Pill_LinkIcon mx_BaseAvatar"
         />
         <span
           class="mx_Pill_text"