Task - replace img icons with svg components (#8963)

* add role=presentation to backdrop panle image

* replace img icons with svg components in InviteDialog

* replace img icon with svg component

* img icons to svg icons in MImageBody

* remove log

* img icon to svg in SecurityRoomSettingsTab

* use shared error message for media message tiles

* remove nbsp

* dont snapshot test entire rtl render response

* use aria-describedby for uploadconfirm preview

* use aria-labelledby instead

src/components/views/messages/MAudioBody.tsx

@@ -28,6 +28,7 @@ import { PlaybackManager } from "../../../audio/PlaybackManager";
 import { isVoiceMessage } from "../../../utils/EventUtils";
 import { PlaybackQueue } from "../../../audio/PlaybackQueue";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
+import MediaProcessingError from "./shared/MediaProcessingError";
 
 interface IState {
     error?: Error;
@@ -93,10 +94,9 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
     public render() {
         if (this.state.error) {
             return (
-                <span className="mx_MAudioBody">
-                    <img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
+                <MediaProcessingError className="mx_MAudioBody">
                     { _t("Error processing audio message") }
-                </span>
+                </MediaProcessingError>
             );
         }
 

src/components/views/messages/MImageBody.tsx

@@ -38,6 +38,7 @@ import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContex
 import { blobIsAnimated, mayBeAnimated } from '../../../utils/Image';
 import { presentableTextForFile } from "../../../utils/FileUtils";
 import { createReconnectedListener } from '../../../utils/connection';
+import MediaProcessingError from './shared/MediaProcessingError';
 
 enum Placeholder {
     NoImage,
@@ -552,10 +553,9 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
         if (this.state.error) {
             return (
-                <div className="mx_MImageBody">
-                    <img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
+                <MediaProcessingError className="mx_MImageBody">
                     { _t("Error decrypting image") }
-                </div>
+                </MediaProcessingError>
             );
         }
 

src/components/views/messages/MVideoBody.tsx

@@ -28,6 +28,7 @@ import { IBodyProps } from "./IBodyProps";
 import MFileBody from "./MFileBody";
 import { ImageSize, suggestedSize as suggestedVideoSize } from "../../../settings/enums/ImageSize";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
+import MediaProcessingError from './shared/MediaProcessingError';
 
 interface IState {
     decryptedUrl?: string;
@@ -244,10 +245,9 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
 
         if (this.state.error !== null) {
             return (
-                <span className="mx_MVideoBody">
-                    <img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
+                <MediaProcessingError className="mx_MVideoBody">
                     { _t("Error decrypting video") }
-                </span>
+                </MediaProcessingError>
             );
         }
 

src/components/views/messages/MVoiceMessageBody.tsx

@@ -21,16 +21,16 @@ import { _t } from "../../../languageHandler";
 import RecordingPlayback from "../audio_messages/RecordingPlayback";
 import MAudioBody from "./MAudioBody";
 import MFileBody from "./MFileBody";
+import MediaProcessingError from "./shared/MediaProcessingError";
 
 export default class MVoiceMessageBody extends MAudioBody {
     // A voice message is an audio file but rendered in a special way.
     public render() {
         if (this.state.error) {
             return (
-                <span className="mx_MVoiceMessageBody">
-                    <img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
+                <MediaProcessingError className="mx_MVoiceMessageBody">
                     { _t("Error processing voice message") }
-                </span>
+                </MediaProcessingError>
             );
         }
 

src/components/views/messages/shared/MediaProcessingError.tsx

@@ -0,0 +1,33 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { Icon as WarningIcon } from '../../../../../res/img/warning.svg';
+
+interface Props {
+    className?: string;
+    children: React.ReactNode;
+}
+
+const MediaProcessingError: React.FC<Props> = ({ className, children }) => (
+    <span className={className}>
+        <WarningIcon className='mx_MediaProcessingError_Icon' width="16" height="16" />
+        { children }
+    </span>
+);
+
+export default MediaProcessingError;