From dfe1e5a2b1bfe144aea8b4fe89f464b669b7591e Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 6 Sep 2023 10:43:27 -0400 Subject: [PATCH 1/5] 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 dce2e3c6f9f..7875badf686 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`] = `
Flyout test diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx index a78b58e4f03..2d0829915ac 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 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 undefined as any, + readStateScreenReaderText, tabIndex = 0, variant = 'custom', ...props @@ -38,6 +41,14 @@ export const NotificationDrawerListItem: React.FunctionComponent onClick(e)} onKeyDown={onKeyDown} > + {readStateSRText} {children} ); 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(); expect(screen.getByRole('listitem')).toHaveClass('pf-m-read'); + expect(screen.getByRole('listitem')).toContainHTML('read'); + + }); + + test('drawer list item has screen reader text set to unread by default', () => { + render(); + expect(screen.getByRole('listitem')).toContainHTML('unread'); + }); + + test('drawer list item screen reader textcan be customized', () => { + render(); + expect(screen.getByRole('listitem')).toContainHTML('was read'); }); }); + \ 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`] = `
  • + > + + unread + +
    • `; From ccc2cea4d9a4507f77a4e148cf704d2223457742 Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 6 Sep 2023 12:24:58 -0400 Subject: [PATCH 2/5] fix snapshot --- .../components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 7875badf686..dce2e3c6f9f 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,7 +1093,10 @@ exports[`Nav Nav List with flyout 1`] = `
    Flyout test From 394cd16ee7d7f4b17e9191cb78de6e6278839efc Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 27 Sep 2023 10:36:40 -0400 Subject: [PATCH 3/5] Update prop description --- .../NotificationDrawer/NotificationDrawerListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx index 2d0829915ac..8b43ba342f7 100644 --- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx +++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItem.tsx @@ -13,7 +13,7 @@ export interface NotificationDrawerListItemProps extends React.HTMLProps void; - /** Read state screen reader text */ + /** Visually hidden text that conveys the current read state of the notification list item */ readStateScreenReaderText?: string; /** Tab index for the list item */ tabIndex?: number; From 4c65cfb92bd822cef1864d59b2f342c3073ac8b1 Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 18 Oct 2023 14:38:48 -0400 Subject: [PATCH 4/5] add aria-live --- .../NotificationDrawer/NotificationDrawerHeader.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 {(customText !== undefined || count !== undefined) && ( - {customText || `${count} ${unreadText}`} + + {customText || `${count} ${unreadText}`} + )} {(children || onClose) && (
    From b761913b517e2a22adf031075db94f1e709a2253 Mon Sep 17 00:00:00 2001 From: Titani Date: Mon, 23 Oct 2023 16:04:56 -0400 Subject: [PATCH 5/5] update snapshots --- .../__snapshots__/NotificationDrawerHeader.test.tsx.snap | 2 ++ 1 file changed, 2 insertions(+) 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 2 unread @@ -38,6 +39,7 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied Notifications 2 unread alerts