jalil/jalil.arfaoui.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remplacement du div onclick par un button pour le backdrop du menu mobile (accessibilité)

Browse source 
Le backdrop utilisait un div avec onclick inline. Remplacé par un <button> avec aria-label et le listener déplacé dans un script du composant.
This commit is contained in:
Jalil Arfaoui 2026-02-18 08:54:28 +01:00
parent 6115268587
commit 98778965d2
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/header.astro
View file

@ -31,12 +31,13 @@ const currentMenus = menus[currentLang] || menus.fr;
class="flex items-center justify-between h-full max-w-5xl pl-6 pr-4 mx-auto border-b border-l-0 border-r-0 border-transparent select-none lg:border-r lg:border-l lg:rounded-b-xl"
>
<Logo />
<div
<button
id="mobileMenuBackground"
onclick="closeMobileMenu()"
class="fixed inset-0 z-20 hidden w-screen h-screen duration-300 ease-out bg-white/90 dark:bg-neutral-950/90"
type="button"
aria-label="Fermer le menu"
class="fixed inset-0 z-20 hidden w-screen h-screen duration-300 ease-out bg-white/90 dark:bg-neutral-950/90 appearance-none border-0 p-0 cursor-default"
>
</div>
</button>
<nav
class="relative z-30 flex flex-row-reverse justify-start w-full text-sm sm:justify-end text-neutral-500 dark:text-neutral-400 sm:flex-row"
>
@ -94,3 +95,9 @@ const currentMenus = menus[currentLang] || menus.fr;
</nav>
</div>
</header>
<script is:inline>
document.getElementById('mobileMenuBackground').addEventListener('click', function () {
window.closeMobileMenu();
});
</script>