fix(Tabs): prevent keyboard focus of scroll buttons

carbon-design-system · Oct 16, 2020 · 9921286 · 9921286
1 parent 3e8ed73
commit 9921286
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
@@ -424,14 +424,16 @@ export default class Tabs extends React.Component {
       <div className={`${prefix}--tabs--scrollable`}>
         <div {...other} className={classes.tabs} onScroll={this.handleScroll}>
           <button
-            type="button"
+            aria-hidden="true"
             className={classes.leftOverflowButtonClasses}
             onClick={(_) => this.handleOverflowNavClick(_, { direction: -1 })}
             onMouseDown={(event) =>
               this.handleOverflowNavMouseDown(event, { direction: -1 })
             }
             onMouseUp={this.handleOverflowNavMouseUp}
-            ref={this.leftOverflowNavButton}>
+            ref={this.leftOverflowNavButton}
+            tabIndex="-1"
+            type="button">
             <ChevronLeft16 />
           </button>
           {!leftOverflowNavButtonHidden && (
@@ -444,14 +446,16 @@ export default class Tabs extends React.Component {
             <div className={`${prefix}--tabs__overflow-indicator--right`} />
           )}
           <button
-            type="button"
+            aria-hidden="true"
             className={classes.rightOverflowButtonClasses}
             onClick={(_) => this.handleOverflowNavClick(_, { direction: 1 })}
             onMouseDown={(event) =>
               this.handleOverflowNavMouseDown(event, { direction: 1 })
             }
             onMouseUp={this.handleOverflowNavMouseUp}
-            ref={this.rightOverflowNavButton}>
+            ref={this.rightOverflowNavButton}
+            tabIndex="-1"
+            type="button">
             <ChevronRight16 />
           </button>
         </div>