diff --git a/src/MenuItem.tsx b/src/MenuItem.tsx index 8fa4ebd0..fb524f76 100644 --- a/src/MenuItem.tsx +++ b/src/MenuItem.tsx @@ -221,7 +221,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref< {...activeProps} {...optionRoleProps} component="li" - aria-disabled={disabled} + aria-disabled={mergedDisabled} style={{ ...directionStyle, ...style, diff --git a/tests/Menu.spec.tsx b/tests/Menu.spec.tsx index 56eb5e06..ccae48ea 100644 --- a/tests/Menu.spec.tsx +++ b/tests/Menu.spec.tsx @@ -40,6 +40,28 @@ describe('Menu', () => { jest.useRealTimers(); }); + it('exposes inherited disabled state on menu items', () => { + const menu = (disabled: boolean) => ( + + Inherits disabled state + + Explicitly disabled + + + ); + const { getByRole, rerender } = render(menu(true)); + const inheritedItem = getByRole('menuitem', { name: 'Inherits disabled state' }); + + expect(inheritedItem).toHaveAttribute('aria-disabled', 'true'); + + rerender(menu(false)); + expect(inheritedItem).not.toHaveAttribute('aria-disabled', 'true'); + expect(getByRole('menuitem', { name: 'Explicitly disabled' })).toHaveAttribute( + 'aria-disabled', + 'true', + ); + }); + describe('should render', () => { function createMenu(props?, subKey?) { return (