Tab order is not in visual order when captionLayout is "dropdown"

[mrdaniellewis]

To reproduce

import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";

export default function App() {
  return <DayPicker mode="single" captionLayout="dropdown" />;
}

CodeSandbox: https://codesandbox.io/p/sandbox/daypicker-bug-report-forked-mthnh4

Use tab / shift + Tab to move though the focusable elements.

Actual Behaviour

The tabbing order does not match visual order

Tab order: Previous month, next month, Month dropdown, Year dropdown, calendar grid
Visual order: Month dropdown, Year dropdown, Previous month, next month, calendar grid

That is the previous and next months are focused before the month and year dropdowns; however visually the month and year dropdowns are displayed before the previous and next buttons.

This wasn't the case with version 8.

Possible failure of https://www.w3.org/TR/WCAG22/#focus-order. It feels confusing if navigating with a keyboard.

Expected Behaviour

The tabbing order should match the visual order:

Workaround

Overriding the <Months> component with this monstrosity (and modifying the css) can be used to workaround this issue.

function Months({ className, children }) {
  const [
    nav,
    {
      props: {
        children: [caption, grid],
      },
    },
  ] = Children.toArray(children);
  return (
    <div className={className}>
      {caption}
      {nav}
      {grid}
    </div>
  );
}

[gpbl]

To address this, we should rewrite the HTML structure of the calendar, which would become a breaking change for our users.

Instead, I'd explore a navLayout prop that could allow to set alternative navigation layouts.