diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js
index 68402587ddd813..fdf26ee6f8e8a2 100644
--- a/packages/mui-material/src/Divider/Divider.js
+++ b/packages/mui-material/src/Divider/Divider.js
@@ -215,6 +215,12 @@ const Divider = React.forwardRef(function Divider(inProps, ref) {
);
});
+/**
+ * The following flag is used to ensure that this component isn't tabbable i.e.
+ * does not get highlight/focus inside of MUI List.
+ */
+Divider.muiSkipListHighlight = true;
+
Divider.propTypes /* remove-proptypes */ = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
diff --git a/packages/mui-material/src/MenuList/MenuList.js b/packages/mui-material/src/MenuList/MenuList.js
index cfe7d51d0b8b48..743abd26bd7aca 100644
--- a/packages/mui-material/src/MenuList/MenuList.js
+++ b/packages/mui-material/src/MenuList/MenuList.js
@@ -259,6 +259,7 @@ const MenuList = React.forwardRef(function MenuList(props, ref) {
if (autoFocusItem) {
newChildProps.autoFocus = true;
}
+
if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
newChildProps.tabIndex = 0;
}
diff --git a/packages/mui-material/src/MenuList/MenuList.test.js b/packages/mui-material/src/MenuList/MenuList.test.js
index 037c82baad3663..c59f6678e1af80 100644
--- a/packages/mui-material/src/MenuList/MenuList.test.js
+++ b/packages/mui-material/src/MenuList/MenuList.test.js
@@ -2,7 +2,9 @@ import * as React from 'react';
import { expect } from 'chai';
import { stub } from 'sinon';
import { describeConformance, createRenderer } from 'test/utils';
+import Divider from '@mui/material/Divider';
import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
import List from '@mui/material/List';
import getScrollbarSize from '../utils/getScrollbarSize';
@@ -44,6 +46,18 @@ describe('', () => {
expect(getAllByRole('menuitem')).to.have.length(2);
});
+
+ it('should not add tabIndex to presentation elements like Divider when all Menu Items are disabled', () => {
+ const { getByRole } = render(
+
+
+
+
+ ,
+ );
+
+ expect(getByRole('separator')).not.to.have.attribute('tabIndex');
+ });
});
describe('actions: adjustStyleForScrollbar', () => {