Fix a11y: add accessible name for icon button (#844)

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
This commit is contained in:
huangkevin-apr
2026-02-02 21:56:34 +08:00
committed by GitHub
parent e3e7a83f40
commit fab1d39323

View File

@@ -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="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"> <div className="bg-muted/50 z-[200] flex rounded-3xl px-4 py-2">
<Tooltip title={t("moveToPrevious")}> <Tooltip title={t("moveToPrevious")}>
<Button variant="ghost" onClick={prevStep}> <Button
variant="ghost"
onClick={prevStep}
aria-label={t("moveToPrevious")}
>
<ChevronLeft className="size-5" /> <ChevronLeft className="size-5" />
</Button> </Button>
</Tooltip> </Tooltip>
<Tooltip title={t("playPause")}> <Tooltip title={t("playPause")}>
<Button variant="ghost" onClick={togglePlay}> <Button
variant="ghost"
onClick={togglePlay}
aria-label={t("playPause")}
>
{playing ? ( {playing ? (
<Pause className="size-5" /> <Pause className="size-5" />
) : ( ) : (
@@ -143,6 +151,7 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
setHasPlayed(true); setHasPlayed(true);
nextStep(); nextStep();
}} }}
aria-label={t("moveToNext")}
> >
<ChevronRight className="size-5" /> <ChevronRight className="size-5" />
</Button> </Button>
@@ -158,6 +167,7 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
setHasPlayed(true); setHasPlayed(true);
activateStep(value!); activateStep(value!);
}} }}
aria-label="Timeline"
/> />
</div> </div>
<Tooltip title={t("toggleFullscreen")}> <Tooltip title={t("toggleFullscreen")}>
@@ -168,6 +178,7 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
setHasPlayed(true); setHasPlayed(true);
void toggleFullscreen(); void toggleFullscreen();
}} }}
aria-label={t("toggleFullscreen")}
> >
{fullscreen ? ( {fullscreen ? (
<Minimize className="size-5" /> <Minimize className="size-5" />