[overlay] When focusing overlay content children with keyboard, they are not scrolled into view

[web-padawan]

Description

When using an overlay based component with focusable overlay content e.g. vaadin-date-picker or vaadin-menu-bar, switching focus with Tab / arrow keys does not cause the overlay elements to be scrolled into view.

This is different from keyboard focusing regular elements placed in the document body outside the overlay.

https://github.com/user-attachments/assets/75462d74-72d7-4165-9f3c-2f4e40fd887a

This appears to be caused by setting position: fixed on the overlay host. Changing to position: absolute makes scrolling into view working as expected.

Expected outcome

I would expect button elements to be scrolled into view when not fully visible.

Minimal reproducible example

<vaadin-date-picker label="Start date"></vaadin-date-picker>
<div style="height: 2000px"></div>
<script type="module">
  import '@vaadin/date-picker';
</script>

Steps to reproduce

1. Open the date-picker
2. Press Tab to focus the overlay
3. Scroll the page so that the overlay is partially visible
4. Use Tab to focus Today / Cancel buttons

Environment

Vaadin version(s): v24 (earlier versions too) OS: MacOS

Browsers

Issue is not browser related