From 60c2eeb376c4a8161b201b2edf1e1d827d82ff3e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 5 Jul 2026 05:31:54 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Replace=20native=20co?=
 =?UTF-8?q?nfirm=20dialog=20with=20accessible=20soft=20confirmation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extracted the blocking `window.confirm()` dialog in the SessionConsole "End Session" action and replaced it with a safe, state-based inline soft confirmation. This preserves the warning text for screen readers using `role="status"` and provides an explicit "Cancel" button to back out safely, improving the overall UX and accessibility of destructive actions.

Co-authored-by: Sczitzo <46541128+Sczitzo@users.noreply.github.com>
---
 .Jules/palette.md                             |  4 ++
 src/components/facilitator/SessionConsole.tsx | 52 +++++++++++++++----
 2 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 2802bd6..29246f5 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -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"`.
diff --git a/src/components/facilitator/SessionConsole.tsx b/src/components/facilitator/SessionConsole.tsx
index 252dde2..b5694ed 100644
--- a/src/components/facilitator/SessionConsole.tsx
+++ b/src/components/facilitator/SessionConsole.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { Socket } from 'socket.io-client';
 import type { SessionStatePayload } from '@/types/websocket';
 
@@ -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) {
@@ -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
+                </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>