DatePicker breaks tabindex order in dialogs with small window width

[AndreasSamjeske]

Description

In WCAG 2.1 SC 1.4.10 Reflow your webapp has to deal with a browser window of just 320 Pixel width. At 420px or less Vaadin changes displaying of ListBox content and DatePicker widget: the overlays appear at the bottom of the page. That's fine. But here is the catch:

a. DatePicker and DateTimePicker won't get focus by pressing tab.
b. DatePicker and DateTimePicker break tabindex order in dialogs

Expected outcome

Well, I would expect the width of the view doesn't have any influence on tabindex.
Every Date[Time]Picker shall be accessible via keyboard regardless of window size.

Minimal reproducible example

https://vaadin.com/docs/latest/components/date-time-picker for a.) and
https://bakery-flow.demo.vaadin.com/ for b.) will do.

Steps to reproduce

a.)

1. Visit https://vaadin.com/docs/latest/components/date-time-picker
2. Width of window less than 420px.
3. Click into any time field.
4. Press shift+tab
   Expected:
   DateField has focus and input cursor.
   Actually:
   Focus is nowhere to be seen and DateField is inaccessible by keyboard.

b.)

1. Visit https://bakery-flow.demo.vaadin.com/
2. Width of window less than 420px.
3. Login as admin
4. Click any order and "Edit order"
5. Press tab several times
   Expected:
   You are circling through all fields and controls of the dialog.
   Actually:
   You are trapped between status field and nowhere. DatePicker has focus-ring, but never actually focused.

Environment

Vaadin version(s): 24.3.14 and 24.4.3
OS: Win11

Browsers

Edge + Chrome

[web-padawan]

Related issue: vaadin/flow-components#4809 (in that case it's about zooming the page).

[rolfsmeds]

Also: #132

All three are essentially the same issue.

[rolfsmeds]

Closing this one as it's basically the same as the two other issues.