feat(a11y): require close button label where present in ToastNotifica…

…tion and NotificationTemplate
momentum-design · Dec 19, 2024 · 2aaf073 · 2aaf073
1 parent b2eeb5f
commit 2aaf073
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 45 deletions.
diff --git a/src/components/NotificationSystem/NotificationSystem.stories.tsx b/src/components/NotificationSystem/NotificationSystem.stories.tsx
@@ -30,7 +30,10 @@ const Example = Template<NotificationSystemProps>((args: NotificationSystemProps
       <ButtonPill
         onPress={() =>
           NotificationSystem.notify(
-            <NotificationTemplate content="I'm a low attention notification" />
+            <NotificationTemplate
+              content="I'm a low attention notification"
+              toastCloseButtonLabel="Close notification"
+            />
           )
         }
       >
@@ -57,6 +60,7 @@ const Important = Template<NotificationSystemProps>((args: NotificationSystemPro
             <NotificationTemplate
               content="I'm a medium attention notification, which does stay here permanently and requires an action."
               closeButtonText="Close"
+              toastCloseButtonLabel="Close notification"
             />,
             { attention: ATTENTION.MEDIUM }
           )
@@ -82,7 +86,10 @@ const Mixed = Template<NotificationSystemProps>((args: NotificationSystemProps)
       <ButtonPill
         onPress={() =>
           NotificationSystem.notify(
-            <NotificationTemplate content="I'm a low attention notification" />
+            <NotificationTemplate
+              content="I'm a low attention notification"
+              toastCloseButtonLabel="Close notification"
+            />
           )
         }
       >
@@ -94,6 +101,7 @@ const Mixed = Template<NotificationSystemProps>((args: NotificationSystemProps)
             <NotificationTemplate
               content="I'm a medium attention notification, which does stay here permanently and requires an action."
               closeButtonText="Close"
+              toastCloseButtonLabel="Close notification"
             />,
             {
               attention: ATTENTION.MEDIUM,
@@ -126,6 +134,7 @@ const UpdateContent = Template<NotificationSystemProps>((args: NotificationSyste
           ? `${numberRaisedHand} have their hand raised.`
           : 'User A has the hand raised.'
       }
+      toastCloseButtonLabel="Close notification"
     />
   );
 
@@ -186,7 +195,12 @@ const ResetTimer = Template<NotificationSystemProps>((args: NotificationSystemPr
 
   const [notificationIsShown, setNotificationIsShown] = React.useState(false);
 
-  const Notification = <NotificationTemplate content={`I am disappearing in 5 seconds`} />;
+  const Notification = (
+    <NotificationTemplate
+      content={`I am disappearing in 5 seconds`}
+      toastCloseButtonLabel="Close notification"
+    />
+  );
 
   const handleClose = React.useCallback(() => {
     setNotificationIsShown(false);
@@ -231,7 +245,10 @@ const MultipleSystems = Template<NotificationSystemProps>((args: NotificationSys
 
   const showNotification = React.useCallback((position: PositionType) => {
     toastId.current = NotificationSystem.notify(
-      <NotificationTemplate content={`I'm a notification on the ${position} position`} />,
+      <NotificationTemplate
+        content={`I'm a notification on the ${position} position`}
+        toastCloseButtonLabel="Close notification"
+      />,
       {
         autoClose: 5000,
         notificationSystemId: position,

diff --git a/src/components/NotificationSystem/NotificationSystem.unit.test.tsx b/src/components/NotificationSystem/NotificationSystem.unit.test.tsx
@@ -66,11 +66,14 @@ describe('<NotificationSystem />', () => {
     );
 
     act(() => {
-      NotificationSystem.notify(<NotificationTemplate content={content} />, {
-        toastId: fixedToastId,
-        notificationSystemId: id,
-        attention,
-      });
+      NotificationSystem.notify(
+        <NotificationTemplate content={content} toastCloseButtonLabel="Close notification" />,
+        {
+          toastId: fixedToastId,
+          notificationSystemId: id,
+          attention,
+        }
+      );
     });
 
     // wait till the toast shows up on the screen:
@@ -322,7 +325,10 @@ describe('<NotificationSystem />', () => {
 
       act(() => {
         NotificationSystem.notify(
-          <NotificationTemplate content="creating additional toast to meet the toast limit" />,
+          <NotificationTemplate
+            content="creating additional toast to meet the toast limit"
+            toastCloseButtonLabel="Close notification"
+          />,
           {
             toastId: '12345890',
             notificationSystemId: '1234567',
@@ -332,7 +338,10 @@ describe('<NotificationSystem />', () => {
 
       act(() => {
         NotificationSystem.notify(
-          <NotificationTemplate content="additional toast to test the limit works" />,
+          <NotificationTemplate
+            content="additional toast to test the limit works"
+            toastCloseButtonLabel="Close notification"
+          />,
           {
             toastId: '1234589012',
             notificationSystemId: '1234567',
@@ -357,10 +366,13 @@ describe('<NotificationSystem />', () => {
 
       const toastId = '12345';
       act(() => {
-        NotificationSystem.notify(<NotificationTemplate content={textContent} />, {
-          autoClose: false,
-          toastId,
-        });
+        NotificationSystem.notify(
+          <NotificationTemplate content={textContent} toastCloseButtonLabel="Close notification" />,
+          {
+            autoClose: false,
+            toastId,
+          }
+        );
       });
 
       // wait till the toast shows up on the screen:
@@ -390,7 +402,11 @@ describe('<NotificationSystem />', () => {
       const toastId = '12345';
       act(() => {
         NotificationSystem.notify(
-          <NotificationTemplate content={textContent} closeButtonText={closeButtonText} />,
+          <NotificationTemplate
+            content={textContent}
+            closeButtonText={closeButtonText}
+            toastCloseButtonLabel="Close notification"
+          />,
           {
             autoClose: false,
             toastId,
@@ -423,10 +439,13 @@ describe('<NotificationSystem />', () => {
       const toastId = '12345';
       const newcontent = 'this is a new text';
       act(() => {
-        NotificationSystem.notify(<NotificationTemplate content={textContent} />, {
-          autoClose: false,
-          toastId,
-        });
+        NotificationSystem.notify(
+          <NotificationTemplate content={textContent} toastCloseButtonLabel="Close notification" />,
+          {
+            autoClose: false,
+            toastId,
+          }
+        );
       });
 
       // wait till the toast shows up on the screen:
@@ -438,7 +457,9 @@ describe('<NotificationSystem />', () => {
 
       act(() => {
         NotificationSystem.update(toastId, {
-          render: <NotificationTemplate content={newcontent} />,
+          render: (
+            <NotificationTemplate content={newcontent} toastCloseButtonLabel="Close notification" />
+          ),
         });
       });
 
@@ -460,10 +481,16 @@ describe('<NotificationSystem />', () => {
       );
 
       act(() => {
-        NotificationSystem.notify(<NotificationTemplate content={textContent + firstSystemId} />, {
-          autoClose: false,
-          notificationSystemId: firstSystemId,
-        });
+        NotificationSystem.notify(
+          <NotificationTemplate
+            content={textContent + firstSystemId}
+            toastCloseButtonLabel="Close notification"
+          />,
+          {
+            autoClose: false,
+            notificationSystemId: firstSystemId,
+          }
+        );
       });
 
       // wait till the first toast shows up on the screen:
@@ -474,10 +501,16 @@ describe('<NotificationSystem />', () => {
 
       // trigger second notification
       act(() => {
-        NotificationSystem.notify(<NotificationTemplate content={textContent + secondSystemId} />, {
-          autoClose: false,
-          notificationSystemId: secondSystemId,
-        });
+        NotificationSystem.notify(
+          <NotificationTemplate
+            content={textContent + secondSystemId}
+            toastCloseButtonLabel="Close notification"
+          />,
+          {
+            autoClose: false,
+            notificationSystemId: secondSystemId,
+          }
+        );
       });
 
       // wait till the 2 toasts shows up on the screen:

diff --git a/src/components/NotificationSystem/NotificationSystem.unit.test.tsx.snap b/src/components/NotificationSystem/NotificationSystem.unit.test.tsx.snap
@@ -74,6 +74,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot 1`] = `
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -196,6 +197,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot if notification c
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -318,6 +320,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot if notification c
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -440,6 +443,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot when limit is set
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -562,6 +566,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with ariaLabel pr
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -684,6 +689,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with body class n
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -806,6 +812,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with className 1`
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -928,6 +935,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with container cl
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -1046,6 +1054,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with different at
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -1161,6 +1170,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with different po
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -1287,6 +1297,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with different zI
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -1409,6 +1420,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with enter animat
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -1531,6 +1543,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with id 1`] = `
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -1653,6 +1666,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with newest on to
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -1775,6 +1789,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with style 1`] =
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"
@@ -1897,6 +1912,7 @@ exports[`<NotificationSystem /> snapshot should match snapshot with toast class
                     class="md-toast-notification-close-button"
                   >
                     <button
+                      aria-label="Close notification"
                       class="md-button-circle-wrapper md-button-simple-wrapper"
                       data-color="primary"
                       data-disabled="false"

diff --git a/src/components/NotificationSystem/NotificationTemplate.tsx b/src/components/NotificationSystem/NotificationTemplate.tsx
@@ -38,22 +38,32 @@ interface NotificationTemplateProps {
    * aria-label used for the toast notification.
    */
   ariaLabel?: string;
+
+  /**
+   * aria-label used for the toast close (x) button.
+   */
+  toastCloseButtonLabel: string;
 }
 
 /**
  * NOTE: this component is only used for the stories
  */
 const NotificationTemplate: FC<NotificationTemplateProps> = (props: NotificationTemplateProps) => {
-  const { content, closeToast, closeButtonText, className, ariaLabel } = props;
+  const { content, closeToast, closeButtonText, className, ariaLabel, toastCloseButtonLabel } =
+    props;
 
-  const handleClose = React.useCallback((e: PressEvent) => {
-    closeToast?.(e as unknown as React.MouseEvent<HTMLElement, MouseEvent>);
-  }, [closeToast]);
+  const handleClose = React.useCallback(
+    (e: PressEvent) => {
+      closeToast?.(e as unknown as React.MouseEvent<HTMLElement, MouseEvent>);
+    },
+    [closeToast]
+  );
 
   return (
     <ToastNotification
       content={content}
       onClose={handleClose}
+      closeButtonLabel={toastCloseButtonLabel}
       ariaLabel={ariaLabel}
       leadingVisual={
         <Icon