Skip to content

🎨 Palette: improve mobile menu keyboard accessibility #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bobdivx wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

🎨 Palette: improve mobile menu keyboard accessibility #60

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions src/components/layout/MobileMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}
Comment on lines +46 to +49
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The backdrop is intended as a 'click-away' area for mouse users and is correctly removed from the tab order (tabIndex={-1}). However, it should also be hidden from screen readers using aria-hidden="true" to avoid redundant 'Close' announcements, as an explicit close button already exists in the drawer. Additionally, cursor-default is misleading for an interactive element; cursor-pointer is the standard way to indicate that the backdrop can be clicked to close the menu.

Suggested change
class="absolute inset-0 bg-black/30 backdrop-blur-sm cursor-default"
aria-label="Fermer le menu"
onClick={closeDrawer}
tabIndex={-1}
class="absolute inset-0 bg-black/30 backdrop-blur-sm cursor-pointer"
aria-hidden="true"
onClick={closeDrawer}
tabIndex={-1}

/>

{/* Drawer */}
Expand All @@ -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>
Expand Down