[Bug]: Click on Link button in ActionableNotification is moving the cursor focus to the Close button.

[ashapadmashetti]

Package

@carbon/react

Browser

Chrome

Package version

v1.47.0

React version

17.0.2

Description

When using ActionableNotification, the focus always moves to Close Button when clicked on the link. It doesn't allow to click on any Tabs or other buttons. Only by closing the notification, I am able to switch tabs.

@

Reproduction/example

https://codesandbox.io/p/sandbox/tex-yqr2z9?file=%2Fsrc%2Findex.js%3A17%2C53

Steps to reproduce

Use ActionableNotification with Action button. Click on Action button, click on the textbox, the focus moves to the close button. And only by clicking on the close button, you will be able to get the focus into the textbox.

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]

Hey there, thanks for opening this. We've got a PR up to resolve this, #15532.

For cases where interactive elements/actions are needed, but user interaction with the actions is not required, we're adding a new experimental StaticNotification. It's essentially just a styled div with no role or other special accessibility-related treatment.

You'll need to be mindful of the experience of screenreader users when using this component. It will not be read immediately or interrupt the user. If the StaticNotification is rendered due to a user interaction (like submitting a form), I would recommend placing focus on the action button in StaticNotification when it is rendered. This way screenreader users will immediately be informed of the error and the action button to assist with resolving the error. Without placing focus in the StaticNotification, a screenreader user might have a difficult time understanding what went wrong, especially if the notification is rendered further up/down in the DOM relative to their current focus position.

[tay1orjones]

Duplicate of #15319