From adb47b445191f7c252c0c9bf83b06ffa6e01e93e Mon Sep 17 00:00:00 2001
From: Mauricio Montalvo <mauricio.montalvo.guzman@gmail.com>
Date: Wed, 27 Jan 2021 13:00:11 -0600
Subject: [PATCH 1/3] feat: allow passing a prop to Tabs so up/down keys have
 default functionality

---
 src/components/Tabs.js             |  2 ++
 src/components/UncontrolledTabs.js | 12 +++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Tabs.js b/src/components/Tabs.js
index ee9ae72a94..f0277be388 100644
--- a/src/components/Tabs.js
+++ b/src/components/Tabs.js
@@ -17,6 +17,7 @@ export default class Tabs extends Component {
     forceRenderTabPanel: false,
     selectedIndex: null,
     defaultIndex: null,
+    disableUpDownKeys: false,
   };
 
   static propTypes = {
@@ -30,6 +31,7 @@ export default class Tabs extends Component {
     defaultFocus: PropTypes.bool,
     defaultIndex: PropTypes.number,
     disabledTabClassName: PropTypes.string,
+    disableUpDownKeys: PropTypes.bool,
     domRef: PropTypes.func,
     forceRenderTabPanel: PropTypes.bool,
     onSelect: onSelectPropType,
diff --git a/src/components/UncontrolledTabs.js b/src/components/UncontrolledTabs.js
index ea020a3d06..d810c9d703 100644
--- a/src/components/UncontrolledTabs.js
+++ b/src/components/UncontrolledTabs.js
@@ -50,6 +50,7 @@ export default class UncontrolledTabs extends Component {
       PropTypes.object,
     ]),
     disabledTabClassName: PropTypes.string,
+    disableUpDownKeys: PropTypes.bool,
     domRef: PropTypes.func,
     focus: PropTypes.bool,
     forceRenderTabPanel: PropTypes.bool,
@@ -242,7 +243,7 @@ export default class UncontrolledTabs extends Component {
   }
 
   handleKeyDown = (e) => {
-    const { direction } = this.props;
+    const { direction, disableUpDownKeys } = this.props;
     if (this.isTabFromContainer(e.target)) {
       let { selectedIndex: index } = this.props;
       let preventDefault = false;
@@ -254,8 +255,8 @@ export default class UncontrolledTabs extends Component {
         this.handleClick(e);
       }
 
-      if (e.keyCode === 37 || e.keyCode === 38) {
-        // Select next tab to the left
+      if (e.keyCode === 37 || (!disableUpDownKeys && e.keyCode === 38)) {
+        // Select next tab to the left, validate if up arrow is not disabled
         if (direction === 'rtl') {
           index = this.getNextTab(index);
         } else {
@@ -263,8 +264,8 @@ export default class UncontrolledTabs extends Component {
         }
         preventDefault = true;
         useSelectedIndex = true;
-      } else if (e.keyCode === 39 || e.keyCode === 40) {
-        // Select next tab to the right
+      } else if (e.keyCode === 39 || (!disableUpDownKeys && e.keyCode === 40)) {
+        // Select next tab to the right, validate if down arrow is not disabled
         if (direction === 'rtl') {
           index = this.getPrevTab(index);
         } else {
@@ -350,6 +351,7 @@ export default class UncontrolledTabs extends Component {
       selectedIndex, // unused
       selectedTabClassName, // unused
       selectedTabPanelClassName, // unused
+      disableUpDownKeys, // unused
       ...attributes
     } = this.props;
 

From b1cd975da09bb15a481f49c57c17d0b16b049c6f Mon Sep 17 00:00:00 2001
From: Mauricio Montalvo <mauricio.montalvo.guzman@gmail.com>
Date: Wed, 27 Jan 2021 13:03:03 -0600
Subject: [PATCH 2/3] chore: update main documentation

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 0868b7b1c3..37d331b2cc 100644
--- a/README.md
+++ b/README.md
@@ -114,6 +114,12 @@ Provide a custom class name for disabled tabs.
 
 > This option can also be set directly at the `<Tab />` component.
 
+#### disableUpDownKeys: `bool`
+
+> default: `false`
+
+Disable up & down arrow keys to change tabs.
+
 #### domRef: `(node: ?HTMLElement) => void`
 
 > default: `null`

From c263fcf0c6c1636d5a1672b1690a999c0a43ccff Mon Sep 17 00:00:00 2001
From: Mauricio Montalvo <mauricio.montalvo.guzman@gmail.com>
Date: Wed, 27 Jan 2021 13:03:33 -0600
Subject: [PATCH 3/3] feat: add new tests for Tabs using disableUpDownKeys prop

---
 src/components/__tests__/Tabs-test.js | 39 +++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/components/__tests__/Tabs-test.js b/src/components/__tests__/Tabs-test.js
index c6d78d3fb7..1b71737774 100644
--- a/src/components/__tests__/Tabs-test.js
+++ b/src/components/__tests__/Tabs-test.js
@@ -502,4 +502,43 @@ describe('<Tabs />', () => {
       </Tabs>,
     );
   });
+
+  test('should change tabs when arrow up/down is pressed', () => {
+    render(createTabs());
+    const firstTab = screen.getByTestId('tab1');
+    const secondTab = screen.getByTestId('tab2');
+
+    userEvent.tab();
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+
+    userEvent.type(firstTab, '{arrowdown}');
+    expect(secondTab).toHaveFocus();
+    assertTabSelected(2);
+
+    userEvent.type(secondTab, '{arrowup}');
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+  });
+
+  test('should not change tabs when arrow up/down is pressed and disableUpDownKeys is passed', () => {
+    render(
+      createTabs({
+        disableUpDownKeys: true,
+      }),
+    );
+    const firstTab = screen.getByTestId('tab1');
+
+    userEvent.tab();
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+
+    userEvent.type(firstTab, '{arrowdown}');
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+
+    userEvent.type(firstTab, '{arrowup}');
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+  });
 });