From 6d93b3912e5150c532b773c87b0abc3a0282f42a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 24 May 2026 17:35:20 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20improve=20mobile=20me?=
 =?UTF-8?q?nu=20keyboard=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds `focus-visible` styling to the hamburger and close menu buttons, hides internal SVGs from screen readers (`aria-hidden="true"`), and removes the backdrop from the tab sequence (`tabIndex={-1}`) in `MobileMenu.tsx` to improve keyboard navigation and accessibility.

Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com>
---
 src/components/layout/MobileMenu.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/MobileMenu.tsx b/src/components/layout/MobileMenu.tsx
index 477374ab..b986572c 100644
--- a/src/components/layout/MobileMenu.tsx
+++ b/src/components/layout/MobileMenu.tsx
@@ -29,10 +29,10 @@ export default function MobileMenu({
       <button
         type="button"
         onClick={() => setIsOpen(true)}
-        class="h-11 w-11 rounded-full border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 transition-colors md:hidden"
+        class="h-11 w-11 rounded-full border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 transition-colors md:hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]"
         aria-label="Ouvrir le menu"
       >
-        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
         </svg>
       </button>
@@ -43,9 +43,10 @@ export default function MobileMenu({
             {/* Backdrop */}
             <button
               type="button"
-              class="absolute inset-0 bg-black/30 backdrop-blur-sm"
+              class="absolute inset-0 bg-black/30 backdrop-blur-sm cursor-default"
               aria-label="Fermer le menu"
               onClick={closeDrawer}
+              tabIndex={-1}
             />
 
             {/* Drawer */}
@@ -64,11 +65,11 @@ export default function MobileMenu({
                 </div>
                 <button
                   type="button"
-                  class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:bg-gray-100 transition-colors"
+                  class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:bg-gray-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]"
                   aria-label="Fermer le menu"
                   onClick={closeDrawer}
                 >
-                  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                   </svg>
                 </button>