fix(chat): restructure chat messages

Signed-off-by: Joshua Irmer <irmer@gonicus.de>

react/features/base/react/components/web/Message.tsx

@@ -15,6 +15,11 @@ interface IProps {
      */
     gifEnabled: boolean;
 
+    /**
+     * Message decoration for screen reader.
+     */
+    screenReaderHelpText?: string;
+
     /**
      * The body of the message.
      */
@@ -91,10 +96,18 @@ class Message extends Component<IProps> {
      * @returns {ReactElement}
      */
     render() {
+        const { screenReaderHelpText } = this.props;
+
         return (
-            <>
+            <p>
+                { screenReaderHelpText && (
+                    <span className = 'sr-only'>
+                        {screenReaderHelpText}
+                    </span>
+                ) }
+
                 { this._processMessage() }
-            </>
+            </p>
         );
     }
 }