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

fix: manage guide and profile modal keyboard focus

Browse Source
This commit is contained in:
hikmettan
2026-09-06 15:22:36 +03:00
parent 1d00f4fa91
commit abbf24078d
3 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/KullanimKilavuzu.jsx
+9 -5
View File
@@ -1,5 +1,6 @@
import { createPortal } from 'react-dom';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useId } from 'react';
import {useModalFocus} from '../hooks/useModalFocus';
import { useApp } from '../context/AppContext';
import { HelpCircle, X, BookOpen, Lightbulb, ListChecks } from 'lucide-react';
@@ -79,10 +80,12 @@ const GENEL = {
export const KullanimKilavuzu = () => {
const { activeTab } = useApp();
const [acik, setAcik] = useState(false);
const titleId=useId();
const modalFocus=useModalFocus(acik,()=>setAcik(false));
useEffect(() => {
const h = (e) => {
if (e.key === '?' && !/input|textarea|select/i.test(e.target?.tagName || '')) setAcik((o) => !o);
if (e.key === 'Escape') setAcik(false);
if(e.defaultPrevented || e.ctrlKey || e.altKey || e.metaKey || e.target?.isContentEditable)return;
if (e.key === '?' && !/input|textarea|select/i.test(e.target?.tagName || '')) {e.preventDefault();setAcik((o) => !o);}
};
window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', h);
@@ -113,6 +116,7 @@ export const KullanimKilavuzu = () => {
<div className="fixed inset-0 z-50 flex justify-end" onClick={() => setAcik(false)}>
<div className="absolute inset-0 bg-slate-900/40" />
<aside
{...modalFocus} role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1}
onClick={(e) => e.stopPropagation()}
className="relative h-full w-full max-w-md bg-white shadow-2xl flex flex-col animate-fade-in"
>
@@ -120,11 +124,11 @@ export const KullanimKilavuzu = () => {
<div className="flex items-center gap-2">
<BookOpen className="w-5 h-5 text-amber-400" />
<div>
<p className="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Kullanım kılavuzu</p>
<p id={titleId} className="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Kullanım kılavuzu</p>
<h3 className="font-extrabold text-sm">{k.baslik}</h3>
</div>
</div>
<button onClick={() => setAcik(false)} className="text-slate-400 hover:text-white p-1" aria-label="Kapat"><X className="w-5 h-5" /></button>
<button onClick={() => setAcik(false)} className="text-slate-400 hover:text-white p-1" aria-label="Kullanım kılavuzunu kapat"><X className="w-5 h-5" /></button>
</div>
<div className="flex-1 overflow-y-auto p-5 space-y-5">
<p className="text-xs text-slate-600">Üst menüde Keşfet ilanları ve takvimi, Hazırlan dosyaları ve hesap araçlarını, Pazar sonuçları ve analizleri, Yönetim hesap ve bağlantı ayarlarını açar. AI model ayarları yalnız yöneticilere görünür.</p>