From 5f4c491e88959fa7bda9cf126c5db4e9f343c7f1 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Fri, 14 Aug 2026 15:40:04 -0300
Subject: [PATCH] fix: update list item markup to use div elements for better
 accessibility

---
 .../client/views/room/MessageList/MessageList.tsx  | 14 ++++++++++----
 .../Threads/components/ThreadMessageList.tsx       | 12 +++++++-----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/apps/meteor/client/views/room/MessageList/MessageList.tsx b/apps/meteor/client/views/room/MessageList/MessageList.tsx
index 8c62588a97525..f77741e4592c6 100644
--- a/apps/meteor/client/views/room/MessageList/MessageList.tsx
+++ b/apps/meteor/client/views/room/MessageList/MessageList.tsx
@@ -282,12 +282,14 @@ export const MessageList = function MessageList({
 					{canPreview ? (
 						<>
 							{hasMorePreviousMessages ? (
-								<li className='load-more'>{isLoadingMoreMessages ? <LoadingMessagesIndicator /> : null}</li>
+								<div className='load-more' role='presentation'>
+									{isLoadingMoreMessages ? <LoadingMessagesIndicator /> : null}
+								</div>
 							) : (
-								<li>
+								<div role='listitem'>
 									<RoomForeword user={user} room={room} />
 									{retentionPolicy?.isActive ? <RetentionPolicyWarning room={room} /> : null}
-								</li>
+								</div>
 							)}
 						</>
 					) : null}
@@ -316,7 +318,11 @@ export const MessageList = function MessageList({
 							</Fragment>
 						);
 					})}
-					{hasMoreNextMessages ? <li className='load-more'>{isLoadingMoreMessages ? <LoadingMessagesIndicator /> : null}</li> : null}
+					{hasMoreNextMessages ? (
+						<div className='load-more' role='presentation'>
+							{isLoadingMoreMessages ? <LoadingMessagesIndicator /> : null}
+						</div>
+					) : null}
 				</VList>
 			</SelectedMessagesProvider>
 		</MessageListProvider>
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx
index 6274221f0e7e1..c6ccee4a81d01 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx
@@ -408,12 +408,14 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 						}}
 					>
 						{loading ? (
-							<li className='load-more'>
+							<div className='load-more' role='presentation'>
 								<LoadingMessagesIndicator />
-							</li>
+							</div>
 						) : null}
 						{!loading && hasPreviousPage ? (
-							<li className='load-more'>{isFetchingPreviousPage ? <LoadingMessagesIndicator /> : null}</li>
+							<div className='load-more' role='presentation'>
+								{isFetchingPreviousPage ? <LoadingMessagesIndicator /> : null}
+							</div>
 						) : null}
 						{!loading &&
 							items.map((message, index, { [index - 1]: previous }) => {
@@ -438,9 +440,9 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 								);
 							})}
 						{!loading && hasNextPage ? (
-							<li className='load-more'>
+							<div className='load-more' role='presentation'>
 								{isFetchingNextPage ? <LoadingMessagesIndicator /> : <InfiniteListAnchor loadMore={loadMoreMessages} />}
-							</li>
+							</div>
 						) : null}
 					</VList>
 				</MessageListProvider>