New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move interactive element handlers into a child of the container #392

Closed
gpbl opened this Issue Jun 11, 2017 · 0 comments

Comments

1 participant
@gpbl
Owner

gpbl commented Jun 11, 2017

This code in DayPicker.js:

<div
  {...this.props.containerProps}
  ref={el => (this.dayPicker = el)}
  role="application"
  lang={this.props.locale}
  className={className}
  tabIndex={this.props.canChangeMonth && this.props.tabIndex}
  onKeyDown={this.handleKeyDown}
  onFocus={this.props.onFocus}
  onBlur={this.props.onBlur}
>
    {this.renderNavbar()}
    {this.renderMonths()}
</div>

is causing the eslint rule jsx-a11y/no-noninteractive-element-interactions to fail because the <div> has a role="application" with element handlers in it. The correct HTML would be instead:

<div
  {...this.props.containerProps}
  className={className}
  ref={el => (this.dayPicker = el)}
  role="application"
  lang={this.props.locale}
>
  <div
    tabIndex={this.props.canChangeMonth && this.props.tabIndex}
    onKeyDown={this.handleKeyDown}
    onFocus={this.props.onFocus}
    onBlur={this.props.onBlur}
  >
    {this.renderNavbar()}
    {this.renderMonths()}
  </div>
</div>

This change will break the current CSS (and the css class names passed toclassNames).

  • move the element handlers into a child div
  • update tests to use the child for handling events
  • add a new css class (e.g. DayPicker-wrapper) to the classNames
  • update style.css to replicate the current design
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment