fix(StaticNotification): set describedby on action button (#15858)

* fix(StaticNotification): set describedby on action button Signed-off-by: Edward Fink <finken@us.ibm.com> * fix(StaticNotification): additional story for button only Signed-off-by: Edward Fink <finken@us.ibm.com> --------- Signed-off-by: Edward Fink <finken@us.ibm.com> Co-authored-by: TJ Egan <tw15egan@gmail.com>
carbon-design-system · Mar 7, 2024 · c4b8152 · c4b8152
1 parent cd5ac20
commit c4b8152
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7242,7 +7242,7 @@ Map {
         "type": "string",
       },
       "subtitle": Object {
-        "type": "string",
+        "type": "node",
       },
       "title": Object {
         "type": "string",

diff --git a/packages/react/src/components/Notification/Notification.tsx b/packages/react/src/components/Notification/Notification.tsx
@@ -1226,7 +1226,7 @@ export interface StaticNotificationProps
   /**
    * Specify the subtitle
    */
-  subtitle?: string;
+  subtitle?: ReactNode;
 
   /**
    * Specify the title
@@ -1295,7 +1295,10 @@ export function StaticNotification({
       </div>
       <div className={`${prefix}--actionable-notification__button-wrapper`}>
         {actionButtonLabel && (
-          <NotificationActionButton onClick={onActionButtonClick} inline>
+          <NotificationActionButton
+            onClick={onActionButtonClick}
+            aria-describedby={titleId}
+            inline>
             {actionButtonLabel}
           </NotificationActionButton>
         )}
@@ -1350,7 +1353,7 @@ StaticNotification.propTypes = {
   /**
    * Specify the subtitle
    */
-  subtitle: PropTypes.string,
+  subtitle: PropTypes.node,
 
   /**
    * Specify the title

diff --git a/packages/react/src/components/Notification/stories/StaticNotification.stories.js b/packages/react/src/components/Notification/stories/StaticNotification.stories.js
@@ -48,7 +48,20 @@ export const WithInteractiveElements = () => (
   </StaticNotification>
 );
 
-export const WithActionButton = () => (
+export const WithActionButtonOnly = () => (
+  <StaticNotification
+    title="Notification title"
+    titleId="notif-1"
+    kind="info"
+    lowContrast
+    actionButtonLabel="Learn More">
+    <div className="cds--inline-notification__subtitle">
+      Here is some important info you might want to know.{' '}
+    </div>
+  </StaticNotification>
+);
+
+export const WithActionButtonAndLinks = () => (
   <StaticNotification
     title="Notification title"
     titleId="notif-1"