From 19e8f9c89127106ef554dc3593abefbde40766a9 Mon Sep 17 00:00:00 2001
From: Vivek Jariwala <vivekjariwala50@gmail.com>
Date: Tue, 9 Jun 2026 11:29:21 -0400
Subject: [PATCH 1/2] fix(react): announce collapsed state when dropdown closes

---
 jest.config.ts                                |  2 +-
 .../src/components/Dropdown/Dropdown.base.tsx |  7 +++++
 .../src/components/Dropdown/Dropdown.test.tsx | 30 +++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

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..ed0217a5dc3583 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<IDropdownInternalProps, IDropdown
   private _gotMouseMove: boolean;
   /** Flag for tracking whether focus is triggered by click (alternatively triggered by keyboard nav) */
   private _isFocusedByClick: boolean;
+  private _wasOpen: boolean;
 
   constructor(props: IDropdownInternalProps) {
     super(props);
@@ -270,6 +272,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
     this._hasBeenPositioned = false;
 
     this._sizePosCache.updateOptions(options);
+    this._wasOpen = false;
 
     this.state = {
       isOpen: false,
@@ -298,10 +301,13 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
     if (prevState.isOpen === true && this.state.isOpen === false) {
       this._gotMouseMove = false;
       this._hasBeenPositioned = false;
+      this._wasOpen = false;
 
       if (this.props.onDismiss) {
         this.props.onDismiss();
       }
+    } else if (prevState.isOpen === false && this.state.isOpen === true) {
+      this._wasOpen = true;
     }
   }
 
@@ -418,6 +424,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
             },
             this._onRenderContainer,
           )}
+        {!isOpen && this._wasOpen && <Announced message="collapsed" />}
         {hasErrorMessage && (
           <div role="alert" id={errorMessageId} className={this._classNames.errorMessage}>
             {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(<Dropdown options={DEFAULT_OPTIONS} />);
+      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 }) => {

From a67f53d5126eb9e6f993ee0444d11a1255212ead Mon Sep 17 00:00:00 2001
From: Vivek Jariwala <vivekjariwala50@gmail.com>
Date: Wed, 10 Jun 2026 13:31:01 -0400
Subject: [PATCH 2/2] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 packages/react/src/components/Dropdown/Dropdown.base.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx
index ed0217a5dc3583..2b6b7857139b78 100644
--- a/packages/react/src/components/Dropdown/Dropdown.base.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx
@@ -301,7 +301,6 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
     if (prevState.isOpen === true && this.state.isOpen === false) {
       this._gotMouseMove = false;
       this._hasBeenPositioned = false;
-      this._wasOpen = false;
 
       if (this.props.onDismiss) {
         this.props.onDismiss();