From 9921286b60b979f06ec9061253b5102ae7917c82 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Fri, 16 Oct 2020 11:09:30 -0500
Subject: [PATCH] fix(Tabs): prevent keyboard focus of scroll buttons

---
 packages/react/src/components/Tabs/Tabs.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
index acd3148c708d..2251423fcd43 100644
--- 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>