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

fix: keep tender and analysis keyboard focus in dialogs

Browse Source
This commit is contained in:
hikmettan
2026-09-06 15:19:54 +03:00
parent ffec9bb54e
commit 1d00f4fa91
4 changed files with 53 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TenderDetailModal.jsx
+3 -25
View File
@@ -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 || '';