feat: Allow disable left right buttons (#504)

Author: dpkrolak

index.d.ts

@@ -8,6 +8,7 @@ export interface TabsProps
   direction?: 'rtl' | 'ltr' | undefined;
   disabledTabClassName?: string | undefined;
   disableUpDownKeys?: boolean | undefined;
+  disableLeftRightKeys?: boolean | undefined;
   domRef?: ((node?: HTMLElement) => void) | undefined;
   environment?: Window | undefined;
   focusTabOnClick?: boolean | undefined;

src/components/Tabs.js

@@ -22,6 +22,7 @@ const propTypes = {
   direction: PropTypes.oneOf(['rtl', 'ltr']),
   disabledTabClassName: PropTypes.string,
   disableUpDownKeys: PropTypes.bool,
+  disableLeftRightKeys: PropTypes.bool,
   domRef: PropTypes.func,
   environment: PropTypes.object,
   focusTabOnClick: PropTypes.bool,
@@ -39,6 +40,7 @@ const defaultProps = {
   defaultIndex: null,
   environment: null,
   disableUpDownKeys: false,
+  disableLeftRightKeys: false,
 };
 
 const getModeFromProps = (props) => {

src/components/UncontrolledTabs.js

@@ -57,6 +57,7 @@ const propTypes = {
   ]),
   disabledTabClassName: PropTypes.string,
   disableUpDownKeys: PropTypes.bool,
+  disableLeftRightKeys: PropTypes.bool,
   domRef: PropTypes.func,
   focus: PropTypes.bool,
   forceRenderTabPanel: PropTypes.bool,
@@ -256,7 +257,7 @@ const UncontrolledTabs = (props) => {
   }
 
   function handleKeyDown(e) {
-    const { direction, disableUpDownKeys } = props;
+    const { direction, disableUpDownKeys, disableLeftRightKeys } = props;
     if (isTabFromContainer(e.target)) {
       let { selectedIndex: index } = props;
       let preventDefault = false;
@@ -276,8 +277,8 @@ const UncontrolledTabs = (props) => {
       // keyCode is deprecated and only used here for IE
 
       if (
-        e.code === 'ArrowLeft' ||
-        e.keyCode === 37 /* arrow left */ ||
+        (!disableLeftRightKeys &&
+          (e.keyCode === 37 || e.code === 'ArrowLeft')) /* arrow left */ ||
         (!disableUpDownKeys &&
           (e.keyCode === 38 || e.code === 'ArrowUp')) /* arrow up */
       ) {
@@ -290,8 +291,8 @@ const UncontrolledTabs = (props) => {
         preventDefault = true;
         useSelectedIndex = true;
       } else if (
-        e.code === 'ArrowRight' ||
-        e.keyCode === 39 /* arrow right */ ||
+        (!disableLeftRightKeys &&
+          (e.keyCode === 39 || e.code === 'ArrowRight')) /* arrow right */ ||
         (!disableUpDownKeys &&
           (e.keyCode === 40 || e.code === 'ArrowDown')) /* arrow down */
       ) {
@@ -380,6 +381,7 @@ const UncontrolledTabs = (props) => {
     selectedTabPanelClassName, // unused
     environment, // unused
     disableUpDownKeys, // unused
+    disableLeftRightKeys, // unused
     ...attributes
   } = props;
   return (

src/components/__tests__/Tabs-test.js

@@ -608,6 +608,27 @@ describe('<Tabs />', () => {
     assertTabSelected(1);
   });
 
+  test('should not change tabs when arrow left/right is pressed and disableLeftRightKeys is passed', async () => {
+    render(
+      createTabs({
+        disableLeftRightKeys: true,
+      }),
+    );
+    const firstTab = screen.getByTestId('tab1');
+
+    await userEvent.tab();
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+
+    await userEvent.type(firstTab, '[ArrowLeft]');
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+
+    await userEvent.type(firstTab, '[ArrowRight]');
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+  });
+
   test('should render first tab once tabs are available', () => {
     const { rerender } = render(<Tabs></Tabs>);