Skip to content

Commit 36ea1eb

Browse files
fix: address accessibility and breakpoint issues in mobile menu
- Fix overlay to use role=presentation instead of role=button - Add rel=noopener noreferrer to external links in mobile menu - Show mobile menu at 1024px to match when desktop nav hides
1 parent 39cbacb commit 36ea1eb

2 files changed

Lines changed: 14 additions & 6 deletions

File tree

src/app.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -731,8 +731,8 @@ body::before {
731731
.contact-container { padding: 60px 24px; }
732732
}
733733

734-
/* Mobile specific */
735-
@media (max-width: 768px) {
734+
/* Tablet - show mobile menu button when nav is hidden */
735+
@media (max-width: 1024px) {
736736
.mobile-menu-btn {
737737
display: flex;
738738
}
@@ -799,7 +799,10 @@ body::before {
799799
width: 100%;
800800
justify-content: center;
801801
}
802-
802+
}
803+
804+
/* Mobile specific - smaller screens */
805+
@media (max-width: 768px) {
803806
/* Hero adjustments */
804807
.hero {
805808
padding: 40px 16px;

src/routes/+layout.svelte

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,18 +104,21 @@
104104

105105
<!-- Mobile Menu Overlay -->
106106
{#if mobileMenuOpen}
107+
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
107108
<div
108109
class="mobile-menu-overlay"
109110
onclick={closeMobileMenu}
110-
role="button"
111-
tabindex="-1"
112-
aria-label="Close menu"
111+
onkeydown={(e) => e.key === 'Escape' && closeMobileMenu()}
112+
tabindex="0"
113+
role="presentation"
114+
aria-hidden="true"
113115
></div>
114116
<nav class="mobile-menu">
115117
<a
116118
href="https://www.npmjs.com/package/@context-engine-bridge/context-engine-mcp-bridge"
117119
class="mobile-nav-link"
118120
target="_blank"
121+
rel="noopener noreferrer"
119122
onclick={closeMobileMenu}
120123
>
121124
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
@@ -129,6 +132,7 @@
129132
href="https://github.com/Context-Engine-AI/Context-Engine"
130133
class="mobile-nav-link"
131134
target="_blank"
135+
rel="noopener noreferrer"
132136
onclick={closeMobileMenu}
133137
>
134138
<Github size={20} />
@@ -138,6 +142,7 @@
138142
href="https://marketplace.visualstudio.com/items?itemName=context-engine.context-engine-uploader"
139143
class="mobile-nav-link"
140144
target="_blank"
145+
rel="noopener noreferrer"
141146
onclick={closeMobileMenu}
142147
>
143148
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">

0 commit comments

Comments
 (0)