Address further review comments

Author: robkerrybjss

src/components/content-presentation/notification-banner/NotificationBanner.tsx

@@ -47,6 +47,7 @@ const NotificationBannerComponent = forwardRef<HTMLDivElement, NotificationBanne
         className: 'nhsuk-notification-banner__title',
       }),
     );
+    const titleElementId = titleElement?.props.id || titleId || 'nhsuk-notification-banner-title';
 
     const contentItems = items.filter((child) => child !== titleElement);
 
@@ -61,7 +62,7 @@ const NotificationBannerComponent = forwardRef<HTMLDivElement, NotificationBanne
           { 'nhsuk-notification-banner--success': success },
           className,
         )}
-        aria-labelledby={titleId || titleElement?.props.id || 'nhsuk-notification-banner-title'}
+        aria-labelledby={titleElementId}
         data-module="nhsuk-notification-banner"
         data-disable-auto-focus={disableAutoFocus}
         ref={moduleRef}
@@ -72,7 +73,7 @@ const NotificationBannerComponent = forwardRef<HTMLDivElement, NotificationBanne
           {titleElement ? (
             <>{titleElement}</>
           ) : (
-            <NotificationBannerTitle success={success} id={titleId}>
+            <NotificationBannerTitle success={success} id={titleElementId}>
               {title}
             </NotificationBannerTitle>
           )}

src/components/content-presentation/notification-banner/__tests__/NotificationBanner.test.tsx

@@ -387,4 +387,20 @@ describe('NotificationBanner', () => {
 
     expect(notificationBannerEl?.dataset?.disableAutoFocus).toBe('true');
   });
+
+  it('prioritises id of title element over provided title id', async () => {
+    const { modules } = await renderClient(
+      <NotificationBanner titleId={'wrong-id'}>
+        <NotificationBanner.Title id={'correct-id'}>Important information</NotificationBanner.Title>
+        <NotificationBanner.Heading>
+          The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.
+        </NotificationBanner.Heading>
+      </NotificationBanner>,
+      { className: 'nhsuk-notification-banner' },
+    );
+
+    const [notificationBannerEl] = modules;
+
+    expect(notificationBannerEl?.getAttribute('aria-labelledby')).toEqual('correct-id');
+  });
 });