Skip to content

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

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 #153

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 - Soft Confirmation Pattern
**Learning:** Native `window.confirm()` dialogs create blocking, inaccessible experiences and lack styling options. State-based soft confirmations require explicit 'Cancel' options to prevent trapping users and need `role="status"` to ensure warning text is announced to screen readers.
**Action:** Replace `window.confirm()` with state-based UI containing confirm/cancel buttons and dynamic warning text with `role="status"`.
53 changes: 42 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 @@ -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,12 +28,16 @@ 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.')) {
socket.emit('facilitator', {
type: 'endSession',
payload: { sessionId },
});
if (!showEndConfirm) {
setShowEndConfirm(true);
return;
}

socket.emit('facilitator', {
type: 'endSession',
payload: { sessionId },
});
setShowEndConfirm(false);
};

if (!sessionState) {
Expand Down Expand Up @@ -84,12 +91,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">
{!showEndConfirm ? (
<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">

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 20, 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 Preserve focus when opening confirmation

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 👍 / 👎.

<div className="flex gap-2">
<button
onClick={handleEndSession}
className="flex-1 px-4 py-2 bg-red-600 text-white font-bold rounded-lg hover:bg-red-700 focus-visible-ring"
>
Confirm End
</button>
<button
onClick={() => setShowEndConfirm(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>
<div role="status" className="text-sm text-red-600 font-medium">
Are you sure you want to end this session? This will generate the session summary.
</div>
</div>
)}
</div>
)}
</div>
</div>
Expand Down