[Notification]: 'X' close button always has focused outline shown

[mrsideshowjack]

What package(s) are you using?

• carbon-components
• carbon-components-react
• carbon-components-vue

Detailed description

Describe in detail the issue you're having.

The 'x' close button is always showing the blue focused outline. When the notification is in low contrast mode, regardless of if the element is actually focused.

Is this issue related to a specific component?

Vue: CvToastNotificaiton & CvInlineNotification
React: ToastNotification & InlineNotification

What did you expect to happen? What happened instead? What would you like to
see changed?

Expected the outline to only show when the element is focused

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

Lastest v10.11.2 (sandbox)

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Steps to reproduce the issue

1. set notification to low-contrast

Please create a reduced test case in CodeSandbox

Issue present:

• React:
  https://codesandbox.io/s/unruffled-breeze-8shf4?file=/index.js

• Vue:
  https://codesandbox.io/s/carbonvue-notification-btn-qzv6s

Issue not present:

• Angular (not present)
  sandbox - https://angular.carbondesignsystem.com/?path=/story/components-notification--toast

• Vanilla (not present)
  https://the-carbon-components.netlify.app/component/notification--inline-low-contrast.html

Additional information

• related, but resolved by [Notification] Low contrast style bugs #4282