[Bug]: Assorted bugs on Notifications

[shixiedesign]

Package

@carbon/react

Browser

Chrome

Package version

1.8

React version

No response

Description

1. When kind = warning-alt and lowContrast = true, the exclamation mark inside warning icon is not accessible. This applies to all variants of notification (toast, inline) Current

Expecting the exclamation mark to be filled with gray100 or black like in warning:

2. Keyboard focus doesn't work for close button on all variants of the Notification. Expecting a standard focus outline on the close button

3. A line break in Inline notification between title and description is not expected:

When title text is long and wraps to 2 or more lines, the description drops to second line. Shouldn't the description continue after title on the same line?

4. Curious if there is a reason that "Actionable notification" is added as a variant? From what I can tell, "Actionable" is not a variant like Toast and Inline, which are different in form. "Actionable" is more like an attribute that can apply to both Toast and Inline forms. I think it would make more sense to remove "actionable" from Variants and represent it as an attribute/option or knob in storybook.

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-notifications-actionable--playground&args=kind:warning-alt;lowContrast:true

Steps to reproduce

N/A

Code of Conduct

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

[abbeyhrt]

Hey @shixiedesign, thanks for detailing this!

1. The exclamation point should be black, we'll get that addressed!
2. That is intended and comes from a collaboration with IBMa. The idea here is that the close button is an affordance for sighted users because keyboard users don't need to dismiss the notification, they would just navigate away from it. It is breaking with the pattern of "all interactive items should be accessible" but as far as I'm aware, it's intended.
3. As far as I can tell, there is no line break between the title and subtitle? I can't tell if your screenshot is supposed to be the as is or the intended.
4. Design-wise, yes Actionable is visually just a variant of toast or inline but code-wise they are completely different components with different props and functionality that needed to be specifically configurable for Actionable and not the other variants. Dev-wise, it's not a great experience to have props that are dependent on other props being true and isn't something we wanted to do in v11. That is why we chose to make it a separate component.