fix(react): announce collapsed state when dropdown closes

jest.config.ts

@@ -1,4 +1,4 @@
-const { getJestProjectsAsync } = require('@nx/jest');
+import { getJestProjectsAsync } from '@nx/jest';
 
 export default async () => ({
   projects: await getJestProjectsAsync(),

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,
@@ -302,6 +305,8 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
       if (this.props.onDismiss) {
         this.props.onDismiss();
       }
+    } else if (prevState.isOpen === false && this.state.isOpen === true) {
+      this._wasOpen = true;
     }
   }
 
@@ -418,6 +423,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}

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 }) => {