fix: keep tender and analysis keyboard focus in dialogs

src/components/AiSpecAnalyzerModal.jsx

@@ -1,6 +1,7 @@
 import { AiJobHistory } from './AiJobHistory';
 import {getToken} from '../services/auth';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useId } from 'react';
+import {useModalFocus} from '../hooks/useModalFocus';
 import { useApp } from '../context/AppContext';
 import { Sparkles, Upload, FileText, CheckCircle2, AlertTriangle, X, Loader2, TrendingUp, Sliders, Info } from 'lucide-react';
 import confetti from 'canvas-confetti';
@@ -14,6 +15,8 @@ export const AiSpecAnalyzerModal = () => {
     isAiSpecAnalyzerOpen, setIsAiSpecAnalyzerOpen,
     analyzeSpecPdfWithGemini, openSavedAnalysis, authUser, aiAnalysisResults, aiAnalyzing, aiJobStatus, activeAiModel, activeTenderDetail,
   } = useApp();
+  const dialogTitleId=useId();
+  const modalFocus=useModalFocus(isAiSpecAnalyzerOpen,()=>setIsAiSpecAnalyzerOpen(false));
 
   const [isAnalyzing, setIsAnalyzing] = useState(false);
   const [selectedFile, setSelectedFile] = useState(null);
@@ -96,7 +99,7 @@ export const AiSpecAnalyzerModal = () => {
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/75 backdrop-blur-xs animate-fade-in">
-      <div className="bg-white rounded-2xl border border-slate-200 shadow-2xl w-full max-w-4xl overflow-hidden my-auto flex flex-col max-h-[92vh]">
+      <div {...modalFocus} role="dialog" aria-modal="true" aria-labelledby={dialogTitleId} tabIndex={-1} className="bg-white rounded-2xl border border-slate-200 shadow-2xl w-full max-w-4xl overflow-hidden my-auto flex flex-col max-h-[92vh]">
 
         {/* Header */}
         <div className="bg-linear-to-r from-blue-900 via-indigo-900 to-purple-900 text-white px-6 py-4 flex items-center justify-between border-b border-indigo-800">
@@ -106,7 +109,7 @@ export const AiSpecAnalyzerModal = () => {
             </div>
             <div>
               <div className="flex items-center gap-2 flex-wrap">
-                <h2 className="font-extrabold text-base">Teknik Şartname & Teklif Analiz Asistanı</h2>
+                <h2 id={dialogTitleId} className="font-extrabold text-base">Teknik Şartname & Teklif Analiz Asistanı</h2>
                 <span className="bg-amber-400 text-slate-900 text-[10px] font-black px-2 py-0.5 rounded-full uppercase tracking-wider">
                   {modelEtiketi}
                 </span>

src/components/TenderDetailModal.jsx

@@ -1,5 +1,6 @@
 import { TenderSourceHistory } from './TenderSourceHistory';
-import React, { useState, useEffect, useRef, useId } from 'react';
+import React, { useState, useEffect, useId } from 'react';
+import {useModalFocus} from '../hooks/useModalFocus';
 import { useApp } from '../context/AppContext';
 import { BidPackageBuilder } from './BidPackageBuilder';
 import { TenderDocuments } from './TenderDocuments';
@@ -15,32 +16,9 @@ import { createTenderICS } from '../services/tenderCalendar';
 
 export const TenderDetailModal = () => {
   const { activeTenderDetail, setActiveTenderDetail, toggleTrackTender, userProfile, setIsAiSpecAnalyzerOpen, gorevAc, gorevKontrol, aiAnalysisResults, tenders, mutateTender, savingCount, saveError, authUser, detailLoad, retryTenderDetail } = useApp();
-  const dialogRef = useRef(null);
   const dialogTitleId = useId();
   const isOpen = Boolean(activeTenderDetail);
-  useEffect(() => {
-    if (!isOpen) return;
-    const opener = document.activeElement;
-    const root = dialogRef.current;
-    root?.querySelector('button')?.focus();
-    return () => { if (opener?.isConnected) opener.focus(); };
-  }, [isOpen]);
-  const handleDialogKey = e => {
-    if (e.defaultPrevented || e.target.closest('[role="dialog"]') !== dialogRef.current) return;
-    if (e.key === 'Escape') {
-      e.preventDefault(); e.stopPropagation(); setActiveTenderDetail(null); return;
-    }
-    if (e.key !== 'Tab') return;
-    const focusable = [...dialogRef.current.querySelectorAll('button, a[href], input, select, textarea, summary, [tabindex]')]
-      .filter(el => el.tabIndex >= 0 && !el.disabled && el.getClientRects().length && !el.closest('[inert]'));
-    const first = focusable[0], last = focusable.at(-1);
-    if (!first) { e.preventDefault(); dialogRef.current.focus(); }
-    else if (e.shiftKey && (document.activeElement === first || document.activeElement === dialogRef.current)) {
-      e.preventDefault(); last.focus();
-    } else if (!e.shiftKey && document.activeElement === last) {
-      e.preventDefault(); first.focus();
-    }
-  };
+  const {ref:dialogRef,onKeyDown:handleDialogKey}=useModalFocus(isOpen,()=>setActiveTenderDetail(null));
   const [activeTab, setActiveTab] = useState('details'); // 'details', 'pdf_stamp', 'ai_assistant', 'checklist', 'kurum_tenders'
   useEffect(()=>{setActiveTab(activeTenderDetail?.preparationTarget ? 'pdf_stamp' : 'details');},[activeTenderDetail?.id,activeTenderDetail?.preparationTarget]);
   const noteOwner = authUser?.email || '';

src/hooks/useModalFocus.js

@@ -0,0 +1,35 @@
+import {useEffect,useRef} from 'react';
+
+function focusableElements(root) {
+ return [...root.querySelectorAll('button, a[href], input, select, textarea, summary, [tabindex]')].filter(el=>{
+  if(el.tabIndex<0 || el.matches(':disabled') || !el.getClientRects().length || el.closest('[inert]'))return false;
+  if(['hidden','collapse'].includes(getComputedStyle(el).visibility))return false;
+  // Closed details descendants can have rectangles but cannot receive focus.
+  for(let parent=el.parentElement;parent && parent!==root;parent=parent.parentElement){
+   if(parent.tagName==='DETAILS' && !parent.open && !parent.querySelector(':scope > summary')?.contains(el))return false;
+  }
+  return true;
+ });
+}
+
+export function useModalFocus(open,onClose) {
+ const ref=useRef(null),close=useRef(onClose);
+ close.current=onClose;
+ useEffect(()=>{
+  if(!open || !ref.current)return;
+  const opener=document.activeElement,root=ref.current;
+  (focusableElements(root)[0] || root).focus();
+  return ()=>{if(opener?.isConnected)opener.focus();};
+ },[open]);
+ const onKeyDown=e=>{
+  const root=ref.current;
+  if(e.defaultPrevented || e.target.closest('[role="dialog"]')!==root)return;
+  if(e.key==='Escape'){e.preventDefault();e.stopPropagation();close.current();return;}
+  if(e.key!=='Tab')return;
+  const elements=focusableElements(root),first=elements[0],last=elements.at(-1);
+  if(!first){e.preventDefault();root.focus();}
+  else if(e.shiftKey && (document.activeElement===first || document.activeElement===root)){e.preventDefault();last.focus();}
+  else if(!e.shiftKey && document.activeElement===last){e.preventDefault();first.focus();}
+ };
+ return {ref,onKeyDown};
+}