gh-545: Remove tabindex for non-interactive div

leandrowd · Apr 2, 2021 · e1ba29b · e1ba29b
1 parent d78aa78
commit e1ba29b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/src/__tests__/Carousel.tsx b/src/__tests__/Carousel.tsx
@@ -313,6 +313,10 @@ describe('Slider', function() {
                     componentInstance.navigateWithKeyboard
                 );
             });
+
+            it('should not set a tabIndex on the carousel-root', () => {
+                expect(component.find('.carousel-root[tabIndex=0]').length).toBe(0);
+            });
         });
 
         describe('when useKeyboardArrows is true', () => {
@@ -343,6 +347,10 @@ describe('Slider', function() {
                     componentInstance.navigateWithKeyboard
                 );
             });
+
+            it('should set a tabIndex on the carousel-root', () => {
+                expect(component.find('.carousel-root[tabIndex=0]').length).toBe(1);
+            });
         });
     });
 

diff --git a/src/__tests__/__snapshots__/Carousel.tsx.snap b/src/__tests__/__snapshots__/Carousel.tsx.snap
@@ -65,7 +65,6 @@ Array [
 exports[`Slider Snapshots center mode 1`] = `
 <div
   className="carousel-root"
-  tabIndex={0}
 >
   <div
     className="carousel carousel-slider"
@@ -444,7 +443,6 @@ exports[`Slider Snapshots center mode 1`] = `
 exports[`Slider Snapshots custom class name 1`] = `
 <div
   className="carousel-root my-custom-carousel"
-  tabIndex={0}
 >
   <div
     className="carousel carousel-slider"
@@ -795,7 +793,6 @@ exports[`Slider Snapshots custom class name 1`] = `
 exports[`Slider Snapshots custom width 1`] = `
 <div
   className="carousel-root"
-  tabIndex={0}
 >
   <div
     className="carousel carousel-slider"
@@ -1146,7 +1143,6 @@ exports[`Slider Snapshots custom width 1`] = `
 exports[`Slider Snapshots default 1`] = `
 <div
   className="carousel-root"
-  tabIndex={0}
 >
   <div
     className="carousel carousel-slider"
@@ -1497,7 +1493,6 @@ exports[`Slider Snapshots default 1`] = `
 exports[`Slider Snapshots infinite loop 1`] = `
 <div
   className="carousel-root"
-  tabIndex={0}
 >
   <div
     className="carousel carousel-slider"
@@ -1866,7 +1861,6 @@ exports[`Slider Snapshots infinite loop 1`] = `
 exports[`Slider Snapshots no arrows 1`] = `
 <div
   className="carousel-root"
-  tabIndex={0}
 >
   <div
     className="carousel carousel-slider"
@@ -2219,7 +2213,6 @@ exports[`Slider Snapshots no children at mount 1`] = `null`;
 exports[`Slider Snapshots no indicators 1`] = `
 <div
   className="carousel-root"
-  tabIndex={0}
 >
   <div
     className="carousel carousel-slider"
@@ -2503,7 +2496,6 @@ exports[`Slider Snapshots no indicators 1`] = `
 exports[`Slider Snapshots no indicators 2`] = `
 <div
   className="carousel-root"
-  tabIndex={0}
 >
   <div
     className="carousel carousel-slider"
@@ -2849,7 +2841,6 @@ exports[`Slider Snapshots no indicators 2`] = `
 exports[`Slider Snapshots no thumbs 1`] = `
 <div
   className="carousel-root"
-  tabIndex={0}
 >
   <div
     className="carousel carousel-slider"
@@ -3038,7 +3029,6 @@ exports[`Slider Snapshots no thumbs 1`] = `
 exports[`Slider Snapshots swipeable false 1`] = `
 <div
   className="carousel-root"
-  tabIndex={0}
 >
   <div
     className="carousel carousel-slider"
@@ -3386,7 +3376,6 @@ exports[`Slider Snapshots swipeable false 1`] = `
 exports[`Slider Snapshots vertical axis 1`] = `
 <div
   className="carousel-root"
-  tabIndex={0}
 >
   <div
     className="carousel carousel-slider"

diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
@@ -744,7 +744,11 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
             containerStyles.height = this.state.itemSize;
         }
         return (
-            <div className={klass.ROOT(this.props.className)} ref={this.setCarouselWrapperRef} tabIndex={0}>
+            <div
+                className={klass.ROOT(this.props.className)}
+                ref={this.setCarouselWrapperRef}
+                tabIndex={this.props.useKeyboardArrows ? 0 : undefined}
+            >
                 <div className={klass.CAROUSEL(true)} style={{ width: this.props.width }}>
                     {this.renderControls()}
                     {this.props.renderArrowPrev(this.onClickPrev, hasPrev, this.props.labels.leftArrow)}