From c9e76f86960efd21f81c0a34501bdbc8e0b81915 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           | 1 +
 .../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/Modal/ModalClose.js   | 8 +++++++-
 packages/ui-elements/src/components/ToastBar/ToastBar.js  | 8 +++++++-
 6 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js
index e03f804226..c9aed8dfcc 100644
--- a/packages/react/src/views/ChatInput/ChatInput.js
+++ b/packages/react/src/views/ChatInput/ChatInput.js
@@ -846,6 +846,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 25c96c6f20..0c49a48889 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -131,6 +131,7 @@ const ChatInputFormattingToolbar = ({
             square
             ghost
             disabled={isRecordingMessage}
+            aria-label="Emoji"
             onClick={() => {
               if (isRecordingMessage) return;
               openEmojiPicker();
@@ -181,6 +182,7 @@ const ChatInputFormattingToolbar = ({
             square
             ghost
             disabled={isRecordingMessage}
+            aria-label="Upload file"
             onClick={() => {
               if (isRecordingMessage) return;
               handleClickToOpenFiles();
@@ -212,6 +214,7 @@ const ChatInputFormattingToolbar = ({
             ghost
             disabled={isRecordingMessage}
             onMouseDown={(event) => event.preventDefault()}
+            aria-label="Insert link"
             onClick={() => {
               if (isRecordingMessage) return;
               openInsertLink();
@@ -253,6 +256,7 @@ const ChatInputFormattingToolbar = ({
               square
               disabled={isRecordingMessage}
               ghost
+              aria-label={item.name}
               onClick={() => {
                 if (isRecordingMessage) return;
                 formatSelection(messageRef, item.pattern);
@@ -335,6 +339,7 @@ const ChatInputFormattingToolbar = ({
                   square
                   disabled={isRecordingMessage}
                   ghost
+                  aria-label={itemInFormatter.name}
                   onClick={() =>
                     formatSelection(messageRef, itemInFormatter.pattern)
                   }
@@ -356,6 +361,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 f9f061b8b8..1fe477155a 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/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 dcec7d6f5f..5f18ba938e 100644
--- a/packages/ui-elements/src/components/ToastBar/ToastBar.js
+++ b/packages/ui-elements/src/components/ToastBar/ToastBar.js
@@ -62,7 +62,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>
   );
 };