From b438ffdc63ff81b857c1ca73e6b8a31ebc00175a Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Mon, 19 Feb 2024 06:01:40 -0600
Subject: [PATCH] docs(notification): clean up static notification stories
 (#15767)

* docs(notification): clean up static notification stories

* docs(notification): improve static notification storybook mdx docs

* Update packages/react/src/components/Notification/Notification.mdx
---
 .../components/Notification/Notification.mdx  | 22 +++++++++++++------
 .../stories/StaticNotification.stories.js     | 22 +++++++++----------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/packages/react/src/components/Notification/Notification.mdx b/packages/react/src/components/Notification/Notification.mdx
index ac3251e389d4..8535328d8871 100644
--- a/packages/react/src/components/Notification/Notification.mdx
+++ b/packages/react/src/components/Notification/Notification.mdx
@@ -40,13 +40,21 @@ don't grab focus. Use them to provide the user with an alert, status, or log.
 ### unstable\_\_StaticNotification
 
 `unstable__StaticNotification` is non-modal and should only be used inline with
-content on the initial render of the page or modal. This should not be used for
-real-time notifications or notifications responding to user input (unless the
-page is completely refreshing and bumping the users focus back to the first
-element in the dom/tab order). This is the most passive notification component
-and is essentially just a styled div. If you place actions or interactive
-elements within this component, place an `aria-describedby` on the interactive
-element with a value that matches the `titleId` prop.
+content on the initial render of the page or modal because it will not be
+announced to screenreader users like the other notification components.
+
+As such, this should not be used for real-time notifications or notifications
+responding to user input (unless the page is completely refreshing and bumping
+the users focus back to the first element in the dom/tab order). If a
+StaticNotification is rendered after the initial render, screenreader users'
+focus may have already passed this portion of the DOM and they will not know
+that the notification has been rendered until they circle back to the beginning
+of the page.
+
+This is the most passive notification component and is essentially just a styled
+div. If you place actions or interactive elements within this component, place
+an `aria-describedby` on the interactive element with a value that matches the
+`titleId` prop.
 
 ## Component API
 
diff --git a/packages/react/src/components/Notification/stories/StaticNotification.stories.js b/packages/react/src/components/Notification/stories/StaticNotification.stories.js
index dba4849d109b..13ad6b18603c 100644
--- a/packages/react/src/components/Notification/stories/StaticNotification.stories.js
+++ b/packages/react/src/components/Notification/stories/StaticNotification.stories.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { StaticNotification } from '../../Notification';
-import { Button } from '../../Button';
+import { Link } from '../../Link';
 import mdx from '../Notification.mdx';
 
 // eslint-disable-next-line storybook/csf-component
@@ -33,20 +33,18 @@ export const Default = () => (
   />
 );
 
-export const WithInteractiveElementsThatPopTheWarning = () => (
-  <StaticNotification
-    title="Notification title"
-    subtitle="Subtitle text goes here">
-    <Button>Test</Button>
-  </StaticNotification>
-);
-
-export const WithInteractiveElementsThatDONOTPopTheWarning = () => (
+export const WithInteractiveElements = () => (
   <StaticNotification
     title="Notification title"
     titleId="my fancy id 123"
-    subtitle="Subtitle text goes here">
-    <Button aria-describedby="my fancy id 123">Test</Button>
+    kind="info"
+    lowContrast>
+    <div className="cds--inline-notification__subtitle">
+      Additional text can describe the notification, or a link to{' '}
+      <Link inline href="#" aria-describedby="my fancy id 123">
+        learn more
+      </Link>
+    </div>
   </StaticNotification>
 );