[bug]: Focus on hidden elements of the header when scrolled

[leagrdv]

🐞 Describe the bug

On the microsite version of the header, in mobile, when the page is scrolled, the local header gets hidden. But when navigating using the keyboard, we're focusing on elements which are not visible.

Edit: It seems like it's not working on desktop either in Firefox. When trying to fix it, make sure to test different browsers/screen sizes.

https://github.com/user-attachments/assets/fca2454b-b560-44f4-9450-9872e8502384

✨ Expected behavior

Same as on desktop, if elements within the local header are focused, they should be visible on screen.

[leagrdv]

Alizé's PR #6512 seems to fix most of the focus issues but there is one that is still present: Viewport is mobile > Scroll down the page until the local header is hidden > Open the burger menu using keyboard navigation > Click on tab to focus on the next visible element > The local header appears and scrolls the rest of the page down, hiding the language selector.

https://github.com/user-attachments/assets/0ba3e2d6-ce06-4359-b9c1-b175ef68d283

[myrta2302]

Following discussion (12/12/25) with @sandra-post and @rouvenpost, in the tablet/ mobile version, the local header should always be visible when the burger menu is opened, regardless of the user’s scroll position.

[alizedebray]

Micro-site Header Behavior

All Devices

• [ ] When the page is not scrolled: Both the global header and local header are expanded.
• [ ] When focus is within either the global or local header: Both headers remain expanded, regardless of scroll position.

Desktop Only

• [ ] When the page is scrolled: Both the global header and local header shrink (unless focus is inside a header, in which case both remain expanded).

Mobile & Tablet Only

• [ ] When the page is scrolled:
  The local header is hidden.
  The global header remains expanded (it does not shrink).
  Focus rules still apply: if focus is within either header, both remain expanded.
• [ ] When the burger menu is open: Both headers remain expanded, regardless of scroll position.

The position of the headers is mainly controlled by these CSS properties: https://github.com/swisspost/design-system/blob/main/packages/components/src/components/post-header/custom-properties.scss

[myrta2302]

Peer programmed with @alizedebray