#514 Introduce autoFocus props so useKeyboardArrows can work without …

…initial interaction
leandrowd · Dec 5, 2020 · 1b06898 · 1b06898
1 parent a2738b6
commit 1b06898
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git a/src/__tests__/Carousel.tsx b/src/__tests__/Carousel.tsx
@@ -784,6 +784,36 @@ describe('Slider', function() {
         });
     });
 
+    describe('Focus', () => {
+        describe('calling forceFocus', () => {
+            it('should call carousel wrapper focus', () => {
+                componentInstance.carouselWrapperRef.focus = jest.fn();
+                componentInstance.forceFocus();
+                expect(componentInstance.carouselWrapperRef.focus).toHaveBeenCalledTimes(1);
+            });
+        });
+
+        describe('AutoFocus === true', () => {
+            it('should call forceFocus on componentDidMount', () => {
+                const forceFocusSpy = jest.spyOn(Carousel.prototype, 'forceFocus');
+                renderDefaultComponent({ autoFocus: true });
+                expect(forceFocusSpy).toHaveBeenCalledTimes(1);
+                forceFocusSpy.mockReset();
+                forceFocusSpy.mockRestore();
+            });
+
+            it('should call forceFocus conditionally on componentDidUpdate', () => {
+                componentInstance.forceFocus = jest.fn();
+
+                component.setProps({ autoFocus: false });
+                expect(componentInstance.forceFocus).toHaveBeenCalledTimes(0);
+
+                component.setProps({ autoFocus: true });
+                expect(componentInstance.forceFocus).toHaveBeenCalledTimes(1);
+            });
+        });
+    });
+
     describe('Swiping', () => {
         describe('onSwipeStart', () => {
             it('should set swiping to true', () => {

diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -17,6 +17,7 @@ const isKeyboardEvent = (e?: React.MouseEvent | React.KeyboardEvent): e is React
 
 export interface Props {
     axis: 'horizontal' | 'vertical';
+    autoFocus?: boolean;
     autoPlay?: boolean;
     centerMode?: boolean;
     centerSlidePercentage: number;
@@ -199,6 +200,10 @@ export default class Carousel extends React.Component<Props, State> {
             this.setupCarousel();
         }
 
+        if (!prevProps.autoFocus && this.props.autoFocus) {
+            this.forceFocus();
+        }
+
         if (prevState.swiping && !this.state.swiping) {
             // We stopped swiping, ensure we are heading to the new/current slide and not stuck
             this.resetPosition();
@@ -250,6 +255,10 @@ export default class Carousel extends React.Component<Props, State> {
             this.setupAutoPlay();
         }
 
+        if (this.props.autoFocus) {
+            this.forceFocus();
+        }
+
         this.setState(
             {
                 initialized: true,
@@ -353,6 +362,10 @@ export default class Carousel extends React.Component<Props, State> {
         this.setState({ isMouseEntered: false }, this.autoPlay);
     };
 
+    forceFocus() {
+        this.carouselWrapperRef?.focus();
+    }
+
     isFocusWithinTheCarousel = () => {
         if (!this.carouselWrapperRef) {
             return false;

diff --git a/stories/01-basic.tsx b/stories/01-basic.tsx
@@ -34,6 +34,7 @@ const getConfigurableProps = () => ({
     swipeable: boolean('swipeable', true, tooglesGroupId),
     dynamicHeight: boolean('dynamicHeight', true, tooglesGroupId),
     emulateTouch: boolean('emulateTouch', true, tooglesGroupId),
+    autoFocus: boolean('autoFocus', false, tooglesGroupId),
     thumbWidth: number('thumbWidth', 100, {}, valuesGroupId),
     selectedItem: number('selectedItem', 0, {}, valuesGroupId),
     interval: number('interval', 3000, {}, valuesGroupId),

diff --git a/stories/02-advanced.tsx b/stories/02-advanced.tsx
@@ -165,7 +165,7 @@ export const withExternalControls = () => {
 };
 
 export const presentationMode = () => (
-    <Carousel showThumbs={false} showStatus={false} useKeyboardArrows className="presentation-mode">
+    <Carousel autoFocus={true} showThumbs={false} showStatus={false} useKeyboardArrows className="presentation-mode">
         <div key="content-0" className="my-slide primary">
             <h1>Presentation mode</h1>
         </div>