Restore noninteractive element interactions (#392)

gpbl · Jun 11, 2017 · 2b2eff8 · 2b2eff8
1 parent a51512d
commit 2b2eff8
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 20 deletions.
diff --git a/src/DayPicker.js b/src/DayPicker.js
@@ -585,22 +585,22 @@ export default class DayPicker extends Component {
     }
 
     return (
+      // To make this eslint rule work again we need to cut a major release as it would
+      // result a breaking change: https://github.com/gpbl/react-day-picker/issues/392
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
       <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}
       >
-        <div
-          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>
+        {this.renderNavbar()}
+        {this.renderMonths()}
       </div>
     );
   }

diff --git a/test/daypicker/events.js b/test/daypicker/events.js
@@ -13,7 +13,7 @@ describe('DayPicker’s events handlers', () => {
   it('should call the `onCaptionClick` handler', () => {
     const handleCaptionClick = spy();
     const wrapper = mount(<DayPicker onCaptionClick={handleCaptionClick} />);
-    wrapper.find('.DayPicker-Caption').childAt(0).simulate('click');
+    wrapper.find('.DayPicker-Caption').simulate('click');
     expect(handleCaptionClick).to.have.been.calledWith(
       sinon.match(
         date =>
@@ -150,7 +150,7 @@ describe('DayPicker’s events handlers', () => {
   it('should call `onKeyDown` event handler', () => {
     const handleKeyDown = spy();
     const wrapper = mount(<DayPicker onKeyDown={handleKeyDown} />);
-    wrapper.childAt(0).simulate('keyDown');
+    wrapper.simulate('keyDown');
     expect(handleKeyDown).to.have.been.calledWith(
       sinon.match(e => e instanceof SyntheticEvent && e.target !== null, 'e')
     );
@@ -160,7 +160,7 @@ describe('DayPicker’s events handlers', () => {
     const wrapper = mount(
       <DayPicker onKeyDown={handleKeyDown} canChangeMonth={false} />
     );
-    wrapper.childAt(0).simulate('keyDown');
+    wrapper.simulate('keyDown');
     expect(handleKeyDown).to.have.been.calledWith(
       sinon.match(e => e instanceof SyntheticEvent && e.target !== null, 'e')
     );

diff --git a/test/daypicker/navigation.js b/test/daypicker/navigation.js
@@ -97,28 +97,28 @@ describe('DayPicker’s navigation', () => {
   it('should call `showNextMonth()` when the RIGHT key is pressed', () => {
     const wrapper = mount(<DayPicker />);
     const showNextMonth = spy(wrapper.instance(), 'showNextMonth');
-    wrapper.childAt(0).simulate('keyDown', { keyCode: keys.RIGHT });
+    wrapper.simulate('keyDown', { keyCode: keys.RIGHT });
     expect(showNextMonth).to.have.been.calledOnce;
     showNextMonth.restore();
   });
   it('should call `showPreviousMonth()` when the LEFT key is pressed', () => {
     const wrapper = mount(<DayPicker />);
     const showPreviousMonth = spy(wrapper.instance(), 'showPreviousMonth');
-    wrapper.childAt(0).simulate('keyDown', { keyCode: keys.LEFT });
+    wrapper.simulate('keyDown', { keyCode: keys.LEFT });
     expect(showPreviousMonth).to.have.been.calledOnce;
     showPreviousMonth.restore();
   });
   it('should call `showPreviousYear()` when the UP key is pressed', () => {
     const wrapper = mount(<DayPicker />);
     const showPreviousYear = spy(wrapper.instance(), 'showPreviousYear');
-    wrapper.childAt(0).simulate('keyDown', { keyCode: keys.UP });
+    wrapper.simulate('keyDown', { keyCode: keys.UP });
     expect(showPreviousYear).to.have.been.calledOnce;
     showPreviousYear.restore();
   });
   it('should call `showNextYear()` when the DOWN key is pressed', () => {
     const wrapper = mount(<DayPicker />);
     const showNextYear = spy(wrapper.instance(), 'showNextYear');
-    wrapper.childAt(0).simulate('keyDown', { keyCode: keys.DOWN });
+    wrapper.simulate('keyDown', { keyCode: keys.DOWN });
     expect(showNextYear).to.have.been.calledOnce;
     showNextYear.restore();
   });

diff --git a/test/daypicker/rendering.js b/test/daypicker/rendering.js
@@ -109,7 +109,7 @@ describe('DayPicker’s rendering', () => {
   });
   it('should use the given tabIndex', () => {
     const wrapper = shallow(<DayPicker tabIndex={-1} />);
-    expect(wrapper.childAt(0)).to.have.attr('tabindex', '-1');
+    expect(wrapper).to.have.attr('tabindex', '-1');
   });
   it('should spread props to the container', () => {
     const wrapper = shallow(
@@ -123,8 +123,8 @@ describe('DayPicker’s rendering', () => {
     const wrapper = mount(
       <DayPicker onFocus={handleFocus} onBlur={handleBlur} />
     );
-    wrapper.childAt(0).simulate('focus');
-    wrapper.childAt(0).simulate('blur');
+    wrapper.simulate('focus');
+    wrapper.simulate('blur');
     expect(handleBlur).to.have.been.calledOnce;
     expect(handleFocus).to.have.been.calledOnce;
   });