diff --git a/jest.config.ts b/jest.config.ts
index f5c10f47dec382..6b3f2d6e243a4a 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -1,4 +1,4 @@
-const { getJestProjectsAsync } = require('@nx/jest');
+import { getJestProjectsAsync } from '@nx/jest';
export default async () => ({
projects: await getJestProjectsAsync(),
diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx
index fda5c2b2d48ed2..2b6b7857139b78 100644
--- a/packages/react/src/components/Dropdown/Dropdown.base.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx
@@ -29,6 +29,7 @@ import { Icon } from '../../Icon';
import { Label } from '../../Label';
import { Panel } from '../../Panel';
import { ResponsiveMode, useResponsiveMode } from '../../ResponsiveMode';
+import { Announced } from '../../Announced';
import { SelectableOptionMenuItemType, getAllSelectedOptions } from '../../SelectableOption';
// import and use V7 Checkbox to ensure no breaking changes.
import { Checkbox } from '../../Checkbox';
@@ -219,6 +220,7 @@ class DropdownInternal extends React.Component}
{hasErrorMessage && (
{errorMessage}
diff --git a/packages/react/src/components/Dropdown/Dropdown.test.tsx b/packages/react/src/components/Dropdown/Dropdown.test.tsx
index dc4f4450179530..0bf79ae29e2d9d 100644
--- a/packages/react/src/components/Dropdown/Dropdown.test.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.test.tsx
@@ -726,6 +726,36 @@ describe('Dropdown', () => {
});
});
+ describe('Accessibility Announcements', () => {
+ it('announces when the dropdown collapses', () => {
+ jest.useFakeTimers();
+ const { getByRole, queryByRole, queryAllByRole } = render();
+ const dropdownRoot = getByRole('combobox');
+
+ // Initially, there should be no collapsed announcement
+ expect(queryAllByRole('status').some(el => el.textContent === 'collapsed')).toBe(false);
+
+ // Open the dropdown
+ fireEvent.click(dropdownRoot);
+ expect(queryByRole('listbox')).toBeTruthy();
+ expect(queryAllByRole('status').some(el => el.textContent === 'collapsed')).toBe(false);
+
+ // Close the dropdown via Escape key
+ fireEvent.keyDown(dropdownRoot, { which: KeyCodes.escape });
+ expect(queryByRole('listbox')).toBeFalsy();
+
+ // Advance timers so DelayedRender can render the message
+ act(() => {
+ jest.runAllTimers();
+ });
+
+ // Now, the collapsed announcement should be present
+ expect(queryAllByRole('status').some(el => el.textContent === 'collapsed')).toBe(true);
+
+ jest.useRealTimers();
+ });
+ });
+
describe('with simulated async loaded options', () => {
/** See https://github.com/microsoft/fluentui/issues/7315 */
const DropdownWithChangingProps = (props: { multi: boolean }) => {