Fix P2 issues

client/src/components/modals/ConnectionConfigModal.tsx

@@ -2,8 +2,8 @@ import { useState, useEffect, useMemo, type FormEvent } from 'react';
 import { toast } from 'sonner';
 import { Modal } from '../ui/Modal';
 import { Button } from '../ui/Button';
+import { ConfirmDialog } from '../ui/ConfirmDialog';
 import { useRackStore } from '../../store/useRackStore';
-import type { Connection } from '../../types';
 
 interface ConnectionConfigModalProps {
   connectionId: string | null;
@@ -29,8 +29,9 @@ const PRESET_COLORS = [
 ];
 
 export function ConnectionConfigModal({ connectionId, open, onClose }: ConnectionConfigModalProps) {
-  const { racks, setCablingFromPortId, updateConnection, deleteConnection } = useRackStore();
+  const { racks, updateConnection, deleteConnection } = useRackStore();
   const [loading, setLoading] = useState(false);
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
 
   // Synchronously find the connection from the global store
   const connection = useMemo(() => {
@@ -77,11 +78,11 @@ export function ConnectionConfigModal({ connectionId, open, onClose }: Connectio
 
   async function handleDelete() {
     if (!connectionId) return;
-    if (!confirm('Are you sure you want to remove this connection?')) return;
     setLoading(true);
     try {
       await deleteConnection(connectionId);
       toast.success('Connection removed');
+      setConfirmDeleteOpen(false);
       onClose();
     } catch (err) {
       toast.error(err instanceof Error ? err.message : 'Delete failed');
@@ -93,89 +94,107 @@ export function ConnectionConfigModal({ connectionId, open, onClose }: Connectio
   if (!open || !connection) return null;
 
   return (
-    <Modal open={open} onClose={() => !loading && onClose()} title="Edit Connection">
-      <div className="flex flex-col gap-6">
-        <p className="text-sm text-slate-400">
-          Customize the cable style and color.
-        </p>
+    <>
+      <Modal open={open} onClose={() => !loading && onClose()} title="Edit Connection">
+        <div className="flex flex-col gap-6">
+          <p className="text-sm text-slate-400">
+            Customize the cable style and color.
+          </p>
 
-        <form id="connection-form" onSubmit={handleSubmit} className="flex flex-col gap-5">
-          {/* Label Name */}
-          <div className="flex flex-col gap-1.5">
-            <label className="text-sm font-semibold text-slate-300">Cable Label (Optional)</label>
-            <input
-              type="text"
-              value={label}
-              onChange={(e) => setLabel(e.target.value)}
-              placeholder="e.g. Uplink to Core"
-              className="px-3 py-2 rounded-md bg-slate-900 border border-slate-700 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
-            />
-          </div>
+          <form id="connection-form" onSubmit={handleSubmit} className="flex flex-col gap-5">
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="connection-label" className="text-sm font-semibold text-slate-300">Cable Label (Optional)</label>
+              <input
+                id="connection-label"
+                type="text"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                placeholder="e.g. Uplink to Core"
+                className="px-3 py-2 rounded-md bg-slate-900 border border-slate-700 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+              />
+            </div>
 
-          {/* Color Picker */}
-          <div className="flex flex-col gap-2">
-            <label className="text-sm font-semibold text-slate-300">Cable Color</label>
-            <div className="flex flex-wrap gap-2">
-              {PRESET_COLORS.map((c) => (
-                <button
-                  key={c}
-                  type="button"
-                  onClick={() => setColor(c)}
-                  style={{ backgroundColor: c }}
-                  className={`w-8 h-8 rounded-full border-2 transition-all hover:scale-110 ${
-                    color === c ? 'border-white scale-110 shadow-lg' : 'border-transparent'
-                  }`}
-                  aria-label={`Select color ${c}`}
-                />
-              ))}
-              <div className="relative w-8 h-8 rounded-full overflow-hidden border-2 border-slate-700">
-                <input
-                  type="color"
-                  value={color}
-                  onChange={(e) => setColor(e.target.value)}
-                  className="absolute -top-2 -left-2 w-12 h-12 cursor-pointer"
-                  title="Custom color"
-                />
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-semibold text-slate-300">Cable Color</label>
+              <div className="flex flex-wrap gap-2">
+                {PRESET_COLORS.map((c) => (
+                  <button
+                    key={c}
+                    type="button"
+                    onClick={() => setColor(c)}
+                    style={{ backgroundColor: c }}
+                    className={`w-8 h-8 rounded-full border-2 transition-all hover:scale-110 ${
+                      color === c ? 'border-white scale-110 shadow-lg' : 'border-transparent'
+                    }`}
+                    aria-label={`Select color ${c}`}
+                  />
+                ))}
+                <div className="relative w-8 h-8 rounded-full overflow-hidden border-2 border-slate-700">
+                  <input
+                    type="color"
+                    value={color}
+                    onChange={(e) => setColor(e.target.value)}
+                    className="absolute -top-2 -left-2 w-12 h-12 cursor-pointer"
+                    title="Custom color"
+                    aria-label="Select custom cable color"
+                  />
+                </div>
               </div>
             </div>
-          </div>
 
-          {/* Edge Style */}
-          <div className="flex flex-col gap-2">
-            <label className="text-sm font-semibold text-slate-300">Curve Style</label>
-            <div className="grid grid-cols-3 gap-2">
-              {EDGE_STYLES.map((style) => (
-                <button
-                  key={style.value}
-                  type="button"
-                  onClick={() => setEdgeType(style.value)}
-                  className={`px-3 py-2 rounded-md border text-xs font-medium transition-all ${
-                    edgeType === style.value
-                      ? 'bg-blue-500/10 border-blue-500 text-blue-400'
-                      : 'bg-slate-900 border-slate-700 text-slate-400 hover:border-slate-500 hover:text-slate-200'
-                  }`}
-                >
-                  {style.label}
-                </button>
-              ))}
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-semibold text-slate-300">Curve Style</label>
+              <div className="grid grid-cols-3 gap-2">
+                {EDGE_STYLES.map((style) => (
+                  <button
+                    key={style.value}
+                    type="button"
+                    onClick={() => setEdgeType(style.value)}
+                    className={`px-3 py-2 rounded-md border text-xs font-medium transition-all ${
+                      edgeType === style.value
+                        ? 'bg-blue-500/10 border-blue-500 text-blue-400'
+                        : 'bg-slate-900 border-slate-700 text-slate-400 hover:border-slate-500 hover:text-slate-200'
+                    }`}
+                    aria-pressed={edgeType === style.value}
+                  >
+                    {style.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </form>
+
+          <div className="flex items-center justify-between pt-4 border-t border-slate-800">
+            <Button
+              type="button"
+              variant="ghost"
+              className="text-red-400 hover:text-red-300"
+              onClick={() => setConfirmDeleteOpen(true)}
+              disabled={loading}
+            >
+              Delete Connection
+            </Button>
+            <div className="flex gap-2">
+              <Button type="button" variant="ghost" onClick={onClose} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" form="connection-form" variant="primary" loading={loading}>
+                Save Changes
+              </Button>
             </div>
           </div>
-        </form>
-
-        <div className="flex items-center justify-between pt-4 border-t border-slate-800">
-          <Button type="button" variant="ghost" className="text-red-400 hover:text-red-300" onClick={handleDelete} disabled={loading}>
-            Delete Connection
-          </Button>
-          <div className="flex gap-2">
-            <Button type="button" variant="ghost" onClick={onClose} disabled={loading}>
-              Cancel
-            </Button>
-            <Button type="submit" form="connection-form" variant="primary" loading={loading}>
-              Save Changes
-            </Button>
-          </div>
         </div>
-      </div>
-    </Modal>
+      </Modal>
+
+      <ConfirmDialog
+        open={confirmDeleteOpen}
+        onClose={() => !loading && setConfirmDeleteOpen(false)}
+        onConfirm={handleDelete}
+        title="Delete Connection"
+        message="Are you sure you want to remove this connection?"
+        confirmLabel="Delete Connection"
+        loading={loading}
+      />
+    </>
   );
 }

client/src/components/rack/ConnectionLayer.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState, useMemo, useCallback } from 'react';
 import { useRackStore } from '../../store/useRackStore';
-import { cn } from '../../lib/utils';
 
 export function ConnectionLayer() {
   const { racks, cablingFromPortId, setActiveConfigConnectionId } = useRackStore();
@@ -171,12 +170,21 @@ export function ConnectionLayer() {
               strokeWidth="10"
               fill="none"
               className={isShiftPressed ? 'pointer-events-auto cursor-pointer' : 'pointer-events-none'}
+              tabIndex={0}
+              role="button"
+              aria-label="Edit connection"
               onClick={(e) => {
                 if (e.shiftKey) {
                   e.stopPropagation();
                   setActiveConfigConnectionId(conn.id);
                 }
               }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  setActiveConfigConnectionId(conn.id);
+                }
+              }}
             />
           </g>
         );