You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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.
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
The text was updated successfully, but these errors were encountered: