Add modal keyboard navigation and focus restoration to product search

src/components/Header.jsx

@@ -82,6 +82,7 @@ export const Header = () => {
           </button>
           <button
             type="button"
+            data-product-search-trigger="true"
             onClick={() => setIsUrunAramaOpen(true)}
             title="Ürün Arama — ürün adınızı ihale dokümanlarının içinde arar"
             className="bg-amber-400 hover:bg-amber-300 text-slate-950 font-black px-3 py-2 rounded-lg text-xs flex items-center gap-1.5 transition-colors shrink-0"

src/components/UrunAramaModal.jsx

@@ -1,5 +1,5 @@
 import { deadlineInfo } from '../services/tenderCalendar';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useId } from 'react';
 import { useApp } from '../context/AppContext';
 import {
   X, Search, Loader2, Package, AlertTriangle, Building2, MapPin, CalendarDays, Info,
@@ -27,6 +27,20 @@ export const UrunAramaModal = () => {
     isUrunAramaOpen, setIsUrunAramaOpen, setActiveTenderDetail, tenders,
     urunAramaBaslangic, setUrunAramaBaslangic,
   } = useApp();
+  const modal = useRef(null);
+  const titleId = useId();
+  useEffect(() => {
+    if (!isUrunAramaOpen) return;
+    const dialog = modal.current;
+    const opener = (document.activeElement === document.body || dialog.contains(document.activeElement)) ? document.querySelector('[data-product-search-trigger]') : document.activeElement;
+    dialog.showModal();
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      dialog.close(); document.body.style.overflow = previous;
+      if (opener?.isConnected && opener.getClientRects().length) opener.focus();
+    };
+  }, [isUrunAramaOpen]);
   const requestVersion = useRef(0);
   const [submitted, setSubmitted] = useState(null);
   useEffect(() => {
@@ -114,32 +128,41 @@ export const UrunAramaModal = () => {
   const havuzda = (ikn) => tenders?.find((t) => t.ikn === ikn) || null;
 
   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">
+    <dialog ref={modal} aria-labelledby={titleId} onKeyDown={event => {
+      if (event.key !== 'Tab') return;
+      const elements = [...event.currentTarget.querySelectorAll('button, input, select, textarea, a[href], [tabindex]')]
+        .filter(element => !element.disabled && element.tabIndex >= 0 && element.getClientRects().length);
+      const first = elements[0], last = elements[elements.length - 1];
+      if (event.shiftKey && document.activeElement === first) {event.preventDefault();last?.focus();}
+      else if (!event.shiftKey && document.activeElement === last) {event.preventDefault();first?.focus();}
+    }} onCancel={(event) => {event.preventDefault();event.stopPropagation();setIsUrunAramaOpen(false);}}
+      onClose={() => setIsUrunAramaOpen(false)}
+      className="fixed inset-0 m-0 h-dvh max-h-none w-full max-w-none border-0 flex items-center justify-center p-2 sm: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 flex flex-col max-h-[92vh]">
 
-        <div className="bg-linear-to-r from-indigo-900 via-blue-900 to-slate-900 text-white px-6 py-4 flex items-center justify-between">
+        <div className="bg-linear-to-r from-indigo-900 via-blue-900 to-slate-900 text-white px-3 sm:px-6 py-4 flex items-center justify-between gap-2">
           <div className="flex items-center gap-3">
             <div className="w-10 h-10 rounded-xl bg-amber-400 text-slate-900 flex items-center justify-center shadow-md">
               <Package className="w-6 h-6" />
             </div>
             <div>
-              <h2 className="font-extrabold text-base">Ürün Arama</h2>
+              <h2 id={titleId} className="font-extrabold text-base">Ürün Arama</h2>
               <p className="text-xs text-blue-200">
                 Ürün adınızı ihale <strong>dokümanlarının içinde</strong> arar — başlıkta geçmese bile bulur.
               </p>
             </div>
           </div>
-          <button aria-label="Ürün aramasını kapat" onClick={() => setIsUrunAramaOpen(false)} className="text-slate-400 hover:text-white p-1 rounded-lg">
+          <button autoFocus aria-label="Ürün aramasını kapat" onClick={() => setIsUrunAramaOpen(false)} className="text-slate-400 hover:text-white p-1 rounded-lg">
             <X className="w-6 h-6" />
           </button>
         </div>
 
-        <div className="p-6 space-y-4 overflow-y-auto">
+        <div className="p-3 sm:p-6 space-y-4 overflow-y-auto">
 
           <form onSubmit={(e) => { e.preventDefault(); ara(0); }} className="space-y-3">
             <div className="inline-flex items-center gap-1 bg-slate-100 border border-slate-200 rounded-xl p-1">
               {[['metin', 'Ürün adıyla'], ['okas', 'OKAS koduyla']].map(([m, ad]) => (
-                <button key={m} type="button" onClick={() => setMod(m)}
+                <button key={m} type="button" aria-pressed={mod === m} onClick={() => setMod(m)}
                   className={`text-[11px] font-extrabold px-3 py-1.5 rounded-lg transition-colors ${
                     mod === m ? 'bg-indigo-600 text-white' : 'text-slate-600 hover:bg-white'}`}>
                   {ad}
@@ -323,6 +346,6 @@ export const UrunAramaModal = () => {
           )}
         </div>
       </div>
-    </div>
+    </dialog>
   );
 };