-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: Keyboard Navigation Stuck Within Actionable Notification Component #15319
Comments
Hello! I love to work on this issue! May I? |
Yes please! Thank you |
Hi @ellamathewsonibm and everyone! |
@kuri-sun the behavior seems unintentionally aggressive. When you render an actionable notification without a close button and turn |
from: https://carbondesignsystem.com/components/notification/usage/#actionable-notifications
from the PR: #14877
I think when rendered with the default |
Hey @ellamathewsonibm and @lluisrojass, thanks for sharing your notes here. Reaching out to Michael Gower about this as well from Carbon's accessibility team |
Thank you for the explanation @lluisrojass! |
My understanding is that @guidari are you able to provide an opinion? |
Hello guys. I'll bring that issue to the team so we can all discuss together and I'll came back to you guys as soon as possible. |
Thanks for your opinion @guidari! |
Hey! @lluisrojass I talked with the team and we are technically already allowing to go off-spec by providing the It can be implemented ways for the user to close the Thank you! |
Thank you for submitting your proposal. Unfortunately, it doesn't align with our roadmap or philosophy at this time. We value your contribution and encourage you to keep engaging with the community. |
@guidari @tay1orjones Can we reopen this issue? I ran into it today and would like to have the history here instead of opening a new issue. |
Hey @finken2 I checked the component usage in the carbon website and you can use the InlineNotification variant to insert a "Learn More" link, like is being done in the website. |
@guidari In v11, we aren't supposed to have actions in the InlineNotification variant. We can discuss on Slack, but we should not have ActionableNotification as a focus trap that renders the rest of the page unusable. |
@finken2 ActionableNotification should be used when the user must take action. I wouldn't use it for the use case you outline above because the link appears to be optional. InlineNotification accepts We do this on our website for similar use cases: |
@tay1orjones I'll ping you to discuss, but we need to do some clarification or code changes somewhere. We've changed a ton of our InlineNotifications to be Actionable based on the v11 guidance and i'm sure others have done the same. Regardless of that, the current implementation i showed in my screenshot should not act like it does. You can't even click in the other text fields on the page; it's not just a tabbing issue. Without some kind of glasspane/modal indication, there's no way the user would expect that behavior. |
Package
@carbon/react
Browser
Chrome
Package version
v1.42.1
React version
v18.2.0
Description
When using keyboard navigation on Actionable notification, tab focus cannot escape the alert and instead cycles through the action button and close button indefinitely. When the notification only has either the action or close buttons, the tab focus does not move from the button.
Screen.Recording.2023-12-04.at.4.36.58.PM.mov
Reproduction/example
https://react.carbondesignsystem.com/?path=/story/components-notifications-actionable--playground&args=kind:info;lowContrast:!true;statusIconDescription:in;inline:!true
Steps to reproduce
Go to Notifications -> Actionable -> Playground. Press
Tab
on keyboard to navigate a couple times. See focus remains switching between the x close icon button and the action button, never leaving the component.Suggested Severity
Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.
Application/PAL
w3 Carbon
Code of Conduct
The text was updated successfully, but these errors were encountered: