refactor: change div to p tag in message list [ACC-24]

src/script/components/MessagesList/Message/CallMessage.tsx

@@ -62,9 +62,9 @@ const CallMessage: React.FC<CallMessageProps> = ({message}) => {
           <span>{caption}</span>
         </p>
       </div>
-      <div className="message-body-actions">
+      <p className="message-body-actions">
         <MessageTime timestamp={timestamp} data-uie-uid={message.id} data-uie-name="item-message-call-timestamp" />
-      </div>
+      </p>
     </div>
   );
 };

src/script/components/MessagesList/Message/CallTimeoutMessage.tsx

@@ -55,9 +55,9 @@ const CallTimeoutMessage: React.FC<CallTimeoutMessageProps> = ({message}) => {
           <b>{reason === REASON.NOONE_JOINED ? t('callNoOneJoined') : t('callEveryOneLeft')}</b>
         </p>
       </div>
-      <div className="message-body-actions">
+      <p className="message-body-actions">
         <MessageTime timestamp={timestamp} data-uie-uid={message.id} data-uie-name="item-message-call-timestamp" />
-      </div>
+      </p>
     </div>
   );
 };

src/script/components/MessagesList/Message/ContentMessage/asset/FileAssetComponent.tsx

@@ -124,9 +124,9 @@ const FileAsset: React.FC<FileAssetProps> = ({
               )}
 
               <div className="file__desc">
-                <div className="label-bold-xs ellipsis" data-uie-name="file-name">
+                <p className="label-bold-xs ellipsis" data-uie-name="file-name">
                   {fileName}
-                </div>
+                </p>
                 <ul className="file__desc__meta label-xs text-foreground">
                   <li className="label-nocase-xs" data-uie-name="file-size">
                     {formattedFileSize}

src/script/components/MessagesList/Message/ContentMessage/asset/LinkPreviewAssetComponent.tsx

@@ -63,16 +63,16 @@ const LinkPreviewAsset: React.FC<LinkPreviewAssetProps> = ({header = false, mess
         <div className="link-preview-image-placeholder icon-link bg-color-ephemeral text-white" />
       </div>
       <div className="link-preview-info">
-        <div
+        <p
           className={cx(
             'link-preview-info-title',
             'ephemeral-message-obfuscated',
             `link-preview-info-title-${header ? 'singleline' : 'multiline'}`,
           )}
         >
           {preview?.title}
-        </div>
-        <div className="link-preview-info-link ephemeral-message-obfuscated ellipsis">{preview?.url}</div>
+        </p>
+        <p className="link-preview-info-link ephemeral-message-obfuscated ellipsis">{preview?.url}</p>
       </div>
     </div>
   ) : (
@@ -94,32 +94,32 @@ const LinkPreviewAsset: React.FC<LinkPreviewAssetProps> = ({header = false, mess
         {header && <AssetHeader className="link-preview-info-header" message={message} />}
         {preview && (
           <>
-            <div
+            <p
               className={cx(
                 'link-preview-info-title',
                 `link-preview-info-title-${header ? 'singleline' : 'multiline'}`,
               )}
               data-uie-name="link-preview-title"
             >
               {preview.title}
-            </div>
+            </p>
             {isTweet ? (
               <div
                 className="link-preview-info-link text-foreground"
                 title={preview.url}
                 data-uie-name="link-preview-tweet-author"
               >
-                <span className="font-weight-bold link-preview-info-title-singleline">{author}</span>
-                <span>{t('conversationTweetAuthor')}</span>
+                <p className="font-weight-bold link-preview-info-title-singleline">{author}</p>
+                <p>{t('conversationTweetAuthor')}</p>
               </div>
             ) : (
-              <div
+              <p
                 className="link-preview-info-link text-foreground ellipsis"
                 title={preview.url}
                 data-uie-name="link-preview-url"
               >
                 {cleanURL(preview.url)}
-              </div>
+              </p>
             )}
           </>
         )}

src/script/components/MessagesList/Message/DecryptErrorMessage.tsx

@@ -60,7 +60,7 @@ const DecryptErrorMessage: React.FC<DecryptErrorMessageProps> = ({message, onCli
         </div>
       </div>
       <div className="message-body message-body-decrypt-error">
-        <div className="message-header-decrypt-error-label" data-uie-name="status-decrypt-error">
+        <p className="message-header-decrypt-error-label" data-uie-name="status-decrypt-error">
           {message.error_code && (
             <>
               {`${t('conversationUnableToDecryptErrorMessage')} `}
@@ -73,7 +73,7 @@ const DecryptErrorMessage: React.FC<DecryptErrorMessageProps> = ({message, onCli
               <DeviceId deviceId={message.client_id} />
             </>
           )}
-        </div>
+        </p>
         {isRecoverable && (
           <div className="message-header-decrypt-reset-session">
             {isResettingSession ? (

src/script/components/MessagesList/Message/DeleteMessage.tsx

@@ -61,15 +61,15 @@ const DeleteMessage: React.FC<DeleteMessageProps> = ({message, onClickAvatar}) =
         </p>
         <span className="message-header-label-icon icon-trash" title={formattedDeletionTime} />
       </div>
-      <div className="message-body-actions">
+      <p className="message-body-actions">
         <MessageTime
           timestamp={deletedTimeStamp}
           data-uie-uid={message.id}
           data-uie-name="item-message-delete-timestamp"
         >
           {formattedDeletionTime}
         </MessageTime>
-      </div>
+      </p>
     </div>
   );
 };

src/script/components/MessagesList/Message/FileTypeRestrictedMessage.tsx

@@ -34,14 +34,14 @@ const FileTypeRestrictedMessage: React.FC<FileTypeRestrictedMessageProps> = ({me
         <span className="icon-sysmsg-error text-red" />
       </div>
       {message.isIncoming ? (
-        <div
+        <p
           className="message-header-label"
           dangerouslySetInnerHTML={{__html: t('fileTypeRestrictedIncoming', message.name)}}
           data-uie-name="filetype-restricted-message-text"
           data-uie-value="incoming"
         />
       ) : (
-        <div
+        <p
           className="message-header-label"
           dangerouslySetInnerHTML={{__html: t('fileTypeRestrictedOutgoing', message.fileExt)}}
           data-uie-name="filetype-restricted-message-text"

src/script/components/MessagesList/Message/LegalHoldMessage.tsx

@@ -49,7 +49,7 @@ const LegalHoldMessage: React.FC<LegalHoldMessageProps> = ({
       <div className="message-header-label">
         {message.isActivationMessage ? (
           <>
-            <span data-uie-name="status-legalhold-activated">{t('legalHoldActivated')}</span>
+            <p data-uie-name="status-legalhold-activated">{t('legalHoldActivated')}</p>
 
             <button
               type="button"
@@ -60,9 +60,9 @@ const LegalHoldMessage: React.FC<LegalHoldMessageProps> = ({
             </button>
           </>
         ) : (
-          <span className="message-header-label" data-uie-name="status-legalhold-deactivated">
+          <p className="message-header-label" data-uie-name="status-legalhold-deactivated">
             {t('legalHoldDeactivated')}
-          </span>
+          </p>
         )}
       </div>
     </div>

src/script/components/MessagesList/Message/MemberMessage.tsx

@@ -105,7 +105,7 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
         <>
           {showNamedCreation && (
             <div className="message-group-creation-header">
-              <div
+              <p
                 className="message-group-creation-header-text"
                 dangerouslySetInnerHTML={{__html: htmlGroupCreationHeader}}
               />
@@ -120,7 +120,7 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
                 {isMemberJoin && <span className="icon-plus" />}
               </div>
               <div ref={initShowMore} className="message-header-label">
-                <span className="message-header-caption" dangerouslySetInnerHTML={{__html: htmlCaption}} />
+                <p className="message-header-caption" dangerouslySetInnerHTML={{__html: htmlCaption}} />
               </div>
               {isMemberChange && (
                 <div className="message-body-actions">
@@ -134,13 +134,13 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
             </div>
           )}
           {hasUsers && message.showServicesWarning && (
-            <div className="message-services-warning" data-uie-name="label-services-warning">
+            <p className="message-services-warning" data-uie-name="label-services-warning">
               {t('conversationServicesWarning')}
-            </div>
+            </p>
           )}
           {isGroupCreation && shouldShowInvitePeople && (
             <div className="message-member-footer">
-              <div>{t('guestRoomConversationHead')}</div>
+              <p>{t('guestRoomConversationHead')}</p>
               <button
                 type="button"
                 onClick={onClickInvitePeople}
@@ -153,23 +153,23 @@ const MemberMessage: React.FC<MemberMessageProps> = ({
           )}
           {isGroupCreation && isSelfTemporaryGuest && (
             <div className="message-member-footer">
-              <div className="message-member-footer-message">{t('temporaryGuestJoinMessage')}</div>
-              <div className="message-member-footer-description">{t('temporaryGuestJoinDescription')}</div>
+              <p className="message-member-footer-message">{t('temporaryGuestJoinMessage')}</p>
+              <p className="message-member-footer-description">{t('temporaryGuestJoinDescription')}</p>
             </div>
           )}
           {isGroupCreation && hasReadReceiptsTurnedOn && (
             <div className="message-header" data-uie-name="label-group-creation-receipts">
               <div className="message-header-icon message-header-icon--svg text-foreground">
                 <Icon.Read />
               </div>
-              <div className="message-header-label">
+              <p className="message-header-label">
                 <span className="ellipsis">{t('conversationCreateReceiptsEnabled')}</span>
-              </div>
+              </p>
             </div>
           )}
           {isMemberLeave && user.isMe && isSelfTemporaryGuest && (
             <div className="message-member-footer">
-              <div className="message-member-footer-description">{t('temporaryGuestLeaveDescription')}</div>
+              <p className="message-member-footer-description">{t('temporaryGuestLeaveDescription')}</p>
             </div>
           )}
         </>

src/script/components/MessagesList/Message/MissedMessage.tsx

@@ -29,7 +29,7 @@ const MissedMessage: React.FC<MissedMessageProps> = ({}) => {
       <div className="message-header-icon">
         <span className="icon-sysmsg-error text-red" />
       </div>
-      <div className="message-header-label">{t('conversationMissedMessages')}</div>
+      <p className="message-header-label">{t('conversationMissedMessages')}</p>
     </div>
   );
 };

src/script/components/MessagesList/Message/PingMessage.tsx

@@ -59,18 +59,18 @@ const PingMessage: React.FC<PingMessageProps> = ({
       <div className="message-header-icon">
         <div className={`icon-ping ${get_icon_classes}`} />
       </div>
-      <div
+      <p
         className={cx('message-header-label', {
           'ephemeral-message-obfuscated': isObfuscated,
         })}
         title={ephemeral_caption}
         data-uie-name="element-message-ping-text"
       >
-        <span className="message-header-label__multiline">
+        <p className="message-header-label__multiline">
           <span className="message-header-sender-name">{unsafeSenderName}</span>
           <span className="ellipsis">{caption}</span>
-        </span>
-      </div>
+        </p>
+      </p>
       <div className="message-body-actions">
         <MessageTime timestamp={timestamp} data-uie-uid={message.id} data-uie-name="item-message-call-timestamp" />
         <ReadReceiptStatus

src/script/components/MessagesList/Message/SystemMessage.tsx

@@ -49,12 +49,12 @@ const SystemMessage: React.FC<SystemMessageProps> = ({message}) => {
           {message.system_message_type === SystemMessageType.CONVERSATION_MESSAGE_TIMER_UPDATE && <Icon.Timer />}
           {message.system_message_type === SystemMessageType.CONVERSATION_RECEIPT_MODE_UPDATE && <Icon.Read />}
         </div>
-        <div className="message-header-label">
+        <p className="message-header-label">
           <span className="message-header-label__multiline">
             <span className="message-header-sender-name">{unsafeSenderName}</span>
             <span className="ellipsis">{caption}</span>
           </span>
-        </div>
+        </p>
         <div className="message-body-actions">
           <MessageTime timestamp={timestamp} data-uie-uid={message.id} data-uie-name="item-message-call-timestamp" />
         </div>

src/script/components/MessagesList/Message/memberMessage/ConnectedMessage.tsx

@@ -50,9 +50,9 @@ const ConnectedMessage: React.FC<ConnectedMessageProps> = ({
     <div className="message-connected" data-uie-name="element-connected-message">
       <h2 className="message-connected-header">{name}</h2>
       {isService ? (
-        <span className="message-connected-provider-name">{providerName}</span>
+        <p className="message-connected-provider-name">{providerName}</p>
       ) : (
-        <span className="message-connected-username label-username">{handle}</span>
+        <p className="message-connected-username label-username">{handle}</p>
       )}
       {isOutgoingRequest && classifiedDomains && <ClassifiedBar users={[user]} classifiedDomains={classifiedDomains} />}
       <Avatar