From 967a963480f87e844da2796b5adbd377bd950547 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Fri, 17 Jan 2025 17:17:18 -0500 Subject: [PATCH 1/5] bug: ensure mutation observer is triggered when content is added to Announce without pre-existing text. --- packages/react/src/live-region/Announce.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/live-region/Announce.tsx b/packages/react/src/live-region/Announce.tsx index 307a79c47b2..a9e207c83d1 100644 --- a/packages/react/src/live-region/Announce.tsx +++ b/packages/react/src/live-region/Announce.tsx @@ -108,6 +108,7 @@ export function Announce({ observer.observe(container, { subtree: true, characterData: true, + childList: true, }) return () => { From f8f0dd7a2c490f86db7baa0a8f62c61ed8748a4e Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 21 Jan 2025 16:42:38 -0500 Subject: [PATCH 2/5] Comment change out and add tests --- packages/react/src/live-region/Announce.tsx | 2 +- .../live-region/__tests__/AriaAlert.test.tsx | 31 ++++++++++++++++++- .../live-region/__tests__/AriaStatus.test.tsx | 28 +++++++++++++++++ 3 files changed, 59 insertions(+), 2 deletions(-) diff --git a/packages/react/src/live-region/Announce.tsx b/packages/react/src/live-region/Announce.tsx index a9e207c83d1..ffa73946074 100644 --- a/packages/react/src/live-region/Announce.tsx +++ b/packages/react/src/live-region/Announce.tsx @@ -108,7 +108,7 @@ export function Announce({ observer.observe(container, { subtree: true, characterData: true, - childList: true, + // childList: true, }) return () => { diff --git a/packages/react/src/live-region/__tests__/AriaAlert.test.tsx b/packages/react/src/live-region/__tests__/AriaAlert.test.tsx index 91c4d83731e..2bb1128132b 100644 --- a/packages/react/src/live-region/__tests__/AriaAlert.test.tsx +++ b/packages/react/src/live-region/__tests__/AriaAlert.test.tsx @@ -1,6 +1,7 @@ -import {render, screen} from '@testing-library/react' +import {render, screen, act, waitFor} from '@testing-library/react' import React from 'react' import {AriaAlert} from '../AriaAlert' +import {userEvent} from '@testing-library/user-event' import {getLiveRegion} from '../../utils/testing' describe('AriaAlert', () => { @@ -46,4 +47,32 @@ describe('AriaAlert', () => { ) expect(screen.getByTestId('container').tagName).toBe('SPAN') }) + + it('should update live-region element when AriaAlert goes from empty to populated', async () => { + function TestComponent() { + const [show, setShow] = React.useState(false) + return ( + <> + {show ? 'Failed to export data!' : null} + + + ) + } + const user = userEvent.setup() + + render() + + const liveRegion = getLiveRegion() + expect(liveRegion.getMessage('assertive')).toBe('') + + await user.click(screen.getByText('Export data')) + expect(liveRegion.getMessage('assertive')).toBe('Failed to export data!') + }) }) diff --git a/packages/react/src/live-region/__tests__/AriaStatus.test.tsx b/packages/react/src/live-region/__tests__/AriaStatus.test.tsx index 16465c03a5c..294abf70ee7 100644 --- a/packages/react/src/live-region/__tests__/AriaStatus.test.tsx +++ b/packages/react/src/live-region/__tests__/AriaStatus.test.tsx @@ -83,4 +83,32 @@ describe('AriaStatus', () => { ) expect(screen.getByTestId('container').tagName).toBe('SPAN') }) + + it('should update live-region element when AriaStatus goes from empty to populated', async () => { + function TestComponent() { + const [show, setShow] = React.useState(false) + return ( + <> + {show ? 'Export completed' : null} + + + ) + } + const user = userEvent.setup() + + render() + + const liveRegion = getLiveRegion() + expect(liveRegion.getMessage('polite')).toBe('') + + await user.click(screen.getByText('Export data')) + expect(liveRegion.getMessage('polite')).toBe('Export completed') + }) }) From 432b45caa62f98a0537974858effb5e8e5fa97f1 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 21 Jan 2025 16:59:13 -0500 Subject: [PATCH 3/5] Set childList: true --- packages/react/src/live-region/Announce.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/live-region/Announce.tsx b/packages/react/src/live-region/Announce.tsx index ffa73946074..a9e207c83d1 100644 --- a/packages/react/src/live-region/Announce.tsx +++ b/packages/react/src/live-region/Announce.tsx @@ -108,7 +108,7 @@ export function Announce({ observer.observe(container, { subtree: true, characterData: true, - // childList: true, + childList: true, }) return () => { From db9821c8b482b4616de560cc5768bd36f9cddd3f Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 21 Jan 2025 16:59:59 -0500 Subject: [PATCH 4/5] Remove unused --- packages/react/src/live-region/__tests__/AriaAlert.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/live-region/__tests__/AriaAlert.test.tsx b/packages/react/src/live-region/__tests__/AriaAlert.test.tsx index 2bb1128132b..052eb16552a 100644 --- a/packages/react/src/live-region/__tests__/AriaAlert.test.tsx +++ b/packages/react/src/live-region/__tests__/AriaAlert.test.tsx @@ -1,4 +1,4 @@ -import {render, screen, act, waitFor} from '@testing-library/react' +import {render, screen} from '@testing-library/react' import React from 'react' import {AriaAlert} from '../AriaAlert' import {userEvent} from '@testing-library/user-event' From 81bae6b765e0ec202107b23272f75d06e33f8d4a Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 21 Jan 2025 17:01:17 -0500 Subject: [PATCH 5/5] Create afraid-pianos-invent.md --- .changeset/afraid-pianos-invent.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/afraid-pianos-invent.md diff --git a/.changeset/afraid-pianos-invent.md b/.changeset/afraid-pianos-invent.md new file mode 100644 index 00000000000..2cf429047ec --- /dev/null +++ b/.changeset/afraid-pianos-invent.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +bug: ensure Announce components work without pre-existing text node