fix: unify search dialog focus and overlay behavior
This commit is contained in:
@@ -1224,3 +1224,11 @@ Taslak türü seçicisine erişilebilir ad eklendi. Üretim derlemesi geçti. Ö
|
||||
- Portal ile body altına açılan kılavuz da aynı sıraya katılıyor. Yeni DOM alanları eklendiğinde izolasyon yeniden uygulanıyor; son pencere kapanınca gözlemci kapatılıyor. Alttaki pencere kaldırılırken üst pencerenin odağı geri alınmıyor.
|
||||
- Yedi tarayıcı kabulü geçti: ihale açıkken başlığın inert olması, analiz üstteyken ihale detayının inert olması, kılavuz üstteyken iki pencerenin inert olması, sırayla kapanışta doğru pencere/odağın geri gelmesi, tümü kapalıyken hiçbir artık inert alanın kalmaması ve ardından firma profilinin normal açılması. Kanıt `rapor/qa-modal-background-isolation.json`.
|
||||
- 275 test ve build başarılı. Bu doğrulama tarayıcı DOM inert durumu ve gerçek klavye etkileşimini kapsar; belirli bir ekran okuyucuyla dinleme testi yapılmış değildir. Henüz ortak kancayı kullanmayan diğer pencerelerin kabulü ayrıca gereklidir. Genel plan açık.
|
||||
|
||||
|
||||
### 2026-09-06 — Detaylı arama ve ürün aramasında pencere tutarlılığı
|
||||
|
||||
- Detaylı aramadaki geçersiz inset renk değeri inset-0 ile değiştirildi; pencere yüksekliği görünümle sınırlandı ve iç kaydırma eklendi. Ortak modal odağı/arka plan izolasyonu, başlık bağlantısı, kapatma adı, beş arama alanının erişilebilir etiketi ve sektör düğmelerinin basılı durumu eklendi.
|
||||
- Ürün araması native dialog üst katmanında, kılavuz ise özel portal penceresindeydi. ? ile kılavuz açılınca ortak izolasyon ürün aramasını inert yapıyor fakat native üst katman nedeniyle odak kılavuza geçemiyordu. Bu çakışma tarayıcıda tekrar üretildi. Ürün araması diğer pencerelerle aynı modal yığınını kullanıyor; gövde kaydırma kilidi ve arama durumunun korunması devam ediyor.
|
||||
- On iki tarayıcı kabulü geçti: detaylı arama ilk odağı/ileri-geri Tab, görünüm sınırları, beş alan etiketi, Kayseri+laboratuvar tek sonucu; ürün araması odağı/Tab; ürün üstünde kılavuz ve geri dönüş; sentetik ürün sonucundan doğru ihale detayına geçiş; detay kapanınca başlıktaki ÜRÜN ARA düğmesine dönüş; yeniden açıldığında önceki sorgu ve sonucun korunması. Kanıt `rapor/qa-search-modals-focus.json`. Kılavuz kapanış ölçümü QA düzeneği sıcak yenilenirken alındığı için temiz oturumda tekrarlandı; son ölçüm geçti.
|
||||
- QA sunucusu yalnız “QA pencere testi” sorgusuna bir sentetik ürün sonucu döndürüyor; bu kaynak arama kalitesinin testi değildir. 275 test ve build başarılı. Native dialog yerine ortak yığın kullanımı nedeniyle mobil tarayıcı/gerçek ekran okuyucu kabulü ayrıca gereklidir. Genel plan açık.
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useId } from 'react';
|
||||
import {useModalFocus} from '../hooks/useModalFocus';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { CITIES_LIST, INSTITUTION_TYPES_LIST } from '../data/constants';
|
||||
import { SlidersHorizontal, Search, RotateCcw, X } from 'lucide-react';
|
||||
@@ -23,6 +24,8 @@ export const DetailedSearchModal = () => {
|
||||
setOnlyValidOnly,
|
||||
setActiveTab
|
||||
} = useApp();
|
||||
const titleId=useId();
|
||||
const modalFocus=useModalFocus(isDetailedSearchOpen,()=>setIsDetailedSearchOpen(false));
|
||||
|
||||
const [iknQuery, setIknQuery] = useState('');
|
||||
const [kurumQuery, setKurumQuery] = useState('');
|
||||
@@ -49,16 +52,17 @@ export const DetailedSearchModal = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-[#00000080] z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-xs animate-fade-in">
|
||||
<div className="bg-white rounded-2xl border border-slate-200 shadow-2xl w-full max-w-2xl overflow-hidden">
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-xs animate-fade-in">
|
||||
<div {...modalFocus} role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1} className="bg-white rounded-2xl border border-slate-200 shadow-2xl w-full max-w-2xl max-h-[92vh] overflow-y-auto">
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-[#1f2937] text-white px-6 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2.5 font-bold text-base">
|
||||
<SlidersHorizontal className="w-5 h-5 text-blue-400" />
|
||||
<span>Detaylı İhale Arama</span>
|
||||
<span id={titleId}>Detaylı İhale Arama</span>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Detaylı aramayı kapat"
|
||||
onClick={() => setIsDetailedSearchOpen(false)}
|
||||
className="text-slate-400 hover:text-white p-1 rounded-lg transition-colors"
|
||||
>
|
||||
@@ -74,6 +78,7 @@ export const DetailedSearchModal = () => {
|
||||
<div>
|
||||
<label className="block font-bold text-slate-700 mb-1">Anahtar Kelime</label>
|
||||
<input
|
||||
aria-label="Anahtar Kelime"
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
@@ -85,6 +90,7 @@ export const DetailedSearchModal = () => {
|
||||
<div>
|
||||
<label className="block font-bold text-slate-700 mb-1">Alım Tipi</label>
|
||||
<select
|
||||
aria-label="Alım Tipi"
|
||||
value={selectedAlimTuru}
|
||||
onChange={(e) => setSelectedAlimTuru(e.target.value)}
|
||||
className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-800"
|
||||
@@ -99,6 +105,7 @@ export const DetailedSearchModal = () => {
|
||||
<div>
|
||||
<label className="block font-bold text-slate-700 mb-1">Kurum Adı</label>
|
||||
<input
|
||||
aria-label="Kurum Adı"
|
||||
type="text"
|
||||
value={kurumQuery}
|
||||
onChange={(e) => setKurumQuery(e.target.value)}
|
||||
@@ -110,6 +117,7 @@ export const DetailedSearchModal = () => {
|
||||
<div>
|
||||
<label className="block font-bold text-slate-700 mb-1">Kayıt No (İKN / DT No)</label>
|
||||
<input
|
||||
aria-label="Kayıt No (İKN / DT No)"
|
||||
type="text"
|
||||
value={iknQuery}
|
||||
onChange={(e) => setIknQuery(e.target.value)}
|
||||
@@ -131,6 +139,7 @@ export const DetailedSearchModal = () => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed={secili}
|
||||
key={s}
|
||||
onClick={() => toggleSektor(s)}
|
||||
className={`px-2.5 py-1 rounded-full border text-[11px] font-semibold transition-colors ${
|
||||
@@ -149,6 +158,7 @@ export const DetailedSearchModal = () => {
|
||||
<div>
|
||||
<label className="block font-bold text-slate-700 mb-1">Şehir</label>
|
||||
<select
|
||||
aria-label="Şehir"
|
||||
value={selectedCity}
|
||||
onChange={(e) => setSelectedCity(e.target.value)}
|
||||
className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-800"
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { deadlineInfo } from '../services/tenderCalendar';
|
||||
import React, { useState, useEffect, useRef, useId } from 'react';
|
||||
import {useModalFocus} from '../hooks/useModalFocus';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import {
|
||||
X, Search, Loader2, Package, AlertTriangle, Building2, MapPin, CalendarDays, Info,
|
||||
@@ -27,18 +28,14 @@ export const UrunAramaModal = () => {
|
||||
isUrunAramaOpen, setIsUrunAramaOpen, setActiveTenderDetail, openSearchTender, tenders,
|
||||
urunAramaBaslangic, setUrunAramaBaslangic,
|
||||
} = useApp();
|
||||
const modal = useRef(null);
|
||||
const modalFocus=useModalFocus(isUrunAramaOpen,()=>setIsUrunAramaOpen(false));
|
||||
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();
|
||||
document.body.style.overflow = previous;
|
||||
};
|
||||
}, [isUrunAramaOpen]);
|
||||
const requestVersion = useRef(0);
|
||||
@@ -128,16 +125,8 @@ export const UrunAramaModal = () => {
|
||||
const havuzda = (ikn) => tenders?.find((t) => t.ikn === ikn) || null;
|
||||
|
||||
return (
|
||||
<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 {...modalFocus} role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1}
|
||||
className="fixed inset-0 z-50 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-3 sm:px-6 py-4 flex items-center justify-between gap-2">
|
||||
@@ -152,7 +141,7 @@ export const UrunAramaModal = () => {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button autoFocus aria-label="Ürün aramasını kapat" onClick={() => setIsUrunAramaOpen(false)} className="text-slate-400 hover:text-white p-1 rounded-lg">
|
||||
<button 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>
|
||||
@@ -346,6 +335,6 @@ export const UrunAramaModal = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -57,6 +57,9 @@ const {createTelegramLinker}=await import('../server/telegram-link.mjs');
|
||||
const qaTelegramLinker=createTelegramLinker(qaTelegramStore,()=>Date.now()+telegramClockOffset);
|
||||
const ui=await createServer({server:{host:'127.0.0.1',port:0,proxy:{'/api':{target:'http://127.0.0.1:'+port}}},plugins:[{name:'qa-fixtures',configureServer(server){server.middlewares.use(async(req,res,next)=>{
|
||||
if(req.url==='/qa-print-cetvel'){res.setHeader('Content-Type','text/html; charset=utf-8');res.end(printBidFixture().html);return;}
|
||||
if(req.url?.startsWith('/api/urun-ara?')&&new URL(req.url,'http://localhost').searchParams.get('q')==='QA pencere testi'){
|
||||
res.writeHead(200,{'Content-Type':'application/json'});res.end(JSON.stringify({success:true,totalCount:1,list:[{...tenders[0],ihaleTarihSaat:tenders[0].tarih+' '+tenders[0].saat,tur:'QA'}]}));return;
|
||||
}
|
||||
if(req.url==='/qa-responsive'){res.setHeader('Content-Type','text/html; charset=utf-8');res.end(`<html lang="tr"><h1>Yerel ekran boyutu testi</h1><p>Gerçek uygulama ayrı bir görünüm alanında yüklenir.</p><button data-width="390">390 piksel</button><button data-width="768">768 piksel</button><button data-width="1440">1440 piksel</button><pre id="metrics" aria-label="Görünüm ölçümleri"></pre><iframe title="İhaleist test görünümü" src="/" style="display:block;width:390px;height:900px;border:0"></iframe><script>document.querySelectorAll('button').forEach(button=>button.onclick=()=>document.querySelector('iframe').style.width=button.dataset.width+'px');setInterval(()=>{const doc=document.querySelector('iframe').contentDocument;if(!doc?.body)return;const width=doc.documentElement.clientWidth;const groups=[...doc.querySelectorAll('nav[aria-label="Çalışma alanları"] button')].map(el=>({label:el.textContent.trim(),left:Math.round(el.getBoundingClientRect().left),right:Math.round(el.getBoundingClientRect().right)}));document.getElementById('metrics').textContent=JSON.stringify({width,scrollWidth:doc.documentElement.scrollWidth,groups},null,2);},400);</script></html>`);return;}
|
||||
if(req.url==='/qa-telegram-controls'){res.setHeader('Content-Type','text/html; charset=utf-8');res.end(`<html lang="tr"><h1>Yerel Telegram testi</h1><p>Gerçek Telegram mesajı gönderilmez.</p><button id="recover">Telegram durum hatasını kapat</button><button id="enable">Sentetik bağlamayı aç</button><button id="receive">Son kodu sentetik sohbete ulaştır</button><button id="expire">Kod süresini bitir</button><p role="status"></p><script>for(const mode of ['recover','enable','receive','expire'])document.getElementById(mode).onclick=async()=>{const r=await fetch('/qa-telegram-fixture?mode='+mode,{method:'POST'});document.querySelector('[role=status]').textContent=await r.text();};</script></html>`);return;}
|
||||
if(req.url?.startsWith('/qa-telegram-fixture?')&&req.method==='POST'){
|
||||
|
||||
Reference in New Issue
Block a user