From 4b4c4c9d24d760b15782be92e258b323f667dc26 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Wed, 6 Sep 2023 10:43:27 -0400
Subject: [PATCH] fix(Notification Drawer): Added screen reader text for
 notification drawer item read state

---
 .../Nav/__tests__/__snapshots__/Nav.test.tsx.snap |  5 +----
 .../NotificationDrawerListItem.tsx                | 12 ++++++++++++
 .../__tests__/NotificationDrawerListItem.test.tsx | 15 ++++++++++++++-
 .../NotificationDrawerListItem.test.tsx.snap      |  8 +++++++-
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
index 88426bb27d2..fb0db5aabb0 100644
--- a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
+++ b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
@@ -1093,10 +1093,7 @@ exports[`Nav Nav List with flyout 1`] = `
     </button>
     <div
       class=""
-      data-popper-escaped="true"
-      data-popper-placement="right-start"
-      data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px;"
     >
       <div>
         Flyout test
diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx
index 6d62b63192e..40b5ca90e5c 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;
+  /** Read state screen reader text */
+  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
@@ -40,6 +43,14 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
       }
     }
   };
+
+  let readStateSRText;
+  if (readStateScreenReaderText) {
+    readStateSRText = readStateScreenReaderText;
+  } else {
+    readStateSRText = isRead ? 'read' : 'unread';
+  }
+
   return (
     <li
       {...props}
@@ -54,6 +65,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__/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>
 `;