mirror of
https://gitee.com/wanwujie/deer-flow
synced 2026-04-29 08:44:48 +08:00
Fix a11y: add accessible name for icon button (#844)
Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
This commit is contained in:
@@ -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" />
|
||||||
|
|||||||
Reference in New Issue
Block a user