Failed prop type: unknown props found: tabindex

react-dates version react-dates@21.5.0

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?

[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.

[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.