From 1a6c3e04c758cd8bf8f5a749325655762956289e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 2 Nov 2025 09:07:20 +0000
Subject: [PATCH 1/3] Initial plan


From 4f948ac12856190f4adad323331c10c1eec53a3e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 2 Nov 2025 09:15:41 +0000
Subject: [PATCH 2/3] fix: code review improvements - filename typo,
 validation, accessibility, event handling

Co-authored-by: ohah <16170776+ohah@users.noreply.github.com>
---
 .../src/features/tab/ui/tab-button.tsx        |  7 +++++-
 ...tab-title-mdal.tsx => tab-title-modal.tsx} | 24 +++++++++++++++----
 .../src/shared/hooks/use-click-outside.ts     | 13 ++++++----
 3 files changed, 34 insertions(+), 10 deletions(-)
 rename apps/executeJS/src/features/tab/ui/{tab-title-mdal.tsx => tab-title-modal.tsx} (73%)

diff --git a/apps/executeJS/src/features/tab/ui/tab-button.tsx b/apps/executeJS/src/features/tab/ui/tab-button.tsx
index 725f47a..34ff793 100644
--- a/apps/executeJS/src/features/tab/ui/tab-button.tsx
+++ b/apps/executeJS/src/features/tab/ui/tab-button.tsx
@@ -4,7 +4,7 @@ import { useRef, useState } from 'react';
 import { Tab } from '@/features/playground';
 import { useClickOutside } from '@/shared';
 import { TabContextMenu } from '@/pages/playground';
-import { TabTitleModal } from './tab-title-mdal';
+import { TabTitleModal } from './tab-title-modal';
 import { FormProvider, useForm } from 'react-hook-form';
 
 interface TabButtonProps {
@@ -58,13 +58,16 @@ export const TabButton: React.FC<TabButtonProps> = ({
             onClick={() => onActiveTab(id)}
             onContextMenu={(event) => onContextMenu(event, id)}
             className={`group-hover:text-gray-50 w-40 pl-3 pr-2 truncate text-left cursor-pointer select-none ${isActive ? 'text-gray-50' : 'text-gray-500'}`}
+            aria-label={`Tab: ${title}`}
           >
             {title}
           </button>
           <button
             type="button"
             onClick={() => onCloseTab(id)}
+            onContextMenu={(e) => e.stopPropagation()}
             className="h-full p-2 rounded-r-sm hover:bg-[rgba(255,255,255,0.1)] transition-colors cursor-pointer"
+            aria-label={`Close tab: ${title}`}
           >
             <Cross2Icon
               className={`group-hover:text-gray-50 ${isActive ? 'text-gray-50' : 'text-gray-500'}`}
@@ -76,6 +79,8 @@ export const TabButton: React.FC<TabButtonProps> = ({
             ref={ref}
             style={{ left: contextMenu.x, top: contextMenu.y }}
             className="absolute w-50 p-2 border border-slate-700 rounded-md bg-slate-900"
+            role="menu"
+            aria-label="Tab context menu"
           >
             <ul>
               <li>
diff --git a/apps/executeJS/src/features/tab/ui/tab-title-mdal.tsx b/apps/executeJS/src/features/tab/ui/tab-title-modal.tsx
similarity index 73%
rename from apps/executeJS/src/features/tab/ui/tab-title-mdal.tsx
rename to apps/executeJS/src/features/tab/ui/tab-title-modal.tsx
index d295552..ac5c2fd 100644
--- a/apps/executeJS/src/features/tab/ui/tab-title-mdal.tsx
+++ b/apps/executeJS/src/features/tab/ui/tab-title-modal.tsx
@@ -19,14 +19,23 @@ export const TabTitleModal: React.FC<TabTitleModalProps> = ({
     id,
     title,
   }) => {
-    setTabTitle({ tabId: id, title: title.trim() });
+    const trimmedTitle = title.trim();
+    if (trimmedTitle.length === 0) {
+      return;
+    }
+    setTabTitle({ tabId: id, title: trimmedTitle });
     onClose();
   };
 
   if (!open) return null;
 
   return (
-    <div className="fixed top-0 right-0 bottom-0 left-0 z-10 flex items-center justify-center">
+    <div
+      className="fixed top-0 right-0 bottom-0 left-0 z-10 flex items-center justify-center"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+    >
       <div
         className="absolute top-0 right-0 bottom-0 left-0 bg-white opacity-20"
         onClick={onClose}
@@ -34,8 +43,15 @@ export const TabTitleModal: React.FC<TabTitleModalProps> = ({
 
       <div className="absolute flex flex-col p-6 border border-black rounded-2xl bg-gray-950 shadow-[2px_4px_4px_rgba(0,0,0,0.3)]">
         <div className="flex justify-between items-center">
-          <strong className="text-lg">Change tab title</strong>
-          <button type="button" onClick={onClose} className="cursor-pointer">
+          <strong className="text-lg" id="modal-title">
+            Change tab title
+          </strong>
+          <button
+            type="button"
+            onClick={onClose}
+            className="cursor-pointer"
+            aria-label="Close modal"
+          >
             <Cross1Icon />
           </button>
         </div>
diff --git a/apps/executeJS/src/shared/hooks/use-click-outside.ts b/apps/executeJS/src/shared/hooks/use-click-outside.ts
index 5053fbf..4bd1e8d 100644
--- a/apps/executeJS/src/shared/hooks/use-click-outside.ts
+++ b/apps/executeJS/src/shared/hooks/use-click-outside.ts
@@ -1,20 +1,23 @@
-import { useEffect, RefObject } from 'react';
+import { useEffect, useCallback, RefObject } from 'react';
 
 export const useClickOutside = <T extends HTMLElement>(
   ref: RefObject<T | null>,
   onClickOutside: () => void
 ) => {
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
       if (ref.current && !ref.current.contains(event.target as Node)) {
         onClickOutside();
       }
-    }
+    },
+    [ref, onClickOutside]
+  );
 
+  useEffect(() => {
     document.addEventListener('click', handleClickOutside);
 
     return () => {
       document.removeEventListener('click', handleClickOutside);
     };
-  }, [ref, onClickOutside]);
+  }, [handleClickOutside]);
 };

From 201777e13b2698bde4fba76b23a1b7eff4054e76 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 2 Nov 2025 09:17:12 +0000
Subject: [PATCH 3/3] fix: improve form validation and accessibility in tab
 title modal

Co-authored-by: ohah <16170776+ohah@users.noreply.github.com>
---
 .../src/features/tab/ui/tab-title-modal.tsx   | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/apps/executeJS/src/features/tab/ui/tab-title-modal.tsx b/apps/executeJS/src/features/tab/ui/tab-title-modal.tsx
index ac5c2fd..c4d1491 100644
--- a/apps/executeJS/src/features/tab/ui/tab-title-modal.tsx
+++ b/apps/executeJS/src/features/tab/ui/tab-title-modal.tsx
@@ -56,29 +56,32 @@ export const TabTitleModal: React.FC<TabTitleModalProps> = ({
           </button>
         </div>
 
-        <Controller
-          control={control}
-          name="title"
-          render={({ field: { value, onChange } }) => {
-            return (
-              <input
-                type="text"
-                autoFocus
-                value={value}
-                onChange={onChange}
-                className="py-1 px-2 mt-4 mb-3 rounded-md bg-gray-900"
-              />
-            );
-          }}
-        />
+        <form onSubmit={handleSubmit(handleChangeTabTitle)}>
+          <Controller
+            control={control}
+            name="title"
+            render={({ field: { value, onChange } }) => {
+              return (
+                <input
+                  type="text"
+                  autoFocus
+                  value={value}
+                  onChange={onChange}
+                  className="py-1 px-2 mt-4 mb-3 rounded-md bg-gray-900"
+                  aria-label="Tab title"
+                  required
+                />
+              );
+            }}
+          />
 
-        <button
-          type="submit"
-          onClick={handleSubmit(handleChangeTabTitle)}
-          className="p-1 rounded-md bg-gray-500 cursor-pointer"
-        >
-          Save
-        </button>
+          <button
+            type="submit"
+            className="p-1 rounded-md bg-gray-500 cursor-pointer"
+          >
+            Save
+          </button>
+        </form>
       </div>
     </div>
   );