From 07e3e1df3395403dc6b504aec14dfdc0da481971 Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Tue, 19 Jan 2021 09:21:55 -0800
Subject: [PATCH] fix(Tabs): add aria-label to overflow scroll buttons (#7353)

* fix(Tabs): add aria-label to overflow scroll buttons

* feat(Tabs): support additional overflow button props

* chore: update snapshots

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../__snapshots__/PublicAPI-test.js.snap      |  6 ++++++
 packages/react/src/components/Tabs/Tabs.js    | 20 +++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index b068a2f41ccc..b25bb42c6604 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5098,6 +5098,9 @@ Map {
       "hidden": Object {
         "type": "bool",
       },
+      "leftOverflowButtonProps": Object {
+        "type": "object",
+      },
       "light": Object {
         "type": "bool",
       },
@@ -5110,6 +5113,9 @@ Map {
       "onSelectionChange": Object {
         "type": "func",
       },
+      "rightOverflowButtonProps": Object {
+        "type": "object",
+      },
       "scrollIntoView": Object {
         "type": "bool",
       },
diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
index 966f524a96ca..f35e93bf9bf9 100644
--- a/packages/react/src/components/Tabs/Tabs.js
+++ b/packages/react/src/components/Tabs/Tabs.js
@@ -35,6 +35,11 @@ export default class Tabs extends React.Component {
      */
     hidden: PropTypes.bool,
 
+    /**
+     * Provide the props that describe the left overflow button
+     */
+    leftOverflowButtonProps: PropTypes.object,
+
     /**
      * Specify whether or not to use the light component variant
      */
@@ -59,6 +64,11 @@ export default class Tabs extends React.Component {
      */
     onSelectionChange: PropTypes.func,
 
+    /**
+     * Provide the props that describe the right overflow button
+     */
+    rightOverflowButtonProps: PropTypes.object,
+
     /**
      * Choose whether or not to automatically scroll to newly selected tabs
      * on component rerender
@@ -389,6 +399,8 @@ export default class Tabs extends React.Component {
       scrollIntoView, // eslint-disable-line no-unused-vars
       selectionMode, // eslint-disable-line no-unused-vars
       tabContentClassName,
+      leftOverflowButtonProps,
+      rightOverflowButtonProps,
       ...other
     } = this.props;
 
@@ -479,6 +491,7 @@ export default class Tabs extends React.Component {
         <div {...other} className={classes.tabs} onScroll={this.handleScroll}>
           <button
             aria-hidden="true"
+            aria-label="Scroll left"
             className={classes.leftOverflowButtonClasses}
             onClick={(_) => this.handleOverflowNavClick(_, { direction: -1 })}
             onMouseDown={(event) =>
@@ -487,7 +500,8 @@ export default class Tabs extends React.Component {
             onMouseUp={this.handleOverflowNavMouseUp}
             ref={this.leftOverflowNavButton}
             tabIndex="-1"
-            type="button">
+            type="button"
+            {...leftOverflowButtonProps}>
             <ChevronLeft16 />
           </button>
           {!leftOverflowNavButtonHidden && (
@@ -505,6 +519,7 @@ export default class Tabs extends React.Component {
           )}
           <button
             aria-hidden="true"
+            aria-label="Scroll right"
             className={classes.rightOverflowButtonClasses}
             onClick={(_) => this.handleOverflowNavClick(_, { direction: 1 })}
             onMouseDown={(event) =>
@@ -513,7 +528,8 @@ export default class Tabs extends React.Component {
             onMouseUp={this.handleOverflowNavMouseUp}
             ref={this.rightOverflowNavButton}
             tabIndex="-1"
-            type="button">
+            type="button"
+            {...rightOverflowButtonProps}>
             <ChevronRight16 />
           </button>
         </div>