fix(Notification Drawer): Added screen reader text for notification d…

…rawer 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
patternfly · Nov 2, 2023 · bc19f91 · bc19f91
1 parent 7f6a62c
commit bc19f91
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 3 deletions.
diff --git 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
@@ -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/...eact-core/src/components/NotificationDrawer/__tests__/NotificationDrawerListItem.test.tsx b/...eact-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>');
   });
 });
+
diff --git a/...ponents/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap b/...ponents/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/...nents/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap b/...nents/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>
 `;