From b10dc7ea6e71b422c8cf6484193b612f302c6c46 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Jul 2022 17:20:41 -0500
Subject: [PATCH] Notification: fix ariaLabel crash

---
 .../notifications/components/notification.tsx | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index 1215a138c9..268539dd24 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -14,7 +14,7 @@ import type { ScrollPosition } from 'soapbox/components/status';
 import type { NotificationType } from 'soapbox/normalizers/notification';
 import type { Account, Status, Notification as NotificationEntity } from 'soapbox/types/entities';
 
-const notificationForScreenReader = (intl: ReturnType<typeof useIntl>, message: string, timestamp: Date) => {
+const notificationForScreenReader = (intl: IntlShape, message: string, timestamp: Date) => {
   const output = [message];
 
   output.push(intl.formatDate(timestamp, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }));
@@ -281,25 +281,24 @@ const Notification: React.FC<INotificaton> = (props) => {
 
   const message: React.ReactNode = type && account && typeof account === 'object' ? buildMessage(intl, type, account, notification.total_count, targetName, instance.title) : null;
 
+  const ariaLabel = messages[type] ? (
+    notificationForScreenReader(
+      intl,
+      intl.formatMessage(messages[type],
+      {
+        name: account && typeof account === 'object' ? account.acct : '',
+        targetName,
+      }),
+      notification.created_at,
+    )
+  ) : '';
+
   return (
     <HotKeys handlers={getHandlers()} data-testid='notification'>
       <div
         className='notification focusable'
         tabIndex={0}
-        aria-label={
-          notificationForScreenReader(
-            intl,
-            intl.formatMessage({
-              id: type && messages[type].id,
-              defaultMessage: type && messages[type].defaultMessage,
-            },
-            {
-              name: account && typeof account === 'object' ? account.acct : '',
-              targetName,
-            }),
-            notification.created_at,
-          )
-        }
+        aria-label={ariaLabel}
       >
         <div className='p-4 focusable'>
           <div className='mb-2'>