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>
carbon-design-system · Jan 19, 2021 · 07e3e1d · 07e3e1d
1 parent a7d0aa7
commit 07e3e1d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git 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
@@ -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>