Code review improvements: fix typo, validation, accessibility, and event handling

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>

apps/executeJS/src/features/tab/ui/tab-title-modal.tsx

@@ -0,0 +1,88 @@
+import { Tab, usePlaygroundStore } from '@/features/playground';
+import { Cross1Icon } from '@radix-ui/react-icons';
+import { Controller, SubmitHandler, useFormContext } from 'react-hook-form';
+
+interface TabTitleModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const TabTitleModal: React.FC<TabTitleModalProps> = ({
+  open,
+  onClose,
+}) => {
+  const { setTabTitle } = usePlaygroundStore();
+
+  const { control, handleSubmit } = useFormContext<Pick<Tab, 'id' | 'title'>>();
+
+  const handleChangeTabTitle: SubmitHandler<Pick<Tab, 'id' | 'title'>> = ({
+    id,
+    title,
+  }) => {
+    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"
+      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}
+      />
+
+      <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" id="modal-title">
+            Change tab title
+          </strong>
+          <button
+            type="button"
+            onClick={onClose}
+            className="cursor-pointer"
+            aria-label="Close modal"
+          >
+            <Cross1Icon />
+          </button>
+        </div>
+
+        <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"
+            className="p-1 rounded-md bg-gray-500 cursor-pointer"
+          >
+            Save
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};

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]);
 };