[Menu][Divider] Do not allow focus on Divider when inside Menu list (#…

…38102) Co-authored-by: ZeeshanTamboli <[email protected]>
mui · Jul 28, 2023 · f502467 · f502467
1 parent 55fb595
commit f502467
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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('<MenuList />', () => {
 
       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(
+        <MenuList>
+          <MenuItem disabled>one</MenuItem>
+          <Divider />
+          <MenuItem disabled>two</MenuItem>
+        </MenuList>,
+      );
+
+      expect(getByRole('separator')).not.to.have.attribute('tabIndex');
+    });
   });
 
   describe('actions: adjustStyleForScrollbar', () => {