fix: unify search dialog focus and overlay behavior
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user