From 335a95616860ec1c826307b450600821a5c2d800 Mon Sep 17 00:00:00 2001
From: RavindiFernando <ravindifernando3@gmail.com>
Date: Sat, 20 Jun 2026 17:32:15 +0530
Subject: [PATCH] fix(a11y): add aria-label to icon-only buttons in EnvManager

Signed-off-by: RavindiFernando <ravindifernando3@gmail.com>
---
 modules/playground/components/env-manager.tsx |  3 ++-
 tests/env-manager.test.tsx                    | 10 +++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/modules/playground/components/env-manager.tsx b/modules/playground/components/env-manager.tsx
index bc41e6cd..48b5e1a0 100644
--- a/modules/playground/components/env-manager.tsx
+++ b/modules/playground/components/env-manager.tsx
@@ -154,7 +154,7 @@ export function EnvManager({
                     <KeyRound className="h-3.5 w-3.5" />
                     Environment Variables
                 </div>
-                <Button size="icon" variant="ghost" className="h-5 w-5" onClick={handleAddVar} title="Add Variable">
+                <Button size="icon" variant="ghost" className="h-5 w-5" onClick={handleAddVar} aria-label="Add Variable">
                     <Plus className="h-3.5 w-3.5" />
                 </Button>
             </SidebarGroupLabel>
@@ -216,6 +216,7 @@ export function EnvManager({
                                         variant="ghost"
                                         className="h-8 w-8 text-muted-foreground hover:text-red-500 shrink-0"
                                         onClick={() => handleRemoveVar(idx)}
+                                        aria-label={`Remove variable ${idx + 1}`}
                                     >
                                         <Trash2 className="h-3.5 w-3.5" />
                                     </Button>
diff --git a/tests/env-manager.test.tsx b/tests/env-manager.test.tsx
index 7f53bca9..49516c92 100644
--- a/tests/env-manager.test.tsx
+++ b/tests/env-manager.test.tsx
@@ -11,8 +11,8 @@ vi.mock("@/components/ui/sidebar", () => ({
 }));
 
 vi.mock("@/components/ui/button", () => ({
-  Button: ({ children, onClick, disabled, className, title }: { children: React.ReactNode; onClick?: () => void; disabled?: boolean; className?: string; title?: string }) => (
-    <button onClick={onClick} disabled={disabled} className={className} title={title}>
+  Button: ({ children, onClick, disabled, className, "aria-label": ariaLabel }: { children: React.ReactNode; onClick?: () => void; disabled?: boolean; className?: string; "aria-label"?: string }) => (
+    <button onClick={onClick} disabled={disabled} className={className} aria-label={ariaLabel}>
       {children}
     </button>
   ),
@@ -76,7 +76,7 @@ describe("EnvManager Component", () => {
       />
     );
 
-    const addButton = screen.getByTitle("Add Variable");
+    const addButton = screen.getByRole("button", { name: "Add Variable" });
     fireEvent.click(addButton);
 
     const keyInput = screen.getByPlaceholderText("API_KEY") as HTMLInputElement;
@@ -102,7 +102,7 @@ describe("EnvManager Component", () => {
     );
 
     // Add first variable
-    const addButton = screen.getByTitle("Add Variable");
+    const addButton = screen.getByRole("button", { name: "Add Variable" });
     fireEvent.click(addButton);
     const inputs = screen.getAllByPlaceholderText("API_KEY");
     fireEvent.change(inputs[0], { target: { value: "PORT" } });
@@ -129,7 +129,7 @@ describe("EnvManager Component", () => {
     );
 
     // Add a variable (will start empty)
-    const addButton = screen.getByTitle("Add Variable");
+    const addButton = screen.getByRole("button", { name: "Add Variable" });
     fireEvent.click(addButton);
 
     expect(screen.getByText("⚠️ All keys must be filled.")).toBeDefined();