From fab025177dbcdaf9528ba4273b3cc516ac518943 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Muhammet=20Eren=20Karaku=C5=9F?= <erenkar950@gmail.com>
Date: Sun, 22 Feb 2026 11:15:16 +0300
Subject: [PATCH 1/2] fix(ui): move click handlers from Avatar to ButtonBase
 for keyboard accessibility

Move onClick event handlers from inner Avatar (div) elements to outer
ButtonBase (button) elements in CanvasHeader toolbar buttons. This
enables keyboard users to trigger button actions with Enter/Space keys,
as div elements are not focusable by default. Fixes all 7 toolbar
buttons: Back, Edit Name, Save Name, Cancel, API Endpoint, Save
Chatflow, and Settings.

Fixes #5819
---
 packages/ui/src/views/canvas/CanvasHeader.jsx | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/views/canvas/CanvasHeader.jsx b/packages/ui/src/views/canvas/CanvasHeader.jsx
index 85dccf45134..689a7a64d42 100644
--- a/packages/ui/src/views/canvas/CanvasHeader.jsx
+++ b/packages/ui/src/views/canvas/CanvasHeader.jsx
@@ -253,7 +253,17 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
             <Stack flexDirection='row' justifyContent='space-between' sx={{ width: '100%' }}>
                 <Stack flexDirection='row' sx={{ width: '100%', maxWidth: '50%' }}>
                     <Box>
-                        <ButtonBase title='Back' sx={{ borderRadius: '50%' }}>
+                        <ButtonBase
+                            title='Back'
+                            sx={{ borderRadius: '50%' }}
+                            onClick={() => {
+                                if (window.history.state && window.history.state.idx > 0) {
+                                    navigate(-1)
+                                } else {
+                                    navigate('/', { replace: true })
+                                }
+                            }}
+                        >
                             <Avatar
                                 variant='rounded'
                                 sx={{
@@ -268,13 +278,6 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                     }
                                 }}
                                 color='inherit'
-                                onClick={() => {
-                                    if (window.history.state && window.history.state.idx > 0) {
-                                        navigate(-1)
-                                    } else {
-                                        navigate('/', { replace: true })
-                                    }
-                                }}
                             >
                                 <IconChevronLeft stroke={1.5} size='1.3rem' />
                             </Avatar>
@@ -297,7 +300,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 +316,6 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                                     }
                                                 }}
                                                 color='inherit'
-                                                onClick={() => setEditingFlowName(true)}
                                             >
                                                 <IconPencil stroke={1.5} size='1.3rem' />
                                             </Avatar>
@@ -341,7 +343,7 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                         }
                                     }}
                                 />
-                                <ButtonBase title='Save Name' sx={{ borderRadius: '50%' }}>
+                                <ButtonBase title='Save Name' sx={{ borderRadius: '50%' }} onClick={submitFlowName}>
                                     <Avatar
                                         variant='rounded'
                                         sx={{
@@ -357,12 +359,11 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                             }
                                         }}
                                         color='inherit'
-                                        onClick={submitFlowName}
                                     >
                                         <IconCheck stroke={1.5} size='1.3rem' />
                                     </Avatar>
                                 </ButtonBase>
-                                <ButtonBase title='Cancel' sx={{ borderRadius: '50%' }}>
+                                <ButtonBase title='Cancel' sx={{ borderRadius: '50%' }} onClick={() => setEditingFlowName(false)}>
                                     <Avatar
                                         variant='rounded'
                                         sx={{
@@ -378,7 +379,6 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                             }
                                         }}
                                         color='inherit'
-                                        onClick={() => setEditingFlowName(false)}
                                     >
                                         <IconX stroke={1.5} size='1.3rem' />
                                     </Avatar>
@@ -389,7 +389,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 +404,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 +425,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 +444,7 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                     color: theme.palette.canvasHeader.settingsLight
                                 }
                             }}
-                            onClick={() => setSettingsOpen(!isSettingsOpen)}
+                            color='inherit'
                         >
                             <IconSettings stroke={1.5} size='1.3rem' />
                         </Avatar>

From 5c58b66b1d81e2402f5005edba82a964e801d91f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Muhammet=20Eren=20Karaku=C5=9F?= <erenkar950@gmail.com>
Date: Sun, 22 Feb 2026 11:18:58 +0300
Subject: [PATCH 2/2] refactor(ui): extract back navigation into
 handleBackClick function

Extract the multi-line back navigation logic from inline onClick into a
named handleBackClick function for improved readability, consistent with
other handlers in the component (submitFlowName, onAPIDialogClick, etc).
---
 packages/ui/src/views/canvas/CanvasHeader.jsx | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/views/canvas/CanvasHeader.jsx b/packages/ui/src/views/canvas/CanvasHeader.jsx
index 689a7a64d42..089e732b85e 100644
--- a/packages/ui/src/views/canvas/CanvasHeader.jsx
+++ b/packages/ui/src/views/canvas/CanvasHeader.jsx
@@ -156,6 +156,14 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
         }
     }
 
+    const handleBackClick = () => {
+        if (window.history.state && window.history.state.idx > 0) {
+            navigate(-1)
+        } else {
+            navigate('/', { replace: true })
+        }
+    }
+
     const onUploadFile = (file) => {
         setSettingsOpen(false)
         handleLoadFlow(file)
@@ -253,17 +261,7 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
             <Stack flexDirection='row' justifyContent='space-between' sx={{ width: '100%' }}>
                 <Stack flexDirection='row' sx={{ width: '100%', maxWidth: '50%' }}>
                     <Box>
-                        <ButtonBase
-                            title='Back'
-                            sx={{ borderRadius: '50%' }}
-                            onClick={() => {
-                                if (window.history.state && window.history.state.idx > 0) {
-                                    navigate(-1)
-                                } else {
-                                    navigate('/', { replace: true })
-                                }
-                            }}
-                        >
+                        <ButtonBase title='Back' sx={{ borderRadius: '50%' }} onClick={handleBackClick}>
                             <Avatar
                                 variant='rounded'
                                 sx={{