kinda bad, but functional delete on enter

electron-ui/src/renderer/components/Trimmer/dialogs/DeleteClipDialog.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Dialog,
   DialogTitle,
@@ -14,6 +15,34 @@ export default function DeleteClipDialog({
   onCancel: () => void;
   onDelete: () => void;
 }) {
+  const cancelRef = React.useRef<HTMLButtonElement>(null);
+  const deleteRef = React.useRef<HTMLButtonElement>(null);
+  const [focusedIdx, setFocusedIdx] = React.useState(1); // 0: Cancel, 1: Delete
+
+  // Focus Delete on open
+  React.useEffect(() => {
+    if (open) {
+      setFocusedIdx(1);
+      setTimeout(() => {
+        deleteRef.current?.focus();
+      }, 0);
+    }
+  }, [open]);
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const nextIdx = (focusedIdx + 1) % 2;
+      setFocusedIdx(nextIdx);
+      if (nextIdx === 0) cancelRef.current?.focus();
+      else deleteRef.current?.focus();
+    } else if (e.key === 'Enter') {
+      if (focusedIdx === 0) onCancel();
+      else onDelete();
+    }
+  };
+
   return (
     <Dialog
       open={open}
@@ -21,21 +50,26 @@ export default function DeleteClipDialog({
       slotProps={{
         paper: { sx: { backgroundColor: '#1a1a1a', color: 'white' } },
       }}
+      onKeyDown={handleKeyDown}
     >
       <DialogTitle>Confirm Delete</DialogTitle>
       <DialogContent>Are you sure you want to delete this clip?</DialogContent>
       <DialogActions>
         <button
           type="button"
+          ref={cancelRef}
+          tabIndex={focusedIdx === 0 ? 0 : -1}
           onClick={onCancel}
-          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
+          className={`bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md${focusedIdx === 0 ? ' ring-2 ring-plumDark' : ''}`}
         >
           Cancel
         </button>
         <button
           type="button"
+          ref={deleteRef}
+          tabIndex={focusedIdx === 1 ? 0 : -1}
           onClick={onDelete}
-          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
+          className={`bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md${focusedIdx === 1 ? ' ring-2 ring-plumDark' : ''}`}
         >
           Delete
         </button>