Skip to content

🎨 Palette: Replace native confirm dialog with accessible state-based soft confirmation #163

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 state-based soft confirmation #163

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-24 - Accessible Soft Confirmations
**Learning:** Native `window.confirm()` dialogs are unstyled, blocking, and not always perfectly accessible. Replacing them with state-based soft confirmations provides a better UX, but requires explicit visual structure (a side-by-side 'Cancel' button) and semantic ARIA announcements to remain safe and accessible.
**Action:** Always include a 'Cancel' button and a dynamic `role="status"` warning text when replacing native confirmation dialogs to prevent users from being trapped and to ensure screen readers announce the consequences.
45 changes: 38 additions & 7 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 @@ -10,6 +11,8 @@ interface SessionConsoleProps {
}

export function SessionConsole({ sessionId, sessionState, socket }: SessionConsoleProps) {
const [showEndConfirm, setShowEndConfirm] = useState(false);

const handleStartSession = () => {
socket.emit('facilitator', {
type: 'startSession',
Expand All @@ -25,14 +28,20 @@ export function SessionConsole({ sessionId, sessionState, socket }: SessionConso
};

const handleEndSession = () => {
if (confirm('Are you sure you want to end this session? This will generate the session summary.')) {
if (showEndConfirm) {
socket.emit('facilitator', {
type: 'endSession',
payload: { sessionId },
});
Comment on lines +31 to 35

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 30, 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 Disable confirm button after emitting endSession

When the inline Confirm End button is double-clicked before the sessionState.status broadcast changes to ENDED, each click enters this branch and emits another endSession. The server handler creates a SessionSummary for the same session, and prisma/schema.prisma makes SessionSummary.sessionId unique, so the second emit can regenerate the summary work and then throw a duplicate-key error; the previous native dialog required a separate confirmation for each emit. Consider setting a pending/reset state or disabling the button immediately after the first confirmed click.

Useful? React with 👍 / 👎.

} else {
setShowEndConfirm(true);
}
};

const handleCancelEnd = () => {
setShowEndConfirm(false);
};

if (!sessionState) {
return (
<div className="bg-white rounded-lg shadow p-6">
Expand Down Expand Up @@ -84,12 +93,34 @@ 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>
showEndConfirm ? (
<div className="space-y-2">
<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
</button>
<button
onClick={handleCancelEnd}
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>
<div role="status" className="text-sm text-red-600 mt-2">
Are you sure you want to end this session? This will generate the session summary.
</div>
</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>
)
)}
</div>
</div>
Expand Down