From 1dde48fe97c6691feeeee886fb4d2185976e3aef Mon Sep 17 00:00:00 2001
From: OpenClaw Agent <agent@openclaw.ai>
Date: Thu, 26 Feb 2026 02:04:29 +0800
Subject: [PATCH] fix: move onClick handlers from Avatar to ButtonBase for
 keyboard accessibility

- Fixes #5819: Misplaced click event in chat flow window
- Moves onClick from Avatar to ButtonBase for 4 buttons:
  - Edit Name
  - API Endpoint
  - Save
  - Settings
- Enables keyboard users (Enter/Space) to trigger these buttons
- Important accessibility fix for keyboard-only and screen reader users
---
 packages/ui/src/views/canvas/CanvasHeader.jsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/views/canvas/CanvasHeader.jsx b/packages/ui/src/views/canvas/CanvasHeader.jsx
index 85dccf45134..6289e6ffd95 100644
--- a/packages/ui/src/views/canvas/CanvasHeader.jsx
+++ b/packages/ui/src/views/canvas/CanvasHeader.jsx
@@ -297,7 +297,7 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                 </Typography>
                                 {chatflow?.id && (
                                     <Available permission={savePermission}>
-                                        <ButtonBase title='Edit Name' sx={{ borderRadius: '50%' }}>
+                                        <ButtonBase title='Edit Name' sx={{ borderRadius: '50%' }} onClick={() => setEditingFlowName(true)}>
                                             <Avatar
                                                 variant='rounded'
                                                 sx={{
@@ -313,7 +313,6 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                                     }
                                                 }}
                                                 color='inherit'
-                                                onClick={() => setEditingFlowName(true)}
                                             >
                                                 <IconPencil stroke={1.5} size='1.3rem' />
                                             </Avatar>
@@ -389,7 +388,7 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                 </Stack>
                 <Box>
                     {chatflow?.id && (
-                        <ButtonBase title='API Endpoint' sx={{ borderRadius: '50%', mr: 2 }}>
+                        <ButtonBase title='API Endpoint' sx={{ borderRadius: '50%', mr: 2 }} onClick={onAPIDialogClick}>
                             <Avatar
                                 variant='rounded'
                                 sx={{
@@ -404,14 +403,13 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                     }
                                 }}
                                 color='inherit'
-                                onClick={onAPIDialogClick}
                             >
                                 <IconCode stroke={1.5} size='1.3rem' />
                             </Avatar>
                         </ButtonBase>
                     )}
                     <Available permission={savePermission}>
-                        <ButtonBase title={`Save ${title}`} sx={{ borderRadius: '50%', mr: 2 }}>
+                        <ButtonBase title={`Save ${title}`} sx={{ borderRadius: '50%', mr: 2 }} onClick={onSaveChatflowClick}>
                             <Avatar
                                 variant='rounded'
                                 sx={{
@@ -426,13 +424,12 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                     }
                                 }}
                                 color='inherit'
-                                onClick={onSaveChatflowClick}
                             >
                                 <IconDeviceFloppy stroke={1.5} size='1.3rem' />
                             </Avatar>
                         </ButtonBase>
                     </Available>
-                    <ButtonBase ref={settingsRef} title='Settings' sx={{ borderRadius: '50%' }}>
+                    <ButtonBase ref={settingsRef} title='Settings' sx={{ borderRadius: '50%' }} onClick={() => setSettingsOpen(!isSettingsOpen)}>
                         <Avatar
                             variant='rounded'
                             sx={{
@@ -446,7 +443,6 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                     color: theme.palette.canvasHeader.settingsLight
                                 }
                             }}
-                            onClick={() => setSettingsOpen(!isSettingsOpen)}
                         >
                             <IconSettings stroke={1.5} size='1.3rem' />
                         </Avatar>