Fix url preview AXE and layout issue & add percy test (#9189)

Author: t3chguy

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", () => {

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 {

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