🎨 Palette: Replace native confirm dialog with accessible soft confirmation#153
🎨 Palette: Replace native confirm dialog with accessible soft confirmation#153Sczitzo wants to merge 1 commit into
Conversation
…ation
* Removed blocking `window.confirm` from `handleEndSession`.
* Implemented state-based soft confirmation with explicit "Confirm End" and "Cancel" buttons.
* Preserved the warning text ("This will generate the session summary") and added `role="status"` for screen reader announcements.
* Documented learning in `.Jules/palette.md`.
Co-authored-by: Sczitzo <46541128+Sczitzo@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c02776e5b9
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| End Session | ||
| </button> | ||
| ) : ( | ||
| <div className="space-y-2"> |
There was a problem hiding this comment.
When End Session is triggered from the keyboard, this branch replaces the focused button with a non-focusable <div> and never moves focus to either new action. Browsers drop focus to the document when the active element is removed, so keyboard/screen-reader users can be left away from Confirm End/Cancel; keep the trigger as the same button or focus one of the new buttons when showEndConfirm becomes true.
Useful? React with 👍 / 👎.
1 participant
💡 What: Replaced the native
window.confirm()dialog used when ending a session with an inline, state-based soft confirmation. It requires the user to explicitly click "Confirm End" or "Cancel".🎯 Why: Native confirm dialogs create blocking, inaccessible experiences and cannot be styled to match the application's design system. A soft confirmation prevents accidental clicks while keeping the user in control of the interface without trapping them.
📸 Before/After: Before, clicking "End Session" triggered a browser alert. Now, it expands the UI to show red "Confirm End" and gray "Cancel" buttons inline, along with the warning text.
♿ Accessibility: Added
role="status"to the warning text ("Are you sure you want to end this session? This will generate the session summary.") so that screen readers will automatically announce the consequences of the destructive action when the confirmation state is triggered. Provided an explicit "Cancel" button to allow users to back out without feeling trapped.PR created automatically by Jules for task 729662300471927289 started by @Sczitzo