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

package/MenuList/MenuList.js

@@ -10,6 +10,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useRovingTabIndex = _interopRequireDefault(require("../utils/useRovingTabIndex"));
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _List = _interopRequireDefault(require("../List"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
@@ -18,24 +19,6 @@ var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function nextItem(list, item, disableListWrap) {
-  if (list === item) {
-    return list.firstChild;
-  }
-  if (item && item.nextElementSibling) {
-    return item.nextElementSibling;
-  }
-  return disableListWrap ? null : list.firstChild;
-}
-function previousItem(list, item, disableListWrap) {
-  if (list === item) {
-    return disableListWrap ? list.firstChild : list.lastChild;
-  }
-  if (item && item.previousElementSibling) {
-    return item.previousElementSibling;
-  }
-  return disableListWrap ? null : list.lastChild;
-}
 function textCriteriaMatches(nextFocus, textCriteria) {
   if (textCriteria === undefined) {
     return true;
@@ -54,29 +37,20 @@ function textCriteriaMatches(nextFocus, textCriteria) {
   }
   return text.startsWith(textCriteria.keys.join(''));
 }
-function moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, traversalFunction, textCriteria) {
-  let wrappedOnce = false;
-  let nextFocus = traversalFunction(list, currentFocus, currentFocus ? disableListWrap : false);
-  while (nextFocus) {
-    // Prevent infinite loop.
-    if (nextFocus === list.firstChild) {
-      if (wrappedOnce) {
-        return false;
-      }
-      wrappedOnce = true;
-    }
-
-    // Same logic as useAutocomplete.js
-    const nextFocusDisabled = disabledItemsFocusable ? false : nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
-    if (!nextFocus.hasAttribute('tabindex') || !textCriteriaMatches(nextFocus, textCriteria) || nextFocusDisabled) {
-      // Move to the next element.
-      nextFocus = traversalFunction(list, nextFocus, disableListWrap);
-    } else {
-      nextFocus.focus();
-      return true;
-    }
+function shouldFocusWithTextCriteria(element, criteria, disabledItemsFocusable) {
+  if (!textCriteriaMatches(element, criteria)) {
+    return false;
+  }
+  return shouldFocus(element, disabledItemsFocusable);
+}
+function shouldFocus(element, disabledItemsFocusable) {
+  if (!element || !element.hasAttribute('tabindex')) {
+    return false;
+  }
+  if (disabledItemsFocusable) {
+    return true;
   }
-  return false;
+  return !element.disabled && element.getAttribute('aria-disabled') !== 'true';
 }
 
 /**
@@ -127,65 +101,6 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       return listRef.current;
     }
   }), []);
-  const handleKeyDown = event => {
-    const list = listRef.current;
-    const key = event.key;
-    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
-    if (isModifierKeyPressed) {
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
-      return;
-    }
-
-    /**
-     * @type {Element} - will always be defined since we are in a keydown handler
-     * attached to an element. A keydown event is either dispatched to the activeElement
-     * or document.body or document.documentElement. Only the first case will
-     * trigger this specific handler.
-     */
-    const currentFocus = (0, _getActiveElement.default)((0, _ownerDocument.default)(list));
-    if (key === 'ArrowDown') {
-      // Prevent scroll of the page
-      event.preventDefault();
-      moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, nextItem);
-    } else if (key === 'ArrowUp') {
-      event.preventDefault();
-      moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, previousItem);
-    } else if (key === 'Home') {
-      event.preventDefault();
-      moveFocus(list, null, disableListWrap, disabledItemsFocusable, nextItem);
-    } else if (key === 'End') {
-      event.preventDefault();
-      moveFocus(list, null, disableListWrap, disabledItemsFocusable, previousItem);
-    } else if (key.length === 1) {
-      const criteria = textCriteriaRef.current;
-      const lowerKey = key.toLowerCase();
-      const currTime = performance.now();
-      if (criteria.keys.length > 0) {
-        // Reset
-        if (currTime - criteria.lastTime > 500) {
-          criteria.keys = [];
-          criteria.repeating = true;
-          criteria.previousKeyMatched = true;
-        } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
-          criteria.repeating = false;
-        }
-      }
-      criteria.lastTime = currTime;
-      criteria.keys.push(lowerKey);
-      const keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
-      if (criteria.previousKeyMatched && (keepFocusOnCurrent || moveFocus(list, currentFocus, false, disabledItemsFocusable, nextItem, criteria))) {
-        event.preventDefault();
-      } else {
-        criteria.previousKeyMatched = false;
-      }
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  const handleRef = (0, _useForkRef.default)(listRef, ref);
 
   /**
    * the index of the item should receive focus
@@ -227,25 +142,80 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       }
     }
   });
+  const {
+    focusNext,
+    getContainerProps,
+    getItemProps
+  } = (0, _useRovingTabIndex.default)({
+    focusableIndex: activeItemIndex,
+    orientation: 'vertical',
+    shouldWrap: !disableListWrap,
+    shouldFocus: element => shouldFocus(element, disabledItemsFocusable)
+  });
+  const rovingTabIndexContainerProps = getContainerProps();
+  const handleRef = (0, _useForkRef.default)(listRef, rovingTabIndexContainerProps.ref, ref);
+  let focusableIndex = 0;
   const items = React.Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/React.isValidElement(child) || child.props.muiSkipListHighlight || child.type.muiSkipListHighlight) {
+      return child;
+    }
+    const rovingTabIndexItemProps = getItemProps(focusableIndex, child.ref);
+    const newChildProps = {
+      ref: rovingTabIndexItemProps.ref
+    };
+    if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
+      newChildProps.tabIndex = rovingTabIndexItemProps.tabIndex;
+    }
     if (index === activeItemIndex) {
-      const newChildProps = {};
       if (autoFocusItem) {
         newChildProps.autoFocus = true;
       }
-      if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
-        newChildProps.tabIndex = 0;
-      }
-      return /*#__PURE__*/React.cloneElement(child, newChildProps);
     }
-    return child;
+    focusableIndex += 1;
+    return /*#__PURE__*/React.cloneElement(child, newChildProps);
   });
+  const handleKeyDown = event => {
+    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
+    if (isModifierKeyPressed && onKeyDown) {
+      onKeyDown(event);
+      return;
+    }
+    rovingTabIndexContainerProps.onKeyDown(event);
+    if (event.key.length === 1) {
+      const criteria = textCriteriaRef.current;
+      const lowerKey = event.key.toLowerCase();
+      const currTime = performance.now();
+      if (criteria.keys.length > 0) {
+        // Reset
+        if (currTime - criteria.lastTime > 500) {
+          criteria.keys = [];
+          criteria.repeating = true;
+          criteria.previousKeyMatched = true;
+        } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
+          criteria.repeating = false;
+        }
+      }
+      criteria.lastTime = currTime;
+      criteria.keys.push(lowerKey);
+      const currentFocus = (0, _getActiveElement.default)((0, _ownerDocument.default)(listRef.current));
+      const keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
+      if (criteria.previousKeyMatched && (keepFocusOnCurrent || focusNext(element => shouldFocusWithTextCriteria(element, criteria, disabledItemsFocusable)) !== -1)) {
+        event.preventDefault();
+      } else {
+        criteria.previousKeyMatched = false;
+      }
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
     role: "menu",
     ref: handleRef,
     className: className,
     onKeyDown: handleKeyDown,
-    tabIndex: autoFocus ? 0 : -1,
+    onFocus: rovingTabIndexContainerProps.onFocus,
+    tabIndex: -1,
     ...other,
     children: items
   });

package/MenuList/MenuList.mjs

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
+import useRovingTabIndex from "../utils/useRovingTabIndex.mjs";
 import ownerDocument from "../utils/ownerDocument.mjs";
 import List from "../List/index.mjs";
 import getActiveElement from "../utils/getActiveElement.mjs";
@@ -11,24 +12,6 @@ import useForkRef from "../utils/useForkRef.mjs";
 import useEnhancedEffect from "../utils/useEnhancedEffect.mjs";
 import { ownerWindow } from "../utils/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-function nextItem(list, item, disableListWrap) {
-  if (list === item) {
-    return list.firstChild;
-  }
-  if (item && item.nextElementSibling) {
-    return item.nextElementSibling;
-  }
-  return disableListWrap ? null : list.firstChild;
-}
-function previousItem(list, item, disableListWrap) {
-  if (list === item) {
-    return disableListWrap ? list.firstChild : list.lastChild;
-  }
-  if (item && item.previousElementSibling) {
-    return item.previousElementSibling;
-  }
-  return disableListWrap ? null : list.lastChild;
-}
 function textCriteriaMatches(nextFocus, textCriteria) {
   if (textCriteria === undefined) {
     return true;
@@ -47,29 +30,20 @@ function textCriteriaMatches(nextFocus, textCriteria) {
   }
   return text.startsWith(textCriteria.keys.join(''));
 }
-function moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, traversalFunction, textCriteria) {
-  let wrappedOnce = false;
-  let nextFocus = traversalFunction(list, currentFocus, currentFocus ? disableListWrap : false);
-  while (nextFocus) {
-    // Prevent infinite loop.
-    if (nextFocus === list.firstChild) {
-      if (wrappedOnce) {
-        return false;
-      }
-      wrappedOnce = true;
-    }
-
-    // Same logic as useAutocomplete.js
-    const nextFocusDisabled = disabledItemsFocusable ? false : nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
-    if (!nextFocus.hasAttribute('tabindex') || !textCriteriaMatches(nextFocus, textCriteria) || nextFocusDisabled) {
-      // Move to the next element.
-      nextFocus = traversalFunction(list, nextFocus, disableListWrap);
-    } else {
-      nextFocus.focus();
-      return true;
-    }
+function shouldFocusWithTextCriteria(element, criteria, disabledItemsFocusable) {
+  if (!textCriteriaMatches(element, criteria)) {
+    return false;
+  }
+  return shouldFocus(element, disabledItemsFocusable);
+}
+function shouldFocus(element, disabledItemsFocusable) {
+  if (!element || !element.hasAttribute('tabindex')) {
+    return false;
+  }
+  if (disabledItemsFocusable) {
+    return true;
   }
-  return false;
+  return !element.disabled && element.getAttribute('aria-disabled') !== 'true';
 }
 
 /**
@@ -120,65 +94,6 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       return listRef.current;
     }
   }), []);
-  const handleKeyDown = event => {
-    const list = listRef.current;
-    const key = event.key;
-    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
-    if (isModifierKeyPressed) {
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
-      return;
-    }
-
-    /**
-     * @type {Element} - will always be defined since we are in a keydown handler
-     * attached to an element. A keydown event is either dispatched to the activeElement
-     * or document.body or document.documentElement. Only the first case will
-     * trigger this specific handler.
-     */
-    const currentFocus = getActiveElement(ownerDocument(list));
-    if (key === 'ArrowDown') {
-      // Prevent scroll of the page
-      event.preventDefault();
-      moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, nextItem);
-    } else if (key === 'ArrowUp') {
-      event.preventDefault();
-      moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, previousItem);
-    } else if (key === 'Home') {
-      event.preventDefault();
-      moveFocus(list, null, disableListWrap, disabledItemsFocusable, nextItem);
-    } else if (key === 'End') {
-      event.preventDefault();
-      moveFocus(list, null, disableListWrap, disabledItemsFocusable, previousItem);
-    } else if (key.length === 1) {
-      const criteria = textCriteriaRef.current;
-      const lowerKey = key.toLowerCase();
-      const currTime = performance.now();
-      if (criteria.keys.length > 0) {
-        // Reset
-        if (currTime - criteria.lastTime > 500) {
-          criteria.keys = [];
-          criteria.repeating = true;
-          criteria.previousKeyMatched = true;
-        } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
-          criteria.repeating = false;
-        }
-      }
-      criteria.lastTime = currTime;
-      criteria.keys.push(lowerKey);
-      const keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
-      if (criteria.previousKeyMatched && (keepFocusOnCurrent || moveFocus(list, currentFocus, false, disabledItemsFocusable, nextItem, criteria))) {
-        event.preventDefault();
-      } else {
-        criteria.previousKeyMatched = false;
-      }
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  const handleRef = useForkRef(listRef, ref);
 
   /**
    * the index of the item should receive focus
@@ -220,25 +135,80 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       }
     }
   });
+  const {
+    focusNext,
+    getContainerProps,
+    getItemProps
+  } = useRovingTabIndex({
+    focusableIndex: activeItemIndex,
+    orientation: 'vertical',
+    shouldWrap: !disableListWrap,
+    shouldFocus: element => shouldFocus(element, disabledItemsFocusable)
+  });
+  const rovingTabIndexContainerProps = getContainerProps();
+  const handleRef = useForkRef(listRef, rovingTabIndexContainerProps.ref, ref);
+  let focusableIndex = 0;
   const items = React.Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/React.isValidElement(child) || child.props.muiSkipListHighlight || child.type.muiSkipListHighlight) {
+      return child;
+    }
+    const rovingTabIndexItemProps = getItemProps(focusableIndex, child.ref);
+    const newChildProps = {
+      ref: rovingTabIndexItemProps.ref
+    };
+    if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
+      newChildProps.tabIndex = rovingTabIndexItemProps.tabIndex;
+    }
     if (index === activeItemIndex) {
-      const newChildProps = {};
       if (autoFocusItem) {
         newChildProps.autoFocus = true;
       }
-      if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
-        newChildProps.tabIndex = 0;
-      }
-      return /*#__PURE__*/React.cloneElement(child, newChildProps);
     }
-    return child;
+    focusableIndex += 1;
+    return /*#__PURE__*/React.cloneElement(child, newChildProps);
   });
+  const handleKeyDown = event => {
+    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
+    if (isModifierKeyPressed && onKeyDown) {
+      onKeyDown(event);
+      return;
+    }
+    rovingTabIndexContainerProps.onKeyDown(event);
+    if (event.key.length === 1) {
+      const criteria = textCriteriaRef.current;
+      const lowerKey = event.key.toLowerCase();
+      const currTime = performance.now();
+      if (criteria.keys.length > 0) {
+        // Reset
+        if (currTime - criteria.lastTime > 500) {
+          criteria.keys = [];
+          criteria.repeating = true;
+          criteria.previousKeyMatched = true;
+        } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
+          criteria.repeating = false;
+        }
+      }
+      criteria.lastTime = currTime;
+      criteria.keys.push(lowerKey);
+      const currentFocus = getActiveElement(ownerDocument(listRef.current));
+      const keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
+      if (criteria.previousKeyMatched && (keepFocusOnCurrent || focusNext(element => shouldFocusWithTextCriteria(element, criteria, disabledItemsFocusable)) !== -1)) {
+        event.preventDefault();
+      } else {
+        criteria.previousKeyMatched = false;
+      }
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
   return /*#__PURE__*/_jsx(List, {
     role: "menu",
     ref: handleRef,
     className: className,
     onKeyDown: handleKeyDown,
-    tabIndex: autoFocus ? 0 : -1,
+    onFocus: rovingTabIndexContainerProps.onFocus,
+    tabIndex: -1,
     ...other,
     children: items
   });

package/Paper/Paper.d.mts

@@ -45,6 +45,7 @@ export interface PaperTypeMap<AdditionalProps = {}, RootComponent extends React.
  * Demos:
  *
  * - [Card](https://next.mui.com/material-ui/react-card/)
+ * - [Menubar](https://next.mui.com/material-ui/react-menubar/)
  * - [Paper](https://next.mui.com/material-ui/react-paper/)
  *
  * API:

package/Paper/Paper.d.ts

@@ -45,6 +45,7 @@ export interface PaperTypeMap<AdditionalProps = {}, RootComponent extends React.
  * Demos:
  *
  * - [Card](https://next.mui.com/material-ui/react-card/)
+ * - [Menubar](https://next.mui.com/material-ui/react-menubar/)
  * - [Paper](https://next.mui.com/material-ui/react-paper/)
  *
  * API:

package/SpeedDialIcon/SpeedDialIcon.js

@@ -73,6 +73,10 @@ const SpeedDialIconRoot = (0, _zeroStyled.styled)('span', {
     style: {
       [`& .${_speedDialIconClasses.default.icon}`]: {
         transform: 'rotate(45deg)'
+      },
+      [`& .${_speedDialIconClasses.default.openIcon}`]: {
+        transform: 'rotate(0deg)',
+        opacity: 1
       }
     }
   }, {
@@ -84,16 +88,6 @@ const SpeedDialIconRoot = (0, _zeroStyled.styled)('span', {
         opacity: 0
       }
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.open,
-    style: {
-      [`& .${_speedDialIconClasses.default.openIcon}`]: {
-        transform: 'rotate(0deg)',
-        opacity: 1
-      }
-    }
   }]
 })));
 const SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inProps, ref) {

package/SpeedDialIcon/SpeedDialIcon.mjs

@@ -66,6 +66,10 @@ const SpeedDialIconRoot = styled('span', {
     style: {
       [`& .${speedDialIconClasses.icon}`]: {
         transform: 'rotate(45deg)'
+      },
+      [`& .${speedDialIconClasses.openIcon}`]: {
+        transform: 'rotate(0deg)',
+        opacity: 1
       }
     }
   }, {
@@ -77,16 +81,6 @@ const SpeedDialIconRoot = styled('span', {
         opacity: 0
       }
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.open,
-    style: {
-      [`& .${speedDialIconClasses.openIcon}`]: {
-        transform: 'rotate(0deg)',
-        opacity: 1
-      }
-    }
   }]
 })));
 const SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inProps, ref) {

package/Step/Step.js

@@ -12,7 +12,7 @@ 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 _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
+var _StepperContext = require("../Stepper/StepperContext");
 var _StepContext = _interopRequireDefault(require("./StepContext"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _stepClasses.getStepUtilityClass, classes);
 };
-const StepRoot = (0, _zeroStyled.styled)('div', {
+const StepRoot = (0, _zeroStyled.styled)('li', {
   name: 'MuiStep',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -67,7 +67,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     active: activeProp,
     children,
     className,
-    component = 'div',
+    component = 'li',
     completed: completedProp,
     disabled: disabledProp,
     expanded = false,
@@ -80,8 +80,9 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     connector,
     alternativeLabel,
     orientation,
-    nonLinear
-  } = React.useContext(_StepperContext.default);
+    nonLinear,
+    isTabList
+  } = (0, _StepperContext.useStepperContext)();
   let [active = false, completed = false, disabled = false] = [activeProp, completedProp, disabledProp];
   if (activeStep === index) {
     active = activeProp !== undefined ? activeProp : true;
@@ -115,6 +116,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     ownerState: ownerState,
+    role: isTabList ? 'presentation' : undefined,
     ...other,
     children: [connector && alternativeLabel && index !== 0 ? connector : null, children]
   });

package/Step/Step.mjs

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
-import StepperContext from "../Stepper/StepperContext.mjs";
+import { useStepperContext } from "../Stepper/StepperContext.mjs";
 import StepContext from "./StepContext.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
@@ -23,7 +23,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getStepUtilityClass, classes);
 };
-const StepRoot = styled('div', {
+const StepRoot = styled('li', {
   name: 'MuiStep',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -60,7 +60,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     active: activeProp,
     children,
     className,
-    component = 'div',
+    component = 'li',
     completed: completedProp,
     disabled: disabledProp,
     expanded = false,
@@ -73,8 +73,9 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     connector,
     alternativeLabel,
     orientation,
-    nonLinear
-  } = React.useContext(StepperContext);
+    nonLinear,
+    isTabList
+  } = useStepperContext();
   let [active = false, completed = false, disabled = false] = [activeProp, completedProp, disabledProp];
   if (activeStep === index) {
     active = activeProp !== undefined ? activeProp : true;
@@ -108,6 +109,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     className: clsx(classes.root, className),
     ref: ref,
     ownerState: ownerState,
+    role: isTabList ? 'presentation' : undefined,
     ...other,
     children: [connector && alternativeLabel && index !== 0 ? connector : null, children]
   });

package/StepButton/StepButton.js

@@ -16,7 +16,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _StepLabel = _interopRequireDefault(require("../StepLabel"));
 var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
-var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
+var _StepperContext = require("../Stepper/StepperContext");
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _stepButtonClasses = _interopRequireWildcard(require("./stepButtonClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -75,11 +75,14 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
   } = props;
   const {
     disabled,
-    active
+    active,
+    index
   } = React.useContext(_StepContext.default);
   const {
-    orientation
-  } = React.useContext(_StepperContext.default);
+    orientation,
+    totalSteps,
+    getRovingTabIndexProps
+  } = (0, _StepperContext.useStepperContext)();
   const ownerState = {
     ...props,
     orientation
@@ -93,6 +96,10 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
     ...childProps,
     children: children
   });
+  const rovingTabIndexItemProps = getRovingTabIndexProps?.(index, ref) ?? {
+    ref,
+    tabIndex: active ? 0 : -1
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StepButtonRoot, {
     focusRipple: true,
     disabled: disabled,
@@ -100,9 +107,12 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
       className: classes.touchRipple
     },
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
     ownerState: ownerState,
-    "aria-current": active ? 'step' : undefined,
+    "aria-selected": active,
+    "aria-posinset": index + 1,
+    "aria-setsize": totalSteps,
+    role: "tab",
+    ...rovingTabIndexItemProps,
     ...other,
     children: child
   });