Keyboard navigation does not follow visual order of items

Problem/Motivation

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Smart date with some widget types / field settings has

• start date
• start time
• end time

When the widget adds an end date, it is added visually after the end time, but in focus sequence before the end time. The visual and tabbing order should be same. See the screenshot.

Steps to reproduce

• Set up Drupal CMS with Event-recipe.
• Edit an event, edit date.
• Clear date's year, type in year, end date appears.
• Tab through inputs.

Proposed resolution

Re-order input-fields so, that

• date+time pair is used consistently.
• tabbing order is consistent.

Remaining tasks

• Decide on best way to use inputs: show/hide dates.
• Implement the solution consistently across widgets

User interface changes

Input-fields are rearranged. This may lead to showing less relevant inputs or inserting new fields in between of fields. Showing new fields should be announced to screen reader user.

Field order of time+date to time+date would allow adding end date last but is not commonly used for setting a date-time.