@mui/material 9.0.0-alpha.2 → 9.0.0-alpha.3

package/StepConnector/StepConnector.js

@@ -15,7 +15,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
-var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
+var _StepperContext = require("../Stepper/StepperContext");
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _stepConnectorClasses = require("./stepConnectorClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -112,7 +112,7 @@ const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inPro
   const {
     alternativeLabel,
     orientation = 'horizontal'
-  } = React.useContext(_StepperContext.default);
+  } = (0, _StepperContext.useStepperContext)();
   const {
     active,
     disabled,

package/StepConnector/StepConnector.mjs

@@ -8,7 +8,7 @@ import capitalize from "../utils/capitalize.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
-import StepperContext from "../Stepper/StepperContext.mjs";
+import { useStepperContext } from "../Stepper/StepperContext.mjs";
 import StepContext from "../Step/StepContext.mjs";
 import { getStepConnectorUtilityClass } from "./stepConnectorClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -105,7 +105,7 @@ const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inPro
   const {
     alternativeLabel,
     orientation = 'horizontal'
-  } = React.useContext(StepperContext);
+  } = useStepperContext();
   const {
     active,
     disabled,

package/StepContent/StepContent.js

@@ -15,7 +15,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Collapse = _interopRequireDefault(require("../Collapse"));
-var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
+var _StepperContext = require("../Stepper/StepperContext");
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _stepContentClasses = require("./stepContentClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
@@ -79,7 +79,7 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
   } = props;
   const {
     orientation
-  } = React.useContext(_StepperContext.default);
+  } = (0, _StepperContext.useStepperContext)();
   const {
     active,
     last,

package/StepContent/StepContent.mjs

@@ -8,7 +8,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import Collapse from "../Collapse/index.mjs";
-import StepperContext from "../Stepper/StepperContext.mjs";
+import { useStepperContext } from "../Stepper/StepperContext.mjs";
 import StepContext from "../Step/StepContext.mjs";
 import { getStepContentUtilityClass } from "./stepContentClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
@@ -72,7 +72,7 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
   } = props;
   const {
     orientation
-  } = React.useContext(StepperContext);
+  } = useStepperContext();
   const {
     active,
     last,

package/StepLabel/StepLabel.js

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _StepIcon = _interopRequireDefault(require("../StepIcon"));
-var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
+var _StepperContext = require("../Stepper/StepperContext");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -132,7 +132,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   const {
     alternativeLabel,
     orientation
-  } = React.useContext(_StepperContext.default);
+  } = (0, _StepperContext.useStepperContext)();
   const {
     active,
     disabled,

package/StepLabel/StepLabel.mjs

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import StepContext from "../Step/StepContext.mjs";
 import StepIcon from "../StepIcon/index.mjs";
-import StepperContext from "../Stepper/StepperContext.mjs";
+import { useStepperContext } from "../Stepper/StepperContext.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
@@ -125,7 +125,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   const {
     alternativeLabel,
     orientation
-  } = React.useContext(StepperContext);
+  } = useStepperContext();
   const {
     active,
     disabled,

package/Stepper/Stepper.js

@@ -12,11 +12,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _useRovingTabIndex = _interopRequireDefault(require("../utils/useRovingTabIndex"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _stepperClasses = require("./stepperClasses");
 var _StepConnector = _interopRequireDefault(require("../StepConnector"));
-var _StepperContext = _interopRequireDefault(require("./StepperContext"));
+var _StepperContext = require("./StepperContext");
+var _StepButton = _interopRequireDefault(require("../StepButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -30,7 +33,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _stepperClasses.getStepperUtilityClass, classes);
 };
-const StepperRoot = (0, _zeroStyled.styled)('div', {
+const StepperRoot = (0, _zeroStyled.styled)('ol', {
   name: 'MuiStepper',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -41,6 +44,9 @@ const StepperRoot = (0, _zeroStyled.styled)('div', {
   }
 })({
   display: 'flex',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
   variants: [{
     props: {
       orientation: 'horizontal'
@@ -67,6 +73,7 @@ const StepperRoot = (0, _zeroStyled.styled)('div', {
 });
 const defaultConnector = /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepConnector.default, {});
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
+  const isRtl = (0, _RtlProvider.useRtl)();
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiStepper'
@@ -76,7 +83,7 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     alternativeLabel = false,
     children,
     className,
-    component = 'div',
+    component = 'ol',
     connector = defaultConnector,
     nonLinear = false,
     orientation = 'horizontal',
@@ -91,27 +98,57 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const totalSteps = childrenArray.length;
+  const isTabList = childrenArray.some(child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return false;
+    }
+    if (child.type === _StepButton.default) {
+      return true;
+    }
+    const grandChildren = child.props.children;
+    if (grandChildren) {
+      return React.Children.toArray(grandChildren).some(grandChild => /*#__PURE__*/React.isValidElement(grandChild) && grandChild.type === _StepButton.default);
+    }
+    return false;
+  });
   const steps = childrenArray.map((step, index) => {
     return /*#__PURE__*/React.cloneElement(step, {
       index,
-      last: index + 1 === childrenArray.length,
+      last: index + 1 === totalSteps,
       ...step.props
     });
   });
+  const {
+    getContainerProps,
+    getItemProps
+  } = (0, _useRovingTabIndex.default)({
+    orientation,
+    isRtl
+  });
+  const rovingTabIndexContainerProps = getContainerProps(ref);
   const contextValue = React.useMemo(() => ({
     activeStep,
     alternativeLabel,
     connector,
     nonLinear,
-    orientation
-  }), [activeStep, alternativeLabel, connector, nonLinear, orientation]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperContext.default.Provider, {
+    orientation,
+    totalSteps,
+    getRovingTabIndexProps: getItemProps,
+    isTabList
+  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, getItemProps, isTabList]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperContext.StepperContextProvider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperRoot, {
       as: component,
       ownerState: ownerState,
       className: (0, _clsx.default)(classes.root, className),
       ref: ref,
+      ...(isTabList && {
+        role: 'tablist',
+        'aria-orientation': orientation,
+        ...rovingTabIndexContainerProps
+      }),
       ...other,
       children: steps
     })

package/Stepper/Stepper.mjs

@@ -5,11 +5,14 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
+import useRovingTabIndex from "../utils/useRovingTabIndex.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import { getStepperUtilityClass } from "./stepperClasses.mjs";
 import StepConnector from "../StepConnector/index.mjs";
-import StepperContext from "./StepperContext.mjs";
+import { StepperContextProvider } from "./StepperContext.mjs";
+import StepButton from "../StepButton/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -23,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getStepperUtilityClass, classes);
 };
-const StepperRoot = styled('div', {
+const StepperRoot = styled('ol', {
   name: 'MuiStepper',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -34,6 +37,9 @@ const StepperRoot = styled('div', {
   }
 })({
   display: 'flex',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
   variants: [{
     props: {
       orientation: 'horizontal'
@@ -60,6 +66,7 @@ const StepperRoot = styled('div', {
 });
 const defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
+  const isRtl = useRtl();
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiStepper'
@@ -69,7 +76,7 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     alternativeLabel = false,
     children,
     className,
-    component = 'div',
+    component = 'ol',
     connector = defaultConnector,
     nonLinear = false,
     orientation = 'horizontal',
@@ -84,27 +91,57 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const totalSteps = childrenArray.length;
+  const isTabList = childrenArray.some(child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return false;
+    }
+    if (child.type === StepButton) {
+      return true;
+    }
+    const grandChildren = child.props.children;
+    if (grandChildren) {
+      return React.Children.toArray(grandChildren).some(grandChild => /*#__PURE__*/React.isValidElement(grandChild) && grandChild.type === StepButton);
+    }
+    return false;
+  });
   const steps = childrenArray.map((step, index) => {
     return /*#__PURE__*/React.cloneElement(step, {
       index,
-      last: index + 1 === childrenArray.length,
+      last: index + 1 === totalSteps,
       ...step.props
     });
   });
+  const {
+    getContainerProps,
+    getItemProps
+  } = useRovingTabIndex({
+    orientation,
+    isRtl
+  });
+  const rovingTabIndexContainerProps = getContainerProps(ref);
   const contextValue = React.useMemo(() => ({
     activeStep,
     alternativeLabel,
     connector,
     nonLinear,
-    orientation
-  }), [activeStep, alternativeLabel, connector, nonLinear, orientation]);
-  return /*#__PURE__*/_jsx(StepperContext.Provider, {
+    orientation,
+    totalSteps,
+    getRovingTabIndexProps: getItemProps,
+    isTabList
+  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, getItemProps, isTabList]);
+  return /*#__PURE__*/_jsx(StepperContextProvider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(StepperRoot, {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
       ref: ref,
+      ...(isTabList && {
+        role: 'tablist',
+        'aria-orientation': orientation,
+        ...rovingTabIndexContainerProps
+      }),
       ...other,
       children: steps
     })

package/Stepper/StepperContext.d.mts

@@ -5,6 +5,12 @@ export interface StepperContextType {
   connector: React.ReactNode;
   nonLinear: boolean;
   orientation: 'horizontal' | 'vertical';
+  totalSteps: number;
+  getRovingTabIndexProps: (index: number, ref?: React.Ref<HTMLElement>) => {
+    ref: (element: HTMLElement | null) => void;
+    tabIndex: number;
+  };
+  isTabList: boolean;
 }
 /**
  * Provides information about the current step in Stepper.
@@ -15,4 +21,5 @@ declare const StepperContext: React.Context<{} | StepperContextType>;
  * has been defined in the component tree.
  */
 export declare function useStepperContext(): StepperContextType | {};
+export declare const StepperContextProvider: React.Provider<{} | StepperContextType>;
 export default StepperContext;

package/Stepper/StepperContext.d.ts

@@ -5,6 +5,12 @@ export interface StepperContextType {
   connector: React.ReactNode;
   nonLinear: boolean;
   orientation: 'horizontal' | 'vertical';
+  totalSteps: number;
+  getRovingTabIndexProps: (index: number, ref?: React.Ref<HTMLElement>) => {
+    ref: (element: HTMLElement | null) => void;
+    tabIndex: number;
+  };
+  isTabList: boolean;
 }
 /**
  * Provides information about the current step in Stepper.
@@ -15,4 +21,5 @@ declare const StepperContext: React.Context<{} | StepperContextType>;
  * has been defined in the component tree.
  */
 export declare function useStepperContext(): StepperContextType | {};
+export declare const StepperContextProvider: React.Provider<{} | StepperContextType>;
 export default StepperContext;

package/Stepper/StepperContext.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StepperContextProvider = void 0;
 exports.useStepperContext = useStepperContext;
 var React = _interopRequireWildcard(require("react"));
 /**
@@ -23,4 +23,5 @@ if (process.env.NODE_ENV !== 'production') {
 function useStepperContext() {
   return React.useContext(StepperContext);
 }
+const StepperContextProvider = exports.StepperContextProvider = StepperContext.Provider;
 var _default = exports.default = StepperContext;

package/Stepper/StepperContext.mjs

@@ -16,4 +16,5 @@ if (process.env.NODE_ENV !== 'production') {
 export function useStepperContext() {
   return React.useContext(StepperContext);
 }
+export const StepperContextProvider = StepperContext.Provider;
 export default StepperContext;

package/Stepper/index.d.mts

@@ -2,5 +2,4 @@ export { default } from "./Stepper.mjs";
 export * from "./Stepper.mjs";
 export { default as stepperClasses } from "./stepperClasses.mjs";
 export * from "./stepperClasses.mjs";
-export { default as StepperContext } from "./StepperContext.mjs";
 export * from "./StepperContext.mjs";

package/Stepper/index.d.ts

@@ -2,5 +2,4 @@ export { default } from "./Stepper.js";
 export * from "./Stepper.js";
 export { default as stepperClasses } from "./stepperClasses.js";
 export * from "./stepperClasses.js";
-export { default as StepperContext } from "./StepperContext.js";
 export * from "./StepperContext.js";

package/Tab/Tab.js

@@ -257,7 +257,6 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     onClick: handleClick,
     onFocus: handleFocus,
     ownerState: ownerState,
-    tabIndex: selected ? 0 : -1,
     ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [icon, label]

package/Tab/Tab.mjs

@@ -250,7 +250,6 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     onClick: handleClick,
     onFocus: handleFocus,
     ownerState: ownerState,
-    tabIndex: selected ? 0 : -1,
     ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/_jsxs(React.Fragment, {
       children: [icon, label]

package/Tabs/Tabs.js

@@ -24,53 +24,11 @@ var _ScrollbarSize = _interopRequireDefault(require("./ScrollbarSize"));
 var _TabScrollButton = _interopRequireDefault(require("../TabScrollButton"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
 var _tabsClasses = _interopRequireWildcard(require("./tabsClasses"));
-var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
-var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 var _isLayoutSupported = _interopRequireDefault(require("../utils/isLayoutSupported"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const nextItem = (list, item) => {
-  if (list === item) {
-    return list.firstChild;
-  }
-  if (item && item.nextElementSibling) {
-    return item.nextElementSibling;
-  }
-  return list.firstChild;
-};
-const previousItem = (list, item) => {
-  if (list === item) {
-    return list.lastChild;
-  }
-  if (item && item.previousElementSibling) {
-    return item.previousElementSibling;
-  }
-  return list.lastChild;
-};
-const moveFocus = (list, currentFocus, traversalFunction) => {
-  let wrappedOnce = false;
-  let nextFocus = traversalFunction(list, currentFocus);
-  while (nextFocus) {
-    // Prevent infinite loop.
-    if (nextFocus === list.firstChild) {
-      if (wrappedOnce) {
-        return;
-      }
-      wrappedOnce = true;
-    }
-
-    // Same logic as useAutocomplete.js
-    const nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
-    if (!nextFocus.hasAttribute('tabindex') || nextFocusDisabled) {
-      // Move to the next element.
-      nextFocus = traversalFunction(list, nextFocus);
-    } else {
-      nextFocus.focus();
-      return;
-    }
-  }
-};
 const useUtilityClasses = ownerState => {
   const {
     vertical,
@@ -673,20 +631,37 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const indicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(IndicatorSlot, {
     ...indicatorSlotProps
   });
-  let childIndex = 0;
-  const children = React.Children.map(childrenProp, child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return null;
-    }
+  const validChildren = React.Children.toArray(childrenProp).filter(React.isValidElement).map((child, index) => {
+    const childValue = child.props.value === undefined ? index : child.props.value;
     if (process.env.NODE_ENV !== 'production') {
       if ((0, _reactIs.isFragment)(child)) {
         console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
       }
     }
-    const childValue = child.props.value === undefined ? childIndex : child.props.value;
-    valueToIndex.set(childValue, childIndex);
+    valueToIndex.set(childValue, index);
+    return {
+      child,
+      index,
+      childValue
+    };
+  });
+  const focusableIndex = valueToIndex.get(value);
+  const {
+    getContainerProps,
+    getItemProps
+  } = (0, _utils.useRovingTabIndex)({
+    focusableIndex,
+    orientation,
+    isRtl
+  });
+  const rovingTabIndexContainerProps = getContainerProps();
+  const children = validChildren.map(({
+    child,
+    index,
+    childValue
+  }) => {
     const selected = childValue === value;
-    childIndex += 1;
+    const rovingTabIndexItemProps = getItemProps(index, child.ref);
     return /*#__PURE__*/React.cloneElement(child, {
       fullWidth: variant === 'fullWidth',
       indicator: selected && !mounted && indicator,
@@ -695,53 +670,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onChange,
       textColor,
       value: childValue,
-      ...(childIndex === 1 && value === false && !child.props.tabIndex ? {
-        tabIndex: 0
-      } : {})
+      ref: rovingTabIndexItemProps.ref,
+      tabIndex: child.props.tabIndex ?? rovingTabIndexItemProps.tabIndex
     });
   });
-  const handleKeyDown = event => {
-    // Check if a modifier key (Alt, Shift, Ctrl, Meta) is pressed
-    if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
-      return;
-    }
-    const list = tabListRef.current;
-    const currentFocus = (0, _getActiveElement.default)((0, _ownerDocument.default)(list));
-    // Keyboard navigation assumes that [role="tab"] are siblings
-    // though we might warn in the future about nested, interactive elements
-    // as a a11y violation
-    const role = currentFocus?.getAttribute('role');
-    if (role !== 'tab') {
-      return;
-    }
-    let previousItemKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
-    let nextItemKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
-    if (orientation === 'horizontal' && isRtl) {
-      // swap previousItemKey with nextItemKey
-      previousItemKey = 'ArrowRight';
-      nextItemKey = 'ArrowLeft';
-    }
-    switch (event.key) {
-      case previousItemKey:
-        event.preventDefault();
-        moveFocus(list, currentFocus, previousItem);
-        break;
-      case nextItemKey:
-        event.preventDefault();
-        moveFocus(list, currentFocus, nextItem);
-        break;
-      case 'Home':
-        event.preventDefault();
-        moveFocus(list, null, nextItem);
-        break;
-      case 'End':
-        event.preventDefault();
-        moveFocus(list, null, previousItem);
-        break;
-      default:
-        break;
-    }
-  };
   const conditionalElements = getConditionalElements();
   const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
     ref,
@@ -767,8 +699,21 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       }
     }
   });
+  const mergedRef = (0, _utils.useForkRef)(rovingTabIndexContainerProps.ref, tabListRef);
+  const handleKeyDown = event => {
+    const list = tabListRef.current;
+    const currentFocus = (0, _utils.getActiveElement)((0, _utils.ownerDocument)(list));
+    // Keyboard navigation assumes that [role="tab"] are siblings
+    // though we might warn in the future about nested, interactive elements
+    // as a a11y violation
+    const role = currentFocus?.getAttribute('role');
+    if (role !== 'tab') {
+      return;
+    }
+    rovingTabIndexContainerProps.onKeyDown(event);
+  };
   const [ListSlot, listSlotProps] = (0, _useSlot.default)('list', {
-    ref: tabListRef,
+    ref: mergedRef,
     className: (0, _clsx.default)(classes.list, classes.flexContainer),
     elementType: List,
     externalForwardedProps,
@@ -778,6 +723,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onKeyDown: event => {
         handleKeyDown(event);
         handlers.onKeyDown?.(event);
+      },
+      onFocus: event => {
+        rovingTabIndexContainerProps.onFocus(event);
+        handlers.onFocus?.(event);
       }
     })
   });