From 00c714265b3aa41c8c21e21b90b8c6c87009d2b8 Mon Sep 17 00:00:00 2001
From: Joshua Irmer <irmer@gonicus.de>
Date: Tue, 25 Feb 2025 15:59:45 +0100
Subject: [PATCH] fix(chat): restructure chat messages

Signed-off-by: Joshua Irmer <irmer@gonicus.de>
---
 .../base/react/components/web/Message.tsx     | 17 ++++++++--
 .../chat/components/web/ChatMessage.tsx       | 33 ++++++++++---------
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/react/features/base/react/components/web/Message.tsx b/react/features/base/react/components/web/Message.tsx
index ec56a9143e29..23062f994e5c 100644
--- a/react/features/base/react/components/web/Message.tsx
+++ b/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>
         );
     }
 }
diff --git a/react/features/chat/components/web/ChatMessage.tsx b/react/features/chat/components/web/ChatMessage.tsx
index 5d412c69bf79..12ac5ad6c98c 100644
--- a/react/features/chat/components/web/ChatMessage.tsx
+++ b/react/features/chat/components/web/ChatMessage.tsx
@@ -254,7 +254,9 @@ const ChatMessage = ({
     function _renderTimestamp() {
         return (
             <div className = { cx('timestamp', classes.timestamp) }>
-                {getFormattedTimestamp(message)}
+                <p>
+                    {getFormattedTimestamp(message)}
+                </p>
             </div>
         );
     }
@@ -285,15 +287,17 @@ const ChatMessage = ({
                     <div
                         className = { classes.reactionItem }
                         key = { reaction }>
-                        <span>{reaction}</span>
-                        <span>{participants.size}</span>
+                        <p>
+                            <span>{reaction}</span>
+                            <span>{participants.size}</span>
+                        </p>
                         <div className = { classes.participantList }>
                             {Array.from(participants).map(participantId => (
-                                <div
+                                <p
                                     className = { classes.participant }
                                     key = { participantId }>
                                     {state && getParticipantDisplayName(state, participantId)}
-                                </div>
+                                </p>
                             ))}
                         </div>
                     </div>
@@ -311,12 +315,12 @@ const ChatMessage = ({
                 visible = { isReactionsOpen }>
                 <div className = { classes.reactionBox }>
                     {reactionsArray.slice(0, numReactionsDisplayed).map(({ reaction }, index) =>
-                        <span key = { index }>{reaction}</span>
+                        <p key = { index }>{reaction}</p>
                     )}
                     {reactionsArray.length > numReactionsDisplayed && (
-                        <span className = { classes.reactionCount }>
+                        <p className = { classes.reactionCount }>
                             +{totalReactions - numReactionsDisplayed}
-                        </span>
+                        </p>
                     )}
                 </div>
             </Popover>
@@ -352,14 +356,13 @@ const ChatMessage = ({
                         <div className = { cx('messagecontent', classes.messageContent) }>
                             {showDisplayName && _renderDisplayName()}
                             <div className = { cx('usermessage', classes.userMessage) }>
-                                <span className = 'sr-only'>
-                                    {message.displayName === message.recipient
-                                        ? t('chat.messageAccessibleTitleMe')
-                                        : t('chat.messageAccessibleTitle', {
+                                <Message
+                                    screenReaderHelpText = { message.displayName === message.recipient
+                                        ? t<string>('chat.messageAccessibleTitleMe')
+                                        : t<string>('chat.messageAccessibleTitle', {
                                             user: message.displayName
-                                        })}
-                                </span>
-                                <Message text = { getMessageText(message) } />
+                                        }) }
+                                    text = { getMessageText(message) } />
                                 {(message.privateMessage || (message.lobbyChat && !knocking))
                                     && _renderPrivateNotice()}
                                 <div className = { classes.chatMessageFooter }>