fix: track Element.replaceChildren and `DocumentFragment.replaceChi…

…ldren` APIs
AriPerkkio · Jan 7, 2023 · ee87bc5 · ee87bc5
1 parent 4f19de9
commit ee87bc5
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 6 deletions.
diff --git a/.storybook/stories/ElementApi.stories.ts b/.storybook/stories/ElementApi.stories.ts
@@ -222,6 +222,42 @@ prepend.play = ({ canvasElement }) => {
     expect('Hello world').toBeAnnounced('polite');
 };
 
+export const replaceChildren: Story = () => {
+    let element: HTMLElement;
+    let child: HTMLElement;
+
+    return createButtonCycle(
+        parent => {
+            element = document.createElement('div');
+            element.setAttribute('aria-live', 'polite');
+
+            parent.appendChild(element);
+        },
+        () => {
+            element.appendChild(document.createElement('p'));
+            element.appendChild(document.createElement('div'));
+        },
+        () => {
+            child = document.createElement('span');
+            child.textContent = 'Hello world';
+            element.replaceChildren(child);
+        }
+    );
+};
+replaceChildren.storyName = 'replaceChildren';
+replaceChildren.play = ({ canvasElement }) => {
+    const button = within(canvasElement).getByRole('button');
+    expect('Hello world').not.toBeAnnounced();
+
+    times(2)(() => {
+        userEvent.click(button);
+        expect('Hello world').not.toBeAnnounced();
+    });
+
+    userEvent.click(button);
+    expect('Hello world').toBeAnnounced('polite');
+};
+
 export const removeAttribute: Story = () => {
     let element: HTMLElement;
     let child: HTMLElement;

diff --git a/src/capture-announcements.ts b/src/capture-announcements.ts
@@ -225,13 +225,15 @@ export default function CaptureAnnouncements(options: Options): Restore {
     // prettier-ignore
     const cleanups: Restore[] = [
         interceptMethod(DocumentFragment.prototype, 'removeChild', onRemoveChild),
+        interceptMethod(DocumentFragment.prototype, 'replaceChildren', onNodeMount),
         interceptMethod(DocumentFragment.prototype, 'append', onNodeMount),
         interceptMethod(DocumentFragment.prototype, 'prepend', onNodeMount),
 
         interceptMethod(Element.prototype, 'setAttribute', onSetAttribute),
         interceptMethod(Element.prototype, 'removeAttribute', onRemoveAttributeBefore, 'BEFORE'),
         interceptMethod(Element.prototype, 'removeAttribute', onRemoveAttributeAfter, 'AFTER'),
         interceptMethod(Element.prototype, 'removeChild', onRemoveChild),
+        interceptMethod(Element.prototype, 'replaceChildren', onNodeMount),
         interceptMethod(Element.prototype, 'insertAdjacentElement', onInsertAdjacent),
         interceptMethod(Element.prototype, 'insertAdjacentHTML', onInsertAdjacent),
         interceptMethod(Element.prototype, 'insertAdjacentText', onInsertAdjacent),

diff --git a/test/capture-announcements.test.ts b/test/capture-announcements.test.ts
@@ -342,14 +342,17 @@ describe.each(ASSERTIVE_CASES)('$testName', ({ name, value }) => {
         expect(onCapture).toHaveBeenCalledWith('Hello world', 'assertive');
     });
 
-    test('should announce when content is added with `replaceChildren`', () => {
-        const parent = document.createElement('div');
+    test('should announce when content is added with `replaceChildren`', async () => {
+        appendToRoot(element);
+
+        element.appendChild(document.createElement('div'));
+
         const child = document.createElement('div');
-        parent.appendChild(child);
-        appendToRoot(parent);
+        child.textContent = 'Hello world';
 
-        element.textContent = 'Hello world';
-        parent.replaceChild(element, child);
+        element.replaceChildren(child);
+
+        expect(onCapture).toHaveBeenCalledWith('Hello world', 'assertive');
     });
 
     test('should not announce when live region is hidden', () => {