From bb9971c851dc50f470149c73346e5d9812b2ec47 Mon Sep 17 00:00:00 2001
From: Aryan-Verma-999 <anon999.420@gmail.com>
Date: Mon, 2 Mar 2026 22:40:21 +0530
Subject: [PATCH] a11y: add aria-labels to all icon-only buttons and
 interactive elements

---
 packages/react/src/views/ChatInput/ChatInput.js          | 9 ++++++++-
 .../src/views/ChatInput/ChatInputFormattingToolbar.js    | 6 ++++++
 packages/react/src/views/DynamicHeader/DynamicHeader.js  | 1 +
 packages/react/src/views/SurfaceMenu/SurfaceItem.js      | 1 +
 packages/ui-elements/src/components/Menu/Menu.js         | 2 ++
 packages/ui-elements/src/components/Modal/ModalClose.js  | 8 +++++++-
 packages/ui-elements/src/components/ToastBar/ToastBar.js | 8 +++++++-
 7 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js
index e753b689ae..5bb9a56720 100644
--- a/packages/react/src/views/ChatInput/ChatInput.js
+++ b/packages/react/src/views/ChatInput/ChatInput.js
@@ -631,7 +631,13 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => {
             ref={messageRef}
           />
 
-          <input type="file" hidden ref={inputRef} onChange={sendAttachment} />
+          <input
+            type="file"
+            hidden
+            ref={inputRef}
+            onChange={sendAttachment}
+            aria-label="Upload file"
+          />
           <Box
             css={css`
               padding: 0.25rem;
@@ -646,6 +652,7 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => {
                   type="primary"
                   disabled={disableButton || isRecordingMessage}
                   icon="send"
+                  aria-label="Send message"
                 />
               ) : null
             ) : (
diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index 5d8c20a600..ff6eec3990 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -104,6 +104,7 @@ const ChatInputFormattingToolbar = ({
             square
             ghost
             disabled={isRecordingMessage}
+            aria-label="Emoji"
             onClick={() => {
               if (isRecordingMessage) return;
               setEmojiOpen(true);
@@ -152,6 +153,7 @@ const ChatInputFormattingToolbar = ({
             square
             ghost
             disabled={isRecordingMessage}
+            aria-label="Upload file"
             onClick={() => {
               if (isRecordingMessage) return;
               handleClickToOpenFiles();
@@ -181,6 +183,7 @@ const ChatInputFormattingToolbar = ({
             square
             ghost
             disabled={isRecordingMessage}
+            aria-label="Insert link"
             onClick={() => {
               if (isRecordingMessage) return;
               setInsertLinkOpen(true);
@@ -222,6 +225,7 @@ const ChatInputFormattingToolbar = ({
               square
               disabled={isRecordingMessage}
               ghost
+              aria-label={item.name}
               onClick={() => {
                 if (isRecordingMessage) return;
                 formatSelection(messageRef, item.pattern);
@@ -302,6 +306,7 @@ const ChatInputFormattingToolbar = ({
                   square
                   disabled={isRecordingMessage}
                   ghost
+                  aria-label={itemInFormatter.name}
                   onClick={() =>
                     formatSelection(messageRef, itemInFormatter.pattern)
                   }
@@ -323,6 +328,7 @@ const ChatInputFormattingToolbar = ({
               square
               ghost
               disabled={isRecordingMessage}
+              aria-label="More options"
               onClick={() => {
                 if (isRecordingMessage) return;
                 setPopoverOpen(!isPopoverOpen);
diff --git a/packages/react/src/views/DynamicHeader/DynamicHeader.js b/packages/react/src/views/DynamicHeader/DynamicHeader.js
index 22da5bc781..667d8f0e13 100644
--- a/packages/react/src/views/DynamicHeader/DynamicHeader.js
+++ b/packages/react/src/views/DynamicHeader/DynamicHeader.js
@@ -45,6 +45,7 @@ const DynamicHeader = ({
           display="inline"
           square
           size="small"
+          aria-label="Go back"
         >
           <Icon name={iconName} size="1.25rem" />
         </ActionButton>
diff --git a/packages/react/src/views/SurfaceMenu/SurfaceItem.js b/packages/react/src/views/SurfaceMenu/SurfaceItem.js
index 9674ead1cf..b99f4fbbb6 100644
--- a/packages/react/src/views/SurfaceMenu/SurfaceItem.js
+++ b/packages/react/src/views/SurfaceMenu/SurfaceItem.js
@@ -11,6 +11,7 @@ const SurfaceItem = ({ item, size }) => (
       size={size}
       iconSize="small"
       color={item.type}
+      aria-label={item.label}
     />
   </Tooltip>
 );
diff --git a/packages/ui-elements/src/components/Menu/Menu.js b/packages/ui-elements/src/components/Menu/Menu.js
index 5ad82f5c2d..7c05df6df6 100644
--- a/packages/ui-elements/src/components/Menu/Menu.js
+++ b/packages/ui-elements/src/components/Menu/Menu.js
@@ -73,6 +73,7 @@ const Menu = ({
             ghost
             icon="kebab"
             size={size}
+            aria-label="Options menu"
             onClick={(e) => {
               e.stopPropagation();
               setOpen((prev) => !prev);
@@ -84,6 +85,7 @@ const Menu = ({
           ghost
           icon="kebab"
           size={size}
+          aria-label="Options menu"
           onClick={(e) => {
             e.stopPropagation();
             setOpen((prev) => !prev);
diff --git a/packages/ui-elements/src/components/Modal/ModalClose.js b/packages/ui-elements/src/components/Modal/ModalClose.js
index 90f82f2d81..71c2fbcb14 100644
--- a/packages/ui-elements/src/components/Modal/ModalClose.js
+++ b/packages/ui-elements/src/components/Modal/ModalClose.js
@@ -23,7 +23,13 @@ export const ModalClose = ({
       style={{ ...style, ...styleOverrides }}
       {...props}
     >
-      <ActionButton ghost icon="cross" onClick={onClick} tabIndex={tabIndex} />
+      <ActionButton
+        ghost
+        icon="cross"
+        onClick={onClick}
+        tabIndex={tabIndex}
+        aria-label="Close"
+      />
     </Box>
   );
 };
diff --git a/packages/ui-elements/src/components/ToastBar/ToastBar.js b/packages/ui-elements/src/components/ToastBar/ToastBar.js
index 71ea53a9d8..dc783683ed 100644
--- a/packages/ui-elements/src/components/ToastBar/ToastBar.js
+++ b/packages/ui-elements/src/components/ToastBar/ToastBar.js
@@ -54,7 +54,13 @@ const ToastBar = ({ toast, onClose }) => {
     >
       <Icon size="1em" name={iconName} />
       {message}
-      <ActionButton icon="cross" size="small" onClick={onClose} ghost />
+      <ActionButton
+        icon="cross"
+        size="small"
+        onClick={onClose}
+        ghost
+        aria-label="Dismiss"
+      />
     </Box>
   );
 };