From e269c6895d4d324cff4feddaf621fae6eaa03126 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 17 Aug 2022 17:07:18 +0100
Subject: [PATCH] Fix url preview AXE and layout issue & add percy test (#9189)

---
 cypress/e2e/timeline/timeline.spec.ts         | 43 +++++++++++++++++++
 res/css/views/rooms/_LinkPreviewWidget.pcss   |  1 +
 .../views/rooms/LinkPreviewWidget.tsx         |  8 +++-
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts
index df0a1809b3..94b6ffaa42 100644
--- a/cypress/e2e/timeline/timeline.spec.ts
+++ b/cypress/e2e/timeline/timeline.spec.ts
@@ -274,6 +274,49 @@ describe("Timeline", () => {
             cy.get(".mx_EventTile:not(.mx_EventTile_contextual)").find(".mx_EventTile_searchHighlight").should("exist");
             cy.get(".mx_RoomView_searchResultsPanel").percySnapshotElement("Highlighted search results");
         });
+
+        it("should render url previews", () => {
+            cy.intercept("**/_matrix/media/r0/thumbnail/matrix.org/2022-08-16_yaiSVSRIsNFfxDnV?*", {
+                statusCode: 200,
+                fixture: "riot.png",
+                headers: {
+                    "Content-Type": "image/png",
+                },
+            }).as("mxc");
+            cy.intercept("**/_matrix/media/r0/preview_url?url=https%3A%2F%2Fcall.element.io%2F&ts=*", {
+                statusCode: 200,
+                body: {
+                    "og:title": "Element Call",
+                    "og:description": null,
+                    "og:image:width": 48,
+                    "og:image:height": 48,
+                    "og:image": "mxc://matrix.org/2022-08-16_yaiSVSRIsNFfxDnV",
+                    "og:image:type": "image/png",
+                    "matrix:image:size": 2121,
+                },
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            }).as("preview_url");
+
+            cy.sendEvent(
+                roomId,
+                null,
+                "m.room.message" as EventType,
+                MessageEvent.from("https://call.element.io/").serialize().content,
+            );
+            cy.visit("/#/room/" + roomId);
+
+            cy.get(".mx_LinkPreviewWidget").should("exist").should("contain.text", "Element Call");
+
+            cy.wait("@preview_url");
+            cy.wait("@mxc");
+
+            cy.checkA11y();
+            cy.get(".mx_EventTile_last").percySnapshotElement("URL Preview", {
+                widths: [800, 400],
+            });
+        });
     });
 
     describe("message sending", () => {
diff --git a/res/css/views/rooms/_LinkPreviewWidget.pcss b/res/css/views/rooms/_LinkPreviewWidget.pcss
index ceb715275d..7949233a9f 100644
--- a/res/css/views/rooms/_LinkPreviewWidget.pcss
+++ b/res/css/views/rooms/_LinkPreviewWidget.pcss
@@ -32,6 +32,7 @@ limitations under the License.
         display: flex;
         flex-wrap: wrap;
         row-gap: $spacing-8;
+        flex: 1;
 
         .mx_LinkPreviewWidget_image,
         .mx_LinkPreviewWidget_caption {
diff --git a/src/components/views/rooms/LinkPreviewWidget.tsx b/src/components/views/rooms/LinkPreviewWidget.tsx
index 25d5fdd00b..cf7c009e52 100644
--- a/src/components/views/rooms/LinkPreviewWidget.tsx
+++ b/src/components/views/rooms/LinkPreviewWidget.tsx
@@ -112,7 +112,13 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
         let img;
         if (image) {
             img = <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
-                <img ref={this.image} style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={image} onClick={this.onImageClick} />
+                <img
+                    ref={this.image}
+                    style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }}
+                    src={image}
+                    onClick={this.onImageClick}
+                    alt=""
+                />
             </div>;
         }