Fix/skip links mobile

[cedric07]

Suite à un retour A11y Temesis que nous avons eu, les liens d'accès rapides n'étaient pas bons sur mobile, car cela renvoyait le focus sur le menu principal qui est masqué, il faut le renvoyer sur le bouton d'accès au menu burger.

• Ajout d'un nouveau breakpoint pour le passage au menu mobile / desktop
• Modification des breakpoint du header pour faire la correspondance
• Class utilitaire CSS pour masquer un élément sur desktop / mobile
• Ajout également d'une fonction utilitaire JS qui permet de retourner la valeur d'une variable CSS
• AJout d'une fonction utilitaire pour retourner true/false si on est sur le menu mobile ou non (se base sur le même breakpoint que défini en CSS afin d'uniformiser et éviter les valeurs en dur dans le JS) => Avantage : Si on doit changer le breakpoint, on modifie la variable SCSS et cela impactera le CSS et le JS automatiquement

Summary by Sourcery

Improve accessibility and responsiveness of the header navigation and skip links between mobile and desktop layouts.

New Features:

• Add a dedicated mobile-to-desktop navigation breakpoint shared between SCSS and JavaScript via a CSS custom property.
• Introduce CSS utility classes to show or hide elements based on the navigation breakpoint.
• Add JavaScript utilities to read CSS custom properties and to detect when the viewport is in the mobile navigation range.

Bug Fixes:

• Ensure skip links target the visible navigation control on mobile by pointing to the burger menu button instead of the hidden main menu.

Enhancements:

• Align header navigation styles with the new mobile-to-desktop navigation breakpoint for consistent behavior across viewports.

[sourcery-ai]

Reviewer's Guide

Adjusts skip links and navigation behavior to correctly target the visible mobile/desktop menu trigger, introduces a shared mobile/desktop navigation breakpoint wired through SCSS and JS via a CSS custom property, and adds small display and JS utility helpers to keep responsive behavior consistent and maintainable.

Class diagram for new JavaScript utilities getCssVar and isMobileNav

classDiagram
  class getCssVar {
    +getCssVar(name string, element HTMLElement) string
  }

  class isMobileNav {
    +isMobileNav(breakpointVar string) boolean
  }

  getCssVar <.. isMobileNav

Loading

Flow diagram for shared breakpoint from SCSS to CSS to JS navigation behavior

flowchart LR
  SCSS_breakpoints["SCSS $breakpoints map"] --> SCSS_var_def["SCSS variable mobile-to-desktop-nav"]
  SCSS_var_def --> CSS_custom_prop["CSS var --breakpoint-mobile-to-desktop-nav"]

  CSS_custom_prop --> JS_getCssVar[getCssVar]
  JS_getCssVar --> JS_isMobileNav[isMobileNav]
  JS_isMobileNav --> Media_query["window.matchMedia(max-width: breakpoint - 1)"]

  Media_query --> Display_mobile_only[".display-mobile-only hidden or shown"]
  Media_query --> Display_desktop_only[".display-desktop-only hidden or shown"]

  Display_desktop_only --> Skip_link_menu_desktop["Skip link href=#menu"]
  Display_mobile_only --> Skip_link_menu_mobile["Skip link href=#menu-toggle"]

  Skip_link_menu_mobile --> Menu_toggle_button["Button id=menu-toggle"]

Loading

File-Level Changes

Change	Details	Files
Align skip links and header markup with mobile/desktop navigation behavior.	Update skip link list so desktop points to the main nav menu and mobile points to the burger menu toggle button. Add CSS utility classes on skip link items to show the appropriate link depending on viewport. Add an id to the menu toggle button so it can be targeted by mobile skip links.	header.php
Introduce a dedicated breakpoint for the navigation layout and wire it through SCSS and CSS variables.	Add a new mobile-to-desktop-nav breakpoint value to the breakpoint map. Expose this breakpoint as a CSS custom property for JavaScript consumption. Update header SCSS breakpoint usages to rely on mobile-to-desktop-nav instead of the previous breakpoint tokens so layout matches the new behavior.	src/scss/01-abstract/_variables.scss src/scss/03-base/_variables-css.scss src/scss/08-template-parts/_header.scss
Add display utility classes to conditionally show elements on mobile vs desktop based on the new navigation breakpoint.	Create .display-mobile-only utility that hides elements at and above the mobile-to-desktop-nav breakpoint. Create .display-desktop-only utility that hides elements below the mobile-to-desktop-nav breakpoint. Document that these utilities are intended mainly for navigation/skip-link visibility control.	src/scss/04-utilities/_display.scss
Add JS utilities to read CSS custom properties and to detect the mobile navigation viewport using the shared breakpoint.	Introduce getCssVar helper to safely read a CSS custom property value from a given element and normalize the name. Introduce isMobileNav helper that reads the --breakpoint-mobile-to-desktop-nav CSS variable, parses it, and uses matchMedia to determine if the current viewport is mobile. Add defensive logging/guards when the CSS variable is missing or non-numeric to avoid runtime errors.	src/js/utils/getCssVar.js src/js/utils/isMobileNav.js

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• The new getCssVar and isMobileNav utilities assume document/window are always available; consider adding guards or early returns for non-browser/SSR contexts to avoid runtime errors when these helpers are imported server-side.
• To avoid hard‑coding the '--breakpoint-mobile-to-desktop-nav' string in multiple places, it might be worth centralizing this custom property name in a shared constant so that any future rename stays consistent across SCSS and JS.
• For better testability and flexibility, isMobileNav could accept a matchMedia function or window-like object as an optional parameter instead of directly calling the global window.matchMedia.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The new `getCssVar` and `isMobileNav` utilities assume `document`/`window` are always available; consider adding guards or early returns for non-browser/SSR contexts to avoid runtime errors when these helpers are imported server-side.
- To avoid hard‑coding the `'--breakpoint-mobile-to-desktop-nav'` string in multiple places, it might be worth centralizing this custom property name in a shared constant so that any future rename stays consistent across SCSS and JS.
- For better testability and flexibility, `isMobileNav` could accept a `matchMedia` function or `window`-like object as an optional parameter instead of directly calling the global `window.matchMedia`.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}