Skip to content

fix(ui): move click handlers to ButtonBase for keyboard accessibility #5821

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eren-karakus0 wants to merge 2 commits into
base: main
Choose a base branch
from
+16 −20
Open

fix(ui): move click handlers to ButtonBase for keyboard accessibility #5821

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fab0251
fix(ui): move click handlers from Avatar to ButtonBase for keyboard a…
eren-karakus0 Feb 22, 2026
5c58b66
refactor(ui): extract back navigation into handleBackClick function
eren-karakus0 Feb 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 16 additions & 20 deletions packages/ui/src/views/canvas/CanvasHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,14 @@
}
}

const handleBackClick = () => {
if (window.history.state && window.history.state.idx > 0) {
navigate(-1)
} else {
navigate('/', { replace: true })
}
}

const onUploadFile = (file) => {
setSettingsOpen(false)
handleLoadFlow(file)
Expand Down Expand Up @@ -253,7 +261,7 @@
<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={handleBackClick}>
<Avatar
variant='rounded'
sx={{
Expand All @@ -268,13 +276,6 @@
}
}}
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>
Expand All @@ -297,7 +298,7 @@
</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={{
Expand All @@ -313,7 +314,6 @@
}
}}
color='inherit'
onClick={() => setEditingFlowName(true)}
>
<IconPencil stroke={1.5} size='1.3rem' />
</Avatar>
Expand Down Expand Up @@ -341,7 +341,7 @@
}
}}
/>
<ButtonBase title='Save Name' sx={{ borderRadius: '50%' }}>
<ButtonBase title='Save Name' sx={{ borderRadius: '50%' }} onClick={submitFlowName}>
<Avatar
variant='rounded'
sx={{
Expand All @@ -357,12 +357,11 @@
}
}}
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={{
Expand All @@ -378,7 +377,6 @@
}
}}
color='inherit'
onClick={() => setEditingFlowName(false)}
>
<IconX stroke={1.5} size='1.3rem' />
</Avatar>
Expand All @@ -389,7 +387,7 @@
</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={{
Expand All @@ -404,14 +402,13 @@
}
}}
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={{
Expand All @@ -426,13 +423,12 @@
}
}}
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)}>

Check failure on line 431 in packages/ui/src/views/canvas/CanvasHeader.jsx

View workflow job for this annotation

GitHub Actions / build (ubuntu-latest, 18.15.0) 

Replace `·ref={settingsRef}·title='Settings'·sx={{·borderRadius:·'50%'·}}·onClick={()·=>·setSettingsOpen(!isSettingsOpen)}` with `⏎························ref={settingsRef}⏎························title='Settings'⏎························sx={{·borderRadius:·'50%'·}}⏎························onClick={()·=>·setSettingsOpen(!isSettingsOpen)}⏎····················`
<Avatar
variant='rounded'
sx={{
Expand All @@ -446,7 +442,7 @@
color: theme.palette.canvasHeader.settingsLight
}
}}
onClick={() => setSettingsOpen(!isSettingsOpen)}
color='inherit'
>
<IconSettings stroke={1.5} size='1.3rem' />
</Avatar>
Expand Down
Loading