fix: change focus when zoom buttons becomes disabled to be able to st…

…ill use arrow keys (fix issue #132) (#135)
frontend-collective · Aug 30, 2018 · 30ba946 · 30ba946
1 parent 357a801
commit 30ba946
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/src/__tests__/react-image-lightbox.spec.js b/src/__tests__/react-image-lightbox.spec.js
@@ -2,6 +2,7 @@ import { mount } from 'enzyme';
 import React from 'react';
 import Modal from 'react-modal';
 import Lightbox from '../index';
+import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL, ZOOM_BUTTON_INCREMENT_SIZE } from '../constant'
 
 // Mock the loadStyles static function to avoid
 // issues with a lack of styles._insertCss
@@ -123,6 +124,11 @@ describe('Events', () => {
     <Lightbox {...extendedCommonProps} {...mockFns} animationDisabled />
   );
 
+  // Spy zoomBtn focus
+  const {zoomOutBtn, zoomInBtn} = wrapper.instance();
+  jest.spyOn(zoomOutBtn, 'focus');
+  jest.spyOn(zoomInBtn, 'focus');
+
   it('Calls onAfterOpen when mounted', () => {
     expect(mockFns.onAfterOpen).toHaveBeenCalledTimes(1);
     expect(mockFns.onAfterOpen).toHaveBeenCalledWith();
@@ -174,6 +180,18 @@ describe('Events', () => {
     expect(mockFns.onImageLoadError).toHaveBeenCalledTimes(0);
     wrapper.setProps({ mainSrc: LOAD_FAILURE_SRC });
   });
+
+  it('Calls the the ZoomIn Focus when ZoomOut is disabled', () => {
+    wrapper.setState({ zoomLevel: MIN_ZOOM_LEVEL + ZOOM_BUTTON_INCREMENT_SIZE });
+    wrapper.instance().handleZoomOutButtonClick();
+    expect(zoomInBtn.focus).toHaveBeenCalledTimes(1);
+  });
+
+  it('Calls the the ZoomOut Focus when ZoomIn is disabled', () => {
+    wrapper.setState({ zoomLevel: MAX_ZOOM_LEVEL - ZOOM_BUTTON_INCREMENT_SIZE });
+    wrapper.instance().handleZoomInButtonClick();
+    expect(zoomOutBtn.focus).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe('Key bindings', () => {

diff --git a/src/react-image-lightbox.js b/src/react-image-lightbox.js
@@ -1061,11 +1061,19 @@ class ReactImageLightbox extends Component {
   }
 
   handleZoomInButtonClick() {
-    this.changeZoom(this.state.zoomLevel + ZOOM_BUTTON_INCREMENT_SIZE);
+    const nextZoomLevel = this.state.zoomLevel + ZOOM_BUTTON_INCREMENT_SIZE;
+    this.changeZoom(nextZoomLevel);
+    if (nextZoomLevel === MAX_ZOOM_LEVEL) {
+      this.zoomOutBtn.focus();
+    }
   }
 
   handleZoomOutButtonClick() {
-    this.changeZoom(this.state.zoomLevel - ZOOM_BUTTON_INCREMENT_SIZE);
+    const nextZoomLevel = this.state.zoomLevel - ZOOM_BUTTON_INCREMENT_SIZE;
+    this.changeZoom(nextZoomLevel);
+    if (nextZoomLevel === MIN_ZOOM_LEVEL) {
+      this.zoomInBtn.focus();
+    }
   }
 
   handleCaptionMousewheel(event) {
@@ -1533,6 +1541,9 @@ class ReactImageLightbox extends Component {
                         ? ['ril__builtinButtonDisabled']
                         : []),
                     ].join(' ')}
+                    ref={el => {
+                      this.zoomInBtn = el
+                    }}
                     disabled={
                       this.isAnimating() || zoomLevel === MAX_ZOOM_LEVEL
                     }
@@ -1560,6 +1571,9 @@ class ReactImageLightbox extends Component {
                         ? ['ril__builtinButtonDisabled']
                         : []),
                     ].join(' ')}
+                    ref={el => {
+                      this.zoomOutBtn = el
+                    }}
                     disabled={
                       this.isAnimating() || zoomLevel === MIN_ZOOM_LEVEL
                     }