Skip to content

🎨 Palette: Replace native confirm dialog with accessible soft confirmation #168

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
Sczitzo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Replace native confirm dialog with accessible soft confirmation #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,7 @@
## 2026-10-24 - Form Success State Feedback
**Learning:** Temporarily disabling the submit button and changing its state to a success message without wiping the form inputs asynchronously prevents data loss while maintaining clear feedback for the user on successful submissions.
**Action:** For successful form submissions, temporarily (e.g., 2s) disable the submit button, change its text to a success message, and reset the form inputs immediately rather than inside the timeout.

## 2026-10-25 - Smart Confirm Safety
**Learning:** Replacing native `window.confirm()` dialogs with state-based soft confirmations requires explicitly preserving and rendering any secondary contextual information or warnings dynamically with `role="status"` to maintain accessibility and screen reader support.
**Action:** When extracting native confirm dialogs, ensure both a 'Cancel' button is provided and the original warning text is rendered dynamically with `role="status"`.
52 changes: 41 additions & 11 deletions src/components/facilitator/SessionConsole.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client';

import { useState } from 'react';
import { Socket } from 'socket.io-client';
import type { SessionStatePayload } from '@/types/websocket';

Expand All @@ -24,13 +25,18 @@ export function SessionConsole({ sessionId, sessionState, socket }: SessionConso
});
};

const [isConfirmingEnd, setIsConfirmingEnd] = useState(false);

const handleEndSession = () => {
if (confirm('Are you sure you want to end this session? This will generate the session summary.')) {
socket.emit('facilitator', {
type: 'endSession',
payload: { sessionId },
});
if (!isConfirmingEnd) {
setIsConfirmingEnd(true);
return;
}
socket.emit('facilitator', {
type: 'endSession',
payload: { sessionId },
});
setIsConfirmingEnd(false);
};

if (!sessionState) {
Expand Down Expand Up @@ -84,12 +90,36 @@ export function SessionConsole({ sessionId, sessionState, socket }: SessionConso
) : null}

{sessionState.status !== 'ENDED' && (
<button
onClick={handleEndSession}
className="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus-visible-ring"
>
End Session
</button>
<div className="space-y-2">
{isConfirmingEnd ? (
<div className="flex gap-2">
<button
onClick={handleEndSession}
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus-visible-ring"
>
Confirm End
Comment on lines +96 to +100

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Prevent double-clicks from confirming session end

When a user rapidly double-clicks the original End Session button, the first click sets isConfirmingEnd and immediately replaces it with this Confirm End button in the same row; the second click can then land on the new button and emit endSession without a deliberate confirmation. Because ending a session generates the summary and closes the session, please make the confirm step require a separate gesture that cannot be satisfied by the same double-click, such as deferring/enabling the confirm action after the initial click or rendering it away from the original click target.

Useful? React with 👍 / 👎.

</button>
<button
onClick={() => setIsConfirmingEnd(false)}
className="flex-1 px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 focus-visible-ring"
>
Cancel
</button>
</div>
) : (
<button
onClick={handleEndSession}
className="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus-visible-ring"
>
End Session
</button>
)}
{isConfirmingEnd && (
<p role="status" className="text-sm text-red-600">
Are you sure you want to end this session? This will generate the session summary.
</p>
)}
</div>
)}
</div>
</div>
Expand Down