feat(tabs): traverse tabs with arrow keys

closes elastic#8005

packages/eui/src/components/tabs/tab.tsx

@@ -100,6 +100,7 @@ export const EuiTab: FunctionComponent<Props> = ({
       <a
         role="tab"
         aria-selected={!!isSelected}
+        tabIndex={isSelected ? 0 : -1}
         className={classes}
         css={cssTabStyles}
         href={href}
@@ -123,6 +124,7 @@ export const EuiTab: FunctionComponent<Props> = ({
     <button
       role="tab"
       aria-selected={!!isSelected}
+      tabIndex={isSelected ? 0 : -1}
       type="button"
       className={classes}
       css={cssTabStyles}

packages/eui/src/components/tabs/tabs.tsx

@@ -9,11 +9,12 @@
 import React, {
   forwardRef,
   HTMLAttributes,
+  KeyboardEventHandler,
   PropsWithChildren,
   ReactNode,
 } from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../services';
+import { keys, useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
 import { euiTabsStyles } from './tabs.styles';
 import { EuiTabsContext } from './tabs_context';
@@ -67,11 +68,32 @@ export const EuiTabs = forwardRef<EuiTabRef, EuiTabsProps>(
       bottomBorder && styles.bottomBorder,
     ];
 
+    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+      const tablist = event.currentTarget;
+      const tabs = tablist?.querySelectorAll<HTMLButtonElement>(
+        '[role="tab"]:not(:disabled, [inert])'
+      );
+      if (!tabs?.length) return;
+
+      const currentIndex = Array.from(tabs).findIndex((tab) =>
+        tab.matches(':focus')
+      );
+
+      if (event.key === keys.ARROW_LEFT) {
+        const previousIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        tabs[previousIndex].focus();
+      } else if (event.key === keys.ARROW_RIGHT) {
+        const nextIndex = (currentIndex + 1) % tabs.length;
+        tabs[nextIndex].focus();
+      }
+    };
+
     return (
       <div
         ref={ref}
         className={classes}
         css={cssStyles}
+        onKeyDown={handleKeyDown}
         {...(children && { role: 'tablist' })}
         {...rest}
       >