Move interactive element handlers into a child of the container

[gpbl]

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