[Bug]: ComposedModal autofocus ActionableNotification action button on open

[ferdelamad]

Package

@carbon/react

Browser

Chrome

Package version

1.55.0

React version

18.2.0

Description

When an ActionableNotification is present on the page when opening a Modal this will cause the side-effect of auto-focusing on the action button or the exit button from the ActionableNotification causing an undesired scroll to the page.

If you exit the modal by clicking outside, it will scroll back up and autofocus the button that triggered it to be opened.

If you exit the modal by clicking the "X" button, it will not scroll to the original position and will keep the focus on the action button or the exit button, and if you try to click the button that triggers the modal it will just scroll to the ActionableNotification since the focus is still on that element.

This can be fixed by adding the hasFocus prop set to false to the ActionableNotification, however, this should not be the default behavior.
I'm still not sure what is causing this side-effect, therefor I still have concerns that this may be happening to other components.

Demo:

Reproduction/example

https://codesandbox.io/p/devbox/carbon-modal-actionable-notification-s8z4gz?file=%2Fsrc%2FExample%2FExample.jsx

Steps to reproduce

Reproduce the scrolling/autofocus behavior

• Click on the "Launch composed modal" button

To reproduce the issue of the focus remaining in the actionable notification:

• Click on the "Launch composed modal" button
• Exit the modal by clicking the "X" button

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

@ferdelamad Since ActionableNotification takes focus on render, if the modal opening triggers a re-render, it could cause this odd behavior.

carbon/packages/react/src/components/Notification/Notification.tsx

Lines 960 to 967 in 0d03a8e

	useIsomorphicEffect(() => {
	if (hasFocus) {
	const button = document.querySelector(
	'button.cds--actionable-notification__action-button'
	) as HTMLButtonElement;
	button?.focus();
	}
	});

It might be that the functionality of hasFocus could be improved to be more compatible with the modal.

A few things worth investigating would include:

1. Does using launcherButtonRef fix this? feat(Modal): add launcherButtonRef prop to handle focus on close #14355
2. Why is there a behavior difference between closing the modal via the X vs clicking outside the modal
3. Is it linked with the existing focus wrap behavior - does it still happen with enable-experimental-focus-wrap-without-sentinels on