Cherry-pick #19667 to 7.0 (#23425)

* dropdown updates * Update packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx Co-authored-by: Makoto Morimoto <[email protected]> * add change file * fix line length Co-authored-by: Makoto Morimoto <[email protected]>
microsoft · Jun 8, 2022 · 87ddc19 · 87ddc19
1 parent 0fc7218
commit 87ddc19
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 10 deletions.
diff --git a/change/@fluentui-react-87609c16-e599-49cf-91e0-2ac09923a565.json b/change/@fluentui-react-87609c16-e599-49cf-91e0-2ac09923a565.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix Dropdown to only add ARIA live region when focused",
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx
@@ -239,7 +239,7 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
       onRenderCaretDown = this._onRenderCaretDown,
       onRenderLabel = this._onRenderLabel,
     } = props;
-    const { isOpen, selectedIndices, calloutRenderEdge } = this.state;
+    const { isOpen, selectedIndices, calloutRenderEdge, hasFocus } = this.state;
     // eslint-disable-next-line deprecation/deprecation
     const onRenderPlaceholder = props.onRenderPlaceholder || props.onRenderPlaceHolder || this._getPlaceholder;
 
@@ -311,7 +311,12 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
               onMouseDown={this._onDropdownMouseDown}
               onFocus={this._onFocus}
             >
-              <span id={this._optionId} className={this._classNames.title} aria-live="polite" aria-atomic={true}>
+              <span
+                id={this._optionId}
+                className={this._classNames.title}
+                aria-live={hasFocus ? 'polite' : undefined}
+                aria-atomic={hasFocus ? true : undefined}
+              >
                 {// If option is selected render title, otherwise render the placeholder text
                 selectedOptions.length
                   ? onRenderTitle(selectedOptions, this._onRenderTitle)

diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.test.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.test.tsx
@@ -134,6 +134,18 @@ describe('Dropdown', () => {
       expect(titleElement.text()).toEqual('1');
     });
 
+    it('Renders live region attributes only when focused', () => {
+      wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} />);
+      let titleElement = wrapper.find('.ms-Dropdown-title');
+
+      expect(titleElement.props()['aria-live']).toBeUndefined();
+
+      wrapper.find('.ms-Dropdown').simulate('focus');
+      titleElement = wrapper.find('.ms-Dropdown-title');
+
+      expect(titleElement.props()['aria-live']).toEqual('polite');
+    });
+
     it('does not change the selected item in when defaultSelectedKey changes', () => {
       wrapper = mount(<Dropdown label="testgroup" defaultSelectedKey="1" options={DEFAULT_OPTIONS} />);
       const titleElement = wrapper.find('.ms-Dropdown-title');

diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -105,8 +105,6 @@ exports[`Dropdown multi-select Renders correctly 1`] = `
     tabIndex={0}
   >
     <span
-      aria-atomic={true}
-      aria-live="polite"
       className=
           ms-Dropdown-title
           ms-Dropdown-titleIsPlaceHolder
@@ -277,8 +275,6 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
     tabindex="0"
   >
     <span
-      aria-atomic="true"
-      aria-live="polite"
       class=
           ms-Dropdown-title
           {
@@ -1118,8 +1114,6 @@ exports[`Dropdown single-select Renders correctly 1`] = `
     tabIndex={0}
   >
     <span
-      aria-atomic={true}
-      aria-live="polite"
       className=
           ms-Dropdown-title
           ms-Dropdown-titleIsPlaceHolder
@@ -1290,8 +1284,6 @@ exports[`Dropdown single-select Renders correctly when open 1`] = `
     tabindex="0"
   >
     <span
-      aria-atomic="true"
-      aria-live="polite"
       class=
           ms-Dropdown-title
           {