From 1f96fa6f3d7c2d67651fd4fdb0569f4103ab339c Mon Sep 17 00:00:00 2001
From: Aryan-Verma-999 <anon999.420@gmail.com>
Date: Mon, 2 Mar 2026 22:52:29 +0530
Subject: [PATCH] a11y: add semantic roles, aria-live, and keyboard navigation
 to main containers

---
 packages/react/src/views/ChatBody/ChatBody.js          | 3 +++
 packages/react/src/views/ChatHeader/ChatHeader.js      | 9 +++++++++
 packages/react/src/views/RoomMembers/RoomMember.js     | 6 +++++-
 packages/react/src/views/RoomMembers/RoomMemberItem.js | 9 +++++++++
 4 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js
index 76c5bfae6f..17225129f2 100644
--- a/packages/react/src/views/ChatBody/ChatBody.js
+++ b/packages/react/src/views/ChatBody/ChatBody.js
@@ -400,6 +400,9 @@ const ChatBody = ({
           ...styleOverrides,
         }}
         className={`ec-chat-body ${classNames}`}
+        role="log"
+        aria-live="polite"
+        aria-label="Message list"
       >
         {isLoginIn ? (
           <Box
diff --git a/packages/react/src/views/ChatHeader/ChatHeader.js b/packages/react/src/views/ChatHeader/ChatHeader.js
index 7948b553df..c64092a152 100644
--- a/packages/react/src/views/ChatHeader/ChatHeader.js
+++ b/packages/react/src/views/ChatHeader/ChatHeader.js
@@ -497,6 +497,15 @@ const ChatHeader = ({
                     <Box
                       css={styles.channelName}
                       onClick={() => setExclusiveState(setShowChannelinfo)}
+                      role="button"
+                      tabIndex={0}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          setExclusiveState(setShowChannelinfo);
+                        }
+                      }}
+                      aria-label="View room information"
                     >
                       {isFederated ? (
                         <GlobeIcon size={fullScreen ? '1.25rem' : '1rem'} />
diff --git a/packages/react/src/views/RoomMembers/RoomMember.js b/packages/react/src/views/RoomMembers/RoomMember.js
index 27a97278fc..1cf1e1e200 100644
--- a/packages/react/src/views/RoomMembers/RoomMember.js
+++ b/packages/react/src/views/RoomMembers/RoomMember.js
@@ -165,7 +165,11 @@ const RoomMembers = ({ members }) => {
               <Box>
                 Showing {displayedMembers} of {displayedMembers}
               </Box>
-              <Box css={styles.memberList}>
+              <Box
+                css={styles.memberList}
+                role="list"
+                aria-label="Room members"
+              >
                 {filteredMembers.length > 0 ? (
                   filteredMembers.map((member) => (
                     <RoomMemberItem
diff --git a/packages/react/src/views/RoomMembers/RoomMemberItem.js b/packages/react/src/views/RoomMembers/RoomMemberItem.js
index d53632782d..236a50ca41 100644
--- a/packages/react/src/views/RoomMembers/RoomMemberItem.js
+++ b/packages/react/src/views/RoomMembers/RoomMemberItem.js
@@ -27,6 +27,15 @@ const RoomMemberItem = ({ user, host, userStatus }) => {
       css={styles.container}
       style={{ cursor: 'pointer' }}
       onClick={handleShowUserInfo}
+      role="listitem"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleShowUserInfo();
+        }
+      }}
+      aria-label={`View info for ${user.name || user.username}`}
     >
       <Avatar
         url={avatarUrl}