From 811767b6f08fa0faf015e4a277d19160bcf55533 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 14 Sep 2023 15:25:29 -0400
Subject: [PATCH] fix(Notification): label notification with subtitle if title
 not present (#14609)

---
 .../react/src/components/Notification/Notification.tsx     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Notification/Notification.tsx b/packages/react/src/components/Notification/Notification.tsx
index 0444d9bcf0ab..1755614c2f90 100644
--- a/packages/react/src/components/Notification/Notification.tsx
+++ b/packages/react/src/components/Notification/Notification.tsx
@@ -938,6 +938,7 @@ export function ActionableNotification({
   const [isOpen, setIsOpen] = useState(true);
   const prefix = usePrefix();
   const id = useId('actionable-notification');
+  const subtitleId = useId('actionable-notification-subtitle');
   const containerClassName = cx(className, {
     [`${prefix}--actionable-notification`]: true,
     [`${prefix}--actionable-notification--toast`]: !inline,
@@ -975,7 +976,7 @@ export function ActionableNotification({
       ref={ref}
       role={role}
       className={containerClassName}
-      aria-labelledby={title ? id : undefined}>
+      aria-labelledby={title ? id : subtitleId}>
       <div className={`${prefix}--actionable-notification__details`}>
         <NotificationIcon
           notificationType={inline ? 'inline' : 'toast'}
@@ -992,7 +993,9 @@ export function ActionableNotification({
               </div>
             )}
             {subtitle && (
-              <div className={`${prefix}--actionable-notification__subtitle`}>
+              <div
+                className={`${prefix}--actionable-notification__subtitle`}
+                id={subtitleId}>
                 {subtitle}
               </div>
             )}