Skip to content

Commit d0960ca

Browse files
committed
test(dialog): add Shadow DOM regression test for accessibility warnings
Adds a test that mounts Dialog inside a ShadowRoot (attachShadow) and asserts that no console.error accessibility warning is fired when DialogTitle is present, verifying the getRootNode() fix works correctly. Addresses Copilot review feedback on #3839.
1 parent 6b21461 commit d0960ca

File tree

1 file changed

+45
-1
lines changed

1 file changed

+45
-1
lines changed

packages/react/dialog/src/dialog.test.tsx

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { axe } from 'vitest-axe';
33
import type { RenderResult } from '@testing-library/react';
4-
import { render, fireEvent, cleanup } from '@testing-library/react';
4+
import { render, fireEvent, cleanup, act } from '@testing-library/react';
55
import * as Dialog from './dialog';
66
import type { Mock, MockInstance } from 'vitest';
77
import { describe, it, afterEach, beforeEach, vi, expect } from 'vitest';
@@ -139,3 +139,47 @@ describe('given a default Dialog', () => {
139139
});
140140
});
141141
});
142+
143+
describe('given a Dialog rendered inside a Shadow DOM', () => {
144+
let shadowHost: HTMLElement;
145+
let shadowRoot: ShadowRoot;
146+
let consoleErrorMock: ReturnType<typeof vi.spyOn>;
147+
let consoleErrorMockFunction: ReturnType<typeof vi.fn>;
148+
149+
beforeEach(() => {
150+
consoleErrorMockFunction = vi.fn();
151+
consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(consoleErrorMockFunction);
152+
153+
// Create a shadow host and attach a shadow root
154+
shadowHost = document.createElement('div');
155+
document.body.appendChild(shadowHost);
156+
shadowRoot = shadowHost.attachShadow({ mode: 'open' });
157+
});
158+
159+
afterEach(() => {
160+
consoleErrorMock.mockRestore();
161+
consoleErrorMockFunction.mockClear();
162+
document.body.removeChild(shadowHost);
163+
});
164+
165+
it('should not fire accessibility warning when DialogTitle is present inside Shadow DOM', async () => {
166+
const container = document.createElement('div');
167+
shadowRoot.appendChild(container);
168+
169+
render(
170+
<Dialog.Root open>
171+
<Dialog.Content>
172+
<Dialog.Title>Shadow Dialog Title</Dialog.Title>
173+
<Dialog.Description>Shadow Dialog Description</Dialog.Description>
174+
<Dialog.Close>Close</Dialog.Close>
175+
</Dialog.Content>
176+
</Dialog.Root>,
177+
{ container }
178+
);
179+
180+
// Wait for effects to run
181+
await act(async () => {});
182+
183+
expect(consoleErrorMockFunction).not.toHaveBeenCalled();
184+
});
185+
});

0 commit comments

Comments
 (0)