fix: move onClick handlers from Avatar to ButtonBase for keyboard accessibility#5845
fix: move onClick handlers from Avatar to ButtonBase for keyboard accessibility#5845fuleinist wants to merge 1 commit intoFlowiseAI:mainfrom
Conversation
…essibility - Fixes FlowiseAI#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
Summary of ChangesHello @fuleinist, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request addresses a critical accessibility concern by refactoring how click events are handled for key interactive elements within the canvas header. By relocating event listeners from non-interactive Highlights
Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request addresses an accessibility issue by moving onClick handlers from Avatar components to their parent ButtonBase components. While the changes made are correct, the fix is incomplete. I've identified several other buttons within the same component that were not updated and still follow the inaccessible pattern. My review comment provides details on these missed instances. Applying the fix consistently across the entire component is necessary to fully resolve the accessibility issue.
| {chatflow?.id && ( | ||
| <Available permission={savePermission}> | ||
| <ButtonBase title='Edit Name' sx={{ borderRadius: '50%' }}> | ||
| <ButtonBase title='Edit Name' sx={{ borderRadius: '50%' }} onClick={() => setEditingFlowName(true)}> |
There was a problem hiding this comment.
While this change correctly improves keyboard accessibility for this button, the fix is incomplete. Several other buttons in this component still have the onClick handler on the Avatar instead of the ButtonBase. To fully address the accessibility issue, please apply the same fix to the following buttons:
- 'Back' button (lines 256-281)
- 'Save Name' button (lines 343-363)
- 'Cancel' button (lines 364-384)
|
Superseded by complete fix in #5846 which addresses all 7 buttons in the canvas header. |
2 participants
Description
Fixes #5819: Misplaced click event in chat flow window
This PR moves the onClick event handlers from the Avatar components to their parent ButtonBase components for 4 buttons in the canvas header:
Problem
The click events were bound to the Avatar (which renders as a div), making these buttons non-functional when activated via keyboard (Enter or Space key). This is an accessibility issue that prevents keyboard-only users and screen reader users from interacting with these buttons.
Solution
Move the onClick handler from the child Avatar element to the parent ButtonBase element, which is a proper button element that responds to keyboard interactions.
Testing
Accessibility
This fix is particularly important for keyboard-only users and screen reader users, as noted in the original issue report.