hikmettan/ihaleist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: unify search dialog focus and overlay behavior

Browse Source
This commit is contained in:
hikmettan
2026-09-06 15:29:22 +03:00
parent 69f687967b
commit 9b751296ed
4 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DetailedSearchModal.jsx
+14 -4
View File
@@ -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"