mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: Improve mobile menu accessibility with inert attribute and enhance skip link styling and focus behavior.

Browse Source
This commit is contained in:
Marc Mintel
2026-02-22 13:05:36 +01:00
parent 4b2638caed
commit d76fadd6e8
2 changed files with 2 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/Header.tsx
View File

@@ -293,6 +293,7 @@ export default function Header() {
aria-modal="true" aria-modal="true"
aria-label={t('menu')} aria-label={t('menu')}
ref={mobileMenuRef} ref={mobileMenuRef}
inert={isMobileMenuOpen ? undefined : true}
> >
<nav className="flex-grow flex flex-col justify-center items-center p-8 space-y-8"> <nav className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
{menuItems.map((item, idx) => ( {menuItems.map((item, idx) => (

2
components/SkipLink.tsx
View File

@@ -8,7 +8,7 @@ export default function SkipLink() {
return ( return (
<a <a
href="#main-content" href="#main-content"
className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-6 focus:py-3 focus:bg-white focus:text-primary-dark focus:font-bold focus:rounded-lg focus:shadow-xl focus:outline-none focus:ring-2 focus:ring-accent transition-all" className="fixed -top-full left-4 z-[100] px-6 py-3 bg-white text-primary-dark font-bold rounded-lg shadow-xl outline-none ring-2 ring-accent transition-all duration-300 focus:top-4"
> >
{t('skipToContent')} {t('skipToContent')}
</a> </a>