From a48ad2219fa885b4e87d84bdebcd77bab4e9a0db Mon Sep 17 00:00:00 2001
From: Gaurav Verma <gaurav@smallest.ai>
Date: Thu, 20 Mar 2025 21:29:47 +0530
Subject: [PATCH] feat: add aria-labels for accessibility in
 AddVariablesDropdown and ToolbarPlugin components (#20260)

---
 packages/ui/components/editor/plugins/AddVariablesDropdown.tsx | 2 +-
 packages/ui/components/editor/plugins/ToolbarPlugin.tsx        | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
index 2441dc34cb..10fa203787 100644
--- a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
+++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
@@ -15,7 +15,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
 
   return (
     <Dropdown>
-      <DropdownMenuTrigger className="focus:bg-muted pt-[6px]">
+      <DropdownMenuTrigger aria-label="Add variable" className="focus:bg-muted pt-[6px]">
         <div className="items-center ">
           {props.isTextEditor ? (
             <>
diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
index 037a02e2a9..a9961ef3a3 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
@@ -470,6 +470,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
         <>
           {!props.excludedToolbarItems?.includes("bold") && (
             <Button
+              aria-label="Bold"
               color="minimal"
               variant="icon"
               type="button"
@@ -482,6 +483,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
           )}
           {!props.excludedToolbarItems?.includes("italic") && (
             <Button
+              aria-label="Italic"
               color="minimal"
               variant="icon"
               type="button"
@@ -495,6 +497,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
           {!props.excludedToolbarItems?.includes("link") && (
             <>
               <Button
+                aria-label="Link"
                 color="minimal"
                 variant="icon"
                 type="button"