fix(notifications): fix pointer events for inline low contrast, update inverse link colors

[jendowns]

Closes #4804

This PR fixes the pointer events issue identified in #4804 and seen on the gatsby-theme-carbon site by adding pointer-events: none to the pseudo-selector :before styles causing the problem.

I also updated the storybook to add example links to both Notification components' subtitle prop, so that links can easily be checked in the future.

Also in the process of doing this, I noticed that links passed into title or subtitle props aren't styled correctly with the $inverse-link token, so I went ahead and added styles for that. I'm just not sure what hover/focus color you want for those links? Just let me know & I can update it 👍

Changelog

New

• use $inverse-link color tokens for links inside InlineNotification and ToastNotification

Changed

• for low contrast InlineNotification, add pointer-events:none to the pseudo :before that covers the component
• add link example to both notification components in storybook

Testing / Reviewing

Make sure to select the Low Contrast knob in storybook. I definitely suggest comparing the deploy with InlineNotification usage on the gatsby-theme-carbon site 👍

Also after you toggle on Low Contrast knob in this PR's storybook deploy, you can inspect the low-contrast :before psuedo selector & comment out the pointer-events: none style, then see if you can click on the link inside the InlineNotification (you shouldn't be able to)

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit 009ae2e

https://deploy-preview-4805--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 009ae2e

https://deploy-preview-4805--carbon-elements.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 75f3b92

https://deploy-preview-4805--carbon-components-react.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 009ae2e

https://deploy-preview-4805--carbon-components-react.netlify.com

[joshblack]

One thing that @dakahn pointed out during our PR review was that the links seemingly don't hit color contrast, did you notice this too @jendowns?

[jendowns]

Thanks for your notes on the colors @abbeyhrt & @joshblack! I updated the inverse-link color rules I added to only apply to the non-low-contrast version of the components.

I also went ahead and added some hover and focus styles for links inside notifications... I realize it would be ideal if people passed in the Link component in this situations, but I think it's also super common for someone to just pass in an plain anchor. Let me know what you think!

[abbeyhrt]

This looks good to me! Thank you Jen!!

[aledavila]

lgtm

[aagonzales]

Ok I think this looks good. No color change with just the added underline on hover is good.