fix(nav): 모바일 드로어 접근성 (aria-expanded·Esc·dialog role) + hover 클래스화
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -58,6 +58,13 @@ export default function TopNav() {
|
|||||||
}
|
}
|
||||||
}, [open]);
|
}, [open]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
|
||||||
|
window.addEventListener('keydown', onKey);
|
||||||
|
return () => window.removeEventListener('keydown', onKey);
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
const isActive = (href: string) => {
|
const isActive = (href: string) => {
|
||||||
if (href === '/') return pathname === '/';
|
if (href === '/') return pathname === '/';
|
||||||
return pathname === href || pathname.startsWith(href + '/');
|
return pathname === href || pathname.startsWith(href + '/');
|
||||||
@@ -143,15 +150,13 @@ export default function TopNav() {
|
|||||||
)}
|
)}
|
||||||
<Link
|
<Link
|
||||||
href="/outsourcing#contact"
|
href="/outsourcing#contact"
|
||||||
className="hidden sm:inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold transition-colors duration-150"
|
className="hidden sm:inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold transition-colors duration-150 hover:bg-[var(--jsm-accent-hover)]"
|
||||||
style={{
|
style={{
|
||||||
background: 'var(--jsm-accent)',
|
background: 'var(--jsm-accent)',
|
||||||
color: '#ffffff',
|
color: '#ffffff',
|
||||||
textDecoration: 'none',
|
textDecoration: 'none',
|
||||||
letterSpacing: '-0.01em',
|
letterSpacing: '-0.01em',
|
||||||
}}
|
}}
|
||||||
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--jsm-accent-hover)'; }}
|
|
||||||
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--jsm-accent)'; }}
|
|
||||||
>
|
>
|
||||||
프로젝트 문의
|
프로젝트 문의
|
||||||
</Link>
|
</Link>
|
||||||
@@ -160,6 +165,7 @@ export default function TopNav() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => setOpen(true)}
|
onClick={() => setOpen(true)}
|
||||||
aria-label="메뉴 열기"
|
aria-label="메뉴 열기"
|
||||||
|
aria-expanded={open}
|
||||||
className="md:hidden p-2 rounded-lg transition-colors duration-150"
|
className="md:hidden p-2 rounded-lg transition-colors duration-150"
|
||||||
style={{ color: 'var(--jsm-ink)' }}
|
style={{ color: 'var(--jsm-ink)' }}
|
||||||
>
|
>
|
||||||
@@ -182,6 +188,9 @@ export default function TopNav() {
|
|||||||
className="absolute top-0 right-0 h-full w-72 flex flex-col shadow-xl"
|
className="absolute top-0 right-0 h-full w-72 flex flex-col shadow-xl"
|
||||||
style={{ background: 'var(--jsm-surface)' }}
|
style={{ background: 'var(--jsm-surface)' }}
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label="메뉴"
|
||||||
>
|
>
|
||||||
{/* 드로어 헤더 */}
|
{/* 드로어 헤더 */}
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user