IconButton: Hide tooltip when truly disabled

packages/ui/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `IconButton`: Hide tooltip when the button is truly disabled ([#75754](https://github.com/WordPress/gutenberg/pull/75754)).
+
 ### Internal
 
 -   Update `@base-ui/react` from 1.0.0 to 1.2.0 ([#75698](https://github.com/WordPress/gutenberg/pull/75698)).

packages/ui/src/icon-button/icon-button.tsx

@@ -17,6 +17,8 @@ export const IconButton = forwardRef< HTMLButtonElement, IconButtonProps >(
 			className,
 			// Prevent accidental forwarding of `children`
 			children: _children,
+			disabled,
+			focusableWhenDisabled,
 			icon,
 			size,
 			shortcut,
@@ -31,12 +33,15 @@ export const IconButton = forwardRef< HTMLButtonElement, IconButtonProps >(
 				<Tooltip.Root>
 					<Tooltip.Trigger
 						ref={ ref }
+						disabled={ disabled && ! focusableWhenDisabled }
 						render={
 							<Button
 								{ ...restProps }
 								size={ size }
 								aria-label={ label }
 								aria-keyshortcuts={ shortcut?.ariaKeyShortcut }
+								disabled={ disabled }
+								focusableWhenDisabled={ focusableWhenDisabled }
 							/>
 						}
 						className={ classes }

packages/ui/src/icon-button/test/index.test.tsx

@@ -33,6 +33,39 @@ describe( 'IconButton', () => {
 		expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
 	} );
 
+	describe( 'tooltip with disabled state', () => {
+		it( 'does not show tooltip when truly disabled', async () => {
+			const user = userEvent.setup();
+
+			render( <IconButton label="Save" icon={ <svg /> } disabled /> );
+
+			const button = screen.getByRole( 'button', { name: 'Save' } );
+			await user.hover( button );
+
+			expect( screen.queryByText( 'Save' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'shows tooltip when focusably disabled', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<IconButton
+					label="Save"
+					icon={ <svg /> }
+					disabled
+					focusableWhenDisabled
+				/>
+			);
+
+			const button = screen.getByRole( 'button', { name: 'Save' } );
+			await user.hover( button );
+
+			await waitFor( () => {
+				expect( screen.getByText( 'Save' ) ).toBeVisible();
+			} );
+		} );
+	} );
+
 	describe( 'shortcut', () => {
 		it( 'sets aria-keyshortcuts attribute on the button', () => {
 			const { rerender } = render(