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( + + one + + two + , + ); + + expect(getByRole('separator')).not.to.have.attribute('tabIndex'); + }); }); describe('actions: adjustStyleForScrollbar', () => {