fix: tab: added a prop to enable standard key navigation for tabs component

src/components/InfoBar/InfoBar.tsx

@@ -92,7 +92,6 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
       }, 1000);
     }, [closeButtonRef, closable]);
 
-
     const infoBarClassNames: string = mergeClasses([
       styles.infoBar,
       { [styles.bordered]: !!bordered },

src/components/Tabs/Tab/Tab.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { FC, Ref } from 'react';
+import React, { FC, Ref, useEffect, useRef } from 'react';
 import { mergeClasses } from '../../../shared/utilities';
 import { TabIconAlign, TabProps, TabSize, TabVariant } from '../Tabs.types';
 import { useTabs } from '../Tabs.context';
@@ -13,6 +13,7 @@ import { Loader } from '../../Loader';
 import { useCanvasDirection } from '../../../hooks/useCanvasDirection';
 
 import styles from '../tabs.module.scss';
+import { useMergedRefs } from '../../../hooks/useMergedRefs';
 
 export const Tab: FC<TabProps> = React.forwardRef(
   (
@@ -25,11 +26,15 @@ export const Tab: FC<TabProps> = React.forwardRef(
       label,
       loading,
       value,
+      ariaControls,
+      index = 0,
       ...rest
     },
     ref: Ref<HTMLButtonElement>
   ) => {
     const htmlDir: string = useCanvasDirection();
+    const tabRef = useRef(null);
+    const combinedRef = useMergedRefs(ref, tabRef);
 
     const {
       alignIcon,
@@ -38,6 +43,10 @@ export const Tab: FC<TabProps> = React.forwardRef(
       currentActiveTab,
       size,
       variant,
+      enableArrowNav,
+      handleKeyDown,
+      registerTab,
+      focusedTabIndex,
       theme,
     } = useTabs();
 
@@ -63,6 +72,12 @@ export const Tab: FC<TabProps> = React.forwardRef(
       [TabSize.XSmall, IconSize.Small],
     ]);
 
+    useEffect(() => {
+      if (registerTab) {
+        registerTab(tabRef.current, index);
+      }
+    }, [registerTab, index]);
+
     const getIcon = (): JSX.Element =>
       // TODO: Once sizes are implemented for other variants, use the mapping.
       // For now, a ternary determines if mapping vs using the default icon size (medium).
@@ -106,16 +121,41 @@ export const Tab: FC<TabProps> = React.forwardRef(
     const getLoader = (): JSX.Element =>
       loading && <Loader classNames={styles.loader} />;
 
+    const handleTabKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (enableArrowNav && index !== undefined) {
+        handleKeyDown?.(e, index);
+      }
+    };
+
+    const currentActiveTabIndex =
+      parseInt(currentActiveTab.match(/\d+/)?.[0] || '0', 10) - 1;
+
+    const getTabIndex = () => {
+      if (
+        currentActiveTabIndex !== undefined &&
+        currentActiveTabIndex !== null &&
+        index === currentActiveTabIndex
+      ) {
+        return 0;
+      }
+      return -1;
+    };
+
     return (
       <button
         {...rest}
-        ref={ref}
+        aria-controls={ariaControls}
+        ref={combinedRef}
         className={tabClassNames}
         aria-label={ariaLabel}
         aria-selected={isActive}
         role="tab"
         disabled={disabled}
         onClick={(e) => onTabClick(value, e)}
+        onKeyDown={handleTabKeyDown}
+        tabIndex={getTabIndex()}
+        data-index={index}
+        data-value={value}
       >
         {alignIcon === TabIconAlign.Start && getIcon()}
         {getLabel()}

src/components/Tabs/Tabs.context.tsx

@@ -1,4 +1,10 @@
-import React, { createContext, useEffect, useState } from 'react';
+import React, {
+  createContext,
+  useCallback,
+  useEffect,
+  useState,
+  useRef,
+} from 'react';
 import {
   TabsContextProps,
   ITabsContext,
@@ -29,17 +35,188 @@ const TabsProvider = ({
   themeContainerId,
   statgrouptheme,
   value,
+  disabledTabIndexes = [],
+  enableArrowNav = true,
   variant = TabVariant.default,
 }: TabsContextProps) => {
-  const [currentActiveTab, setCurrentActiveTab] = useState<TabValue>(value);
+  const [currentActiveTab, setCurrentActiveTab] = useState(value);
+  const [focusedTabIndex, setFocusedTabIndex] = useState<number | null>(null);
+  const tabsRef = useRef<HTMLElement[]>([]);
+  const tabListRef = useRef<HTMLElement | null>(null);
+  const tabsValuesRef = useRef<TabValue[]>([]);
 
   useEffect(() => {
     setCurrentActiveTab(value);
   }, [value]);
 
-  const onTabClick = (value: TabValue, e: SelectTabEvent) => {
-    onChange(value, e);
-  };
+  const registerTab = useCallback(
+    (tabElement: HTMLElement | null, index: number) => {
+      if (tabElement) {
+        tabsRef.current[index] = tabElement;
+        const tabValue = tabElement.getAttribute('data-value');
+        if (tabValue) {
+          tabsValuesRef.current[index] = tabValue;
+        }
+      }
+    },
+    []
+  );
+
+  const registerTablist = useCallback((tabListElement: HTMLElement | null) => {
+    tabListRef.current = tabListElement;
+  }, []);
+
+  const onTabClick = useCallback(
+    (value: TabValue, e: SelectTabEvent) => {
+      if (!readOnly) {
+        setCurrentActiveTab(value);
+        onChange(value, e);
+      }
+    },
+    [onChange, readOnly]
+  );
+
+  const moveFocusToNextTab = useCallback(() => {
+    const tabValues = tabsValuesRef.current.filter(Boolean);
+    if (tabValues.length === 0) return;
+
+    let currentIndex =
+      focusedTabIndex !== null
+        ? focusedTabIndex
+        : tabValues.indexOf(currentActiveTab);
+    if (currentIndex === -1) currentIndex = 0;
+
+    let nextIndex = currentIndex;
+    do {
+      nextIndex = (nextIndex + 1) % tabValues.length;
+      if (nextIndex === currentIndex) break;
+    } while (disabledTabIndexes.includes(nextIndex));
+
+    const nextTab = tabsRef.current[nextIndex];
+    if (nextTab && !disabledTabIndexes.includes(nextIndex)) {
+      nextTab.focus();
+      setFocusedTabIndex(nextIndex);
+    }
+  }, [focusedTabIndex, currentActiveTab, disabledTabIndexes]);
+
+  const moveFocusToPreviousTab = useCallback(() => {
+    const tabValues = tabsValuesRef.current.filter(Boolean);
+    if (tabValues.length == 0) return;
+
+    let currentIndex =
+      focusedTabIndex !== null
+        ? focusedTabIndex
+        : tabValues.indexOf(currentActiveTab);
+    if (currentIndex === -1) currentIndex = 0;
+
+    let prevIndex = currentIndex;
+    do {
+      prevIndex = (prevIndex - 1 + tabValues.length) % tabValues.length;
+      if (prevIndex === currentIndex) break;
+    } while (disabledTabIndexes.includes(prevIndex));
+
+    const prevTab = tabsRef.current[prevIndex];
+    if (prevTab && !disabledTabIndexes.includes(prevIndex)) {
+      prevTab.focus();
+      setFocusedTabIndex(prevIndex);
+    }
+  }, [focusedTabIndex, currentActiveTab, disabledTabIndexes]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (enableArrowNav) return;
+      if (event.key == 'Tab') {
+        const activeElement = document.activeElement;
+        const tabList = tabListRef.current;
+
+        if (
+          tabList &&
+          tabList.contains(activeElement) &&
+          activeElement?.getAttribute('role') === 'tab'
+        ) {
+          event.preventDefault();
+          if (event.shiftKey) {
+            moveFocusToPreviousTab();
+          } else {
+            moveFocusToNextTab();
+          }
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [moveFocusToNextTab, moveFocusToPreviousTab]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent, tabIndex: number) => {
+      if (!enableArrowNav || readOnly) return;
+
+      if (event.key === 'Tab') {
+        return;
+      }
+
+      const enableTabIndexes = tabsRef.current
+        .map((_, index) => index)
+        .filter((index) => !disabledTabIndexes.includes(index));
+
+      const currentEnabledIndex = enableTabIndexes.indexOf(tabIndex);
+
+      if (currentEnabledIndex === -1) return;
+
+      let nextFocusIndex: number | null = null;
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          nextFocusIndex =
+            currentEnabledIndex === 0
+              ? enableTabIndexes[enableTabIndexes.length - 1]
+              : enableTabIndexes[currentEnabledIndex - 1];
+          event.preventDefault();
+          break;
+        case 'ArrowRight':
+          nextFocusIndex =
+            currentEnabledIndex === enableTabIndexes.length - 1
+              ? enableTabIndexes[0]
+              : enableTabIndexes[currentEnabledIndex + 1];
+          event.preventDefault();
+          break;
+        case 'Home':
+          nextFocusIndex = enableTabIndexes[0];
+          event.preventDefault();
+          break;
+        case 'End':
+          nextFocusIndex = enableTabIndexes[enableTabIndexes.length - 1];
+          event.preventDefault();
+          break;
+        case 'Enter':
+          const currentTab = tabsRef.current[tabIndex];
+          if (currentTab) {
+            const tabValue = currentTab.getAttribute('data-value');
+            if (tabValue) {
+              setCurrentActiveTab(tabValue);
+              onChange?.(tabValue, {
+                currentTarget: currentTab,
+              } as SelectTabEvent);
+            }
+          }
+          event.preventDefault();
+          return;
+        default:
+          return;
+      }
+
+      if (nextFocusIndex !== null) {
+        const nextTab = tabsRef.current[nextFocusIndex];
+        if (nextTab) {
+          nextTab.focus();
+          setFocusedTabIndex(nextFocusIndex);
+        }
+      }
+    },
+    [enableArrowNav, disabledTabIndexes, readOnly, onChange]
+  );
 
   return (
     <TabsContext.Provider
@@ -59,6 +236,12 @@ const TabsProvider = ({
         theme,
         themeContainerId,
         variant,
+        registerTab,
+        registerTablist,
+        handleKeyDown,
+        enableArrowNav,
+        disabledTabIndexes,
+        focusedTabIndex,
       }}
     >
       {children}

src/components/Tabs/Tabs.stories.tsx

@@ -73,13 +73,15 @@ const tabs = [1, 2, 3, 4].map((i) => ({
   value: `tab${i}`,
   label: `Tab ${i}`,
   ariaLabel: `Tab ${i}`,
+  id: `tab-${i}`,
   ...(i === 4 ? { disabled: true } : {}),
 }));
 
 const badgeTabs = [1, 2, 3, 4].map((i) => ({
   value: `tab${i}`,
   label: `Tab ${i}`,
   ariaLabel: `Tab ${i}`,
+  id: `tab-${i}`,
   badgeContent: i,
   ...(i === 4 ? { disabled: true } : {}),
 }));
@@ -88,6 +90,7 @@ const iconTabs = [1, 2, 3, 4].map((i) => ({
   value: `tab${i}`,
   icon: IconName.mdiCardsHeart,
   ariaLabel: `Tab ${i}`,
+  id: `tab-${i}`,
   ...(i === 4 ? { disabled: true } : {}),
 }));
 
@@ -96,16 +99,22 @@ const iconLabelTabs = [1, 2, 3, 4].map((i) => ({
   icon: IconName.mdiCardsHeart,
   label: `Tab ${i}`,
   ariaLabel: `Tab ${i}`,
+  id: `tab-${i}`,
   ...(i === 4 ? { disabled: true } : {}),
 }));
 
 const scrollableTabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => ({
   value: `tab${i}`,
   label: `Tab ${i}`,
   ariaLabel: `Tab ${i}`,
+  id: `tab-${i}`,
   ...(i === 4 ? { disabled: true } : {}),
 }));
 
+const disabledTabIndexes = tabs
+  .map((tab, index) => (tab.disabled ? index : -1))
+  .filter((index) => index !== -1);
+
 const Tabs_Story: ComponentStory<typeof Tabs> = (args) => {
   const [activeTabs, setActiveTabs] = useState({ defaultTab: 'tab1' });
   return (
@@ -123,6 +132,7 @@ const Tabs_Story: ComponentStory<typeof Tabs> = (args) => {
         {...args}
         onChange={(tab) => setActiveTabs({ ...activeTabs, defaultTab: tab })}
         value={activeTabs.defaultTab}
+        disabledTabIndexes={disabledTabIndexes}
       />
     </div>
   );
@@ -170,6 +180,7 @@ const tabsArgs: Object = {
   variant: TabVariant.default,
   size: TabSize.Medium,
   underlined: false,
+  enableArrowNav: false,
   children: tabs.map((tab) => <Tab key={tab.value} {...tab} />),
   style: {},
 };