.DayPicker-wrapper tabIndex and aria-label

[catamphetamine]

By default the "wrapper" div is focusable via Tab because it has tabIndex = 0.
And also the first day of the month is focusable due to it also having tabIndex = 0.

If tabIndex = -1 property is passed then neither the wrapper is focusable via Tab nor the first day of the month is, because both of them get tabIndex = -1.

A finer level of granularity would be more appropriate.
For example, having two separate properties for "tab index".
Or maybe, better having tabIndex = 0 on the first day of the month always because otherwise keyboard-only users would be unable to choose a date.

One more thing is that the wrapper div doesn't have any aria-label property.
So if it has tabIndex = 0 and is focused then the narrator is silent and the user will be confused in such case and won't know where the focus is.
An aria-label consisting of active month and year would be appropriate.

Also, there's no tabIndex setting for prev/next month buttons.
You might add a separate property for that.

[rootlinux2]

To make this calendar more accessible I think you need to add ARIA-* props to the wrapper because as a developer I need to control all these features.

[aitchkhan]

Well, it varies from case to case.
But IMHO, tabIndex = 0 should be either on the day passed in selectedDays props or today.

[Dervisevic]

Seconding this as well, we have this daypicker in a modal and it requires 2 tabs to get to the first interactable element instead of one, i don't see why the wrapper would need a tabIndex?

[vamshienumula]

@gpbl and team It will be of great help if we can prioritise this one as this is raising accessibility concerns. Agree with @aitchkhan @Dervisevic