From bc19f9148e872fb62d8cd2bf644a771d9c5650d7 Mon Sep 17 00:00:00 2001
From: Titani Labaj <39532947+tlabaj@users.noreply.github.com>
Date: Thu, 2 Nov 2023 12:46:01 -0400
Subject: [PATCH] fix(Notification Drawer): Added screen reader text for
 notification drawer item read state (#9569)

* fix(Notification Drawer): Added screen reader text for notification drawer item read state

* fix snapshot

* Update prop description

* add aria-live

* update snapshots
---
 .../NotificationDrawerHeader.tsx                  |  4 +++-
 .../NotificationDrawerListItem.tsx                | 12 ++++++++++++
 .../__tests__/NotificationDrawerListItem.test.tsx | 15 ++++++++++++++-
 .../NotificationDrawerHeader.test.tsx.snap        |  2 ++
 .../NotificationDrawerListItem.test.tsx.snap      |  8 +++++++-
 5 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx
index 1e54aea890a..ffb497e8ea5 100644
--- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx
@@ -42,7 +42,9 @@ export const NotificationDrawerHeader: React.FunctionComponent<NotificationDrawe
       {title}
     </Text>
     {(customText !== undefined || count !== undefined) && (
-      <span className={css(styles.notificationDrawerHeaderStatus)}>{customText || `${count} ${unreadText}`}</span>
+      <span className={css(styles.notificationDrawerHeaderStatus)} aria-live="polite">
+        {customText || `${count} ${unreadText}`}
+      </span>
     )}
     {(children || onClose) && (
       <div className={css(styles.notificationDrawerHeaderAction)}>
diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx
index a78b58e4f03..8b43ba342f7 100644
--- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx
@@ -13,6 +13,8 @@ export interface NotificationDrawerListItemProps extends React.HTMLProps<HTMLLIE
   isRead?: boolean;
   /**  Callback for when a list item is clicked */
   onClick?: (event: any) => void;
+  /**  Visually hidden text that conveys the current read state of the notification list item */
+  readStateScreenReaderText?: string;
   /**  Tab index for the list item */
   tabIndex?: number;
   /**  Variant indicates the severity level */
@@ -26,6 +28,7 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
   isRead = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   onClick = (event: React.MouseEvent) => undefined as any,
+  readStateScreenReaderText,
   tabIndex = 0,
   variant = 'custom',
   ...props
@@ -38,6 +41,14 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
       }
     }
   };
+
+  let readStateSRText;
+  if (readStateScreenReaderText) {
+    readStateSRText = readStateScreenReaderText;
+  } else {
+    readStateSRText = isRead ? 'read' : 'unread';
+  }
+
   return (
     <li
       {...props}
@@ -52,6 +63,7 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
       onClick={(e) => onClick(e)}
       onKeyDown={onKeyDown}
     >
+      <span className="pf-v5-screen-reader">{readStateSRText}</span>
       {children}
     </li>
   );
diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerListItem.test.tsx b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerListItem.test.tsx
index 88685ae0149..fdaf8573796 100644
--- a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerListItem.test.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerListItem.test.tsx
@@ -21,8 +21,21 @@ describe('NotificationDrawerListItem', () => {
     expect(screen.getByRole('listitem')).toHaveClass('pf-m-hoverable');
   });
 
-  test('drawer list item with isRead applied', () => {
+  test('drawer list item with isRead applied and screen reader text is set to read', () => {
     render(<NotificationDrawerListItem isRead />);
     expect(screen.getByRole('listitem')).toHaveClass('pf-m-read');
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">read</span>');
+
+  });
+
+  test('drawer list item has screen reader text set to unread by default', () => {
+    render(<NotificationDrawerListItem />);
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">unread</span>');
+  });
+
+  test('drawer list item screen reader textcan be customized', () => {
+    render(<NotificationDrawerListItem readStateScreenReaderText="was read"/>);
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">was read</span>');
   });
 });
+ 
\ No newline at end of file
diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap
index 97afe7f43bb..a5fa337375c 100644
--- a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap
+++ b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread
@@ -38,6 +39,7 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread alerts
diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap
index 42ca7cf796d..b2eb9ebf325 100644
--- a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap
+++ b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap
@@ -5,6 +5,12 @@ exports[`NotificationDrawerListItem renders with PatternFly Core styles 1`] = `
   <li
     class="pf-v5-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
     tabindex="0"
-  />
+  >
+    <span
+      class="pf-v5-screen-reader"
+    >
+      unread
+    </span>
+  </li>
 </DocumentFragment>
 `;