From fab1d39323ec77179d77e1358c9e54b11ae77927 Mon Sep 17 00:00:00 2001
From: huangkevin-apr <huangkevinapr@outlook.com>
Date: Mon, 2 Feb 2026 21:56:34 +0800
Subject: [PATCH] Fix a11y: add accessible name for icon button (#844)

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
---
 .../components/multi-agent-visualization.tsx      | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/web/src/app/landing/components/multi-agent-visualization.tsx b/web/src/app/landing/components/multi-agent-visualization.tsx
index c6e0b441c..f6e15264a 100644
--- a/web/src/app/landing/components/multi-agent-visualization.tsx
+++ b/web/src/app/landing/components/multi-agent-visualization.tsx
@@ -123,12 +123,20 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
       <div className="flex h-6 w-full shrink-0 items-center justify-center">
         <div className="bg-muted/50 z-[200] flex rounded-3xl px-4 py-2">
           <Tooltip title={t("moveToPrevious")}>
-            <Button variant="ghost" onClick={prevStep}>
+            <Button
+              variant="ghost"
+              onClick={prevStep}
+              aria-label={t("moveToPrevious")}
+            >
               <ChevronLeft className="size-5" />
             </Button>
           </Tooltip>
           <Tooltip title={t("playPause")}>
-            <Button variant="ghost" onClick={togglePlay}>
+            <Button
+              variant="ghost"
+              onClick={togglePlay}
+              aria-label={t("playPause")}
+            >
               {playing ? (
                 <Pause className="size-5" />
               ) : (
@@ -143,6 +151,7 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
                 setHasPlayed(true);
                 nextStep();
               }}
+              aria-label={t("moveToNext")}
             >
               <ChevronRight className="size-5" />
             </Button>
@@ -158,6 +167,7 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
                 setHasPlayed(true);
                 activateStep(value!);
               }}
+              aria-label="Timeline"
             />
           </div>
           <Tooltip title={t("toggleFullscreen")}>
@@ -168,6 +178,7 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
                 setHasPlayed(true);
                 void toggleFullscreen();
               }}
+              aria-label={t("toggleFullscreen")}
             >
               {fullscreen ? (
                 <Minimize className="size-5" />