Fix mobile skiplinks to focus the menu toggle and add a new mobile-to-desktop-nav breakpoint

Author: cedric07

header.php

@@ -27,9 +27,12 @@
 	<?php wp_body_open(); ?>
 	<nav class="skip-links skip-links--hidden" aria-label="<?php esc_attr_e( 'Fast access links', 'beapi-frontend-framework' ); ?>">
 		<ul>
-			<li>
+			<li class="display-desktop-only">
 				<a href="#menu"><?php esc_html_e( 'Go to main navigation menu', 'beapi-frontend-framework' ); ?></a>
 			</li>
+			<li class="display-mobile-only">
+				<a href="#menu-toggle"><?php esc_html_e( 'Go to main navigation menu', 'beapi-frontend-framework' ); ?></a>
+			</li>
 			<li>
 				<a href="#content"><?php esc_html_e( 'Go to main content', 'beapi-frontend-framework' ); ?></a>
 			</li>
@@ -46,7 +49,7 @@
 					<span class="sr-only"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></span>
 				</a>
 				<?php if ( has_nav_menu( 'menu-main' ) ) : ?>
-					<button class="header__menu-toggle" aria-expanded="false" aria-controls="menu">
+					<button id="menu-toggle" class="header__menu-toggle" aria-expanded="false" aria-controls="menu">
 						<span></span>
 						<span class="sr-only aria-expanded-false-text"><?php esc_html_e( 'Open the menu', 'beapi-frontend-framework' ); ?></span>
 						<span class="sr-only aria-expanded-true-text"><?php esc_html_e( 'Close the menu', 'beapi-frontend-framework' ); ?></span>

src/scss/01-abstract/_variables.scss

@@ -53,6 +53,7 @@ $breakpoints: (
 	admin-bar: 784, // admin bar height change
 	m: 960,
 	md: 1080,
+	mobile-to-desktop-nav: 1200,
 	mdl: 1279, // Do not use 1280px, it causes a bug under Window Edge with a device pixel ratio higher than 1
 	l: 1440,
 );

src/scss/04-utilities/_display.scss

@@ -0,0 +1,27 @@
+@use "../02-tools/m-breakpoint" as *;
+@use "../02-tools/m-style-only" as *;
+
+/**
+ * Display utilities
+ *
+ * Utility classes for showing/hiding elements based on the mobile-to-desktop-nav breakpoint.
+ * Used primarily for skip links and navigation-related elements.
+ */
+
+// Visible only on mobile (below mobile-to-desktop-nav breakpoint)
+.display-mobile-only {
+	@include breakpoints(mobile-to-desktop-nav) {
+		@include style-only {
+			display: none !important;
+		}
+	}
+}
+
+// Visible only on desktop (at or above mobile-to-desktop-nav breakpoint)
+.display-desktop-only {
+	@include breakpoints(mobile-to-desktop-nav, max) {
+		@include style-only {
+			display: none !important;
+		}
+	}
+}

src/scss/08-template-parts/_header.scss

@@ -180,7 +180,7 @@
 		}
 	}
 
-	@include breakpoints(mdl, max) {
+	@include breakpoints(mobile-to-desktop-nav, max) {
 		&__menu {
 			position: absolute;
 			top: 0;
@@ -229,7 +229,7 @@
 		}
 	}
 
-	@include breakpoints(sm, mdl) {
+	@include breakpoints(sm, mobile-to-desktop-nav) {
 		#{$el}__menu {
 			right: 0;
 			left: auto;
@@ -248,7 +248,7 @@
 		}
 	}
 
-	@include breakpoints(mdl) {
+	@include breakpoints(mobile-to-desktop-nav) {
 		.container {
 			display: flex;
 			align-items: flex-start;