React-dates: Failed prop type: unknown props found: tabindex

[pablougas]

react-dates version
[email protected]

Describe the bug
Warning: Failed prop type: withStyles(SingleDatePicker): unknown props found: tabindex

Source code (including props configuration)
Add tabIndex as prop to react-dates component

<DateRangePicker
  tabIndex={ this.startingTabIndex() }
  startDate={this.state.startDate}
  startDateId="your_unique_start_date_id"
  endDate={this.state.endDate}
  endDateId="your_unique_end_date_id"
  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })}
  focusedInput={this.state.focusedInput}
  onFocusChange={focusedInput => this.setState({ focusedInput })}
/>

Additional context
How is this not possible? What kind of monsters run this thing?

[ljharb]

There's no need for the hostility of the "monsters" comment.

Have you read https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html ? setting a starting tab index (that's not 0 or -1) is bad for users and for the web.

[pablougas]

@ljharb I was being facetious. Thanks for the link, however, simply because it is misused, does not seem like a valid reason to not include it in the project.

There are very good reasons why you should use them, namely, accessibility.

[ljharb]

I believe the best practice is to use semantic ordering of your HTML elements for a11y; perhaps @backwardok can weigh in here?

[backwardok]

Yes, for accessibility purposes, it's generally not advised to use any tabindex value that's higher than 0. Using tabindex=0 would be unnecessary for something that's already in the tab flow and using tabindex=-1 to prevent tab focus would necessitate also removing that content for everyone.

One of the reasons to not use a tabindex higher than 0 is because of how that impacts the taborder on the page. I created a codepen to illustrate the tab order in a page to demonstrate the behavior that happens when using positive tabindex values on the page.

[erin-doyle]

It looks like there's no more to discuss here so I'm going to close, feel free to reopen if that's not the case.