From 86c831d73355084919a5ff0495895a49cfe6eaa7 Mon Sep 17 00:00:00 2001
From: Sarah Higley <smhigley@users.noreply.github.com>
Date: Thu, 9 Sep 2021 09:07:49 -0700
Subject: [PATCH] fix(Dropdown): add aria-live only when focused (#19667)

---
 ...i-react-87609c16-e599-49cf-91e0-2ac09923a565.json |  7 +++++++
 .../ChoiceGroup.Custom.Example.tsx.shot              |  2 --
 .../DetailsList.CustomGroupHeaders.Example.tsx.shot  |  2 --
 .../__snapshots__/Dropdown.Basic.Example.tsx.shot    |  6 ------
 .../Dropdown.Controlled.Example.tsx.shot             |  2 --
 .../Dropdown.ControlledMulti.Example.tsx.shot        |  2 --
 .../__snapshots__/Dropdown.Custom.Example.tsx.shot   |  4 ----
 .../__snapshots__/Dropdown.Error.Example.tsx.shot    |  2 --
 .../__snapshots__/Dropdown.Required.Example.tsx.shot |  4 ----
 .../__snapshots__/Facepile.Basic.Example.tsx.shot    |  2 --
 .../__snapshots__/Facepile.Overflow.Example.tsx.shot |  2 --
 .../ResizeGroup.OverflowSet.Example.tsx.shot         |  2 --
 .../react/src/components/Dropdown/Dropdown.base.tsx  |  6 +++---
 .../react/src/components/Dropdown/Dropdown.test.tsx  | 12 ++++++++++++
 .../Dropdown/__snapshots__/Dropdown.test.tsx.snap    |  8 --------
 15 files changed, 22 insertions(+), 41 deletions(-)
 create mode 100644 change/@fluentui-react-87609c16-e599-49cf-91e0-2ac09923a565.json

diff --git a/change/@fluentui-react-87609c16-e599-49cf-91e0-2ac09923a565.json b/change/@fluentui-react-87609c16-e599-49cf-91e0-2ac09923a565.json
new file mode 100644
index 00000000000000..04dce1c95fa78e
--- /dev/null
+++ 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": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot
index cb2272c7c37e6d..0d14f7e355ac7f 100644
--- a/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot
@@ -279,9 +279,7 @@ exports[`Component Examples renders ChoiceGroup.Custom.Example.tsx correctly 1`]
                 tabIndex={-1}
               >
                 <span
-                  aria-atomic={true}
                   aria-invalid={false}
-                  aria-live="polite"
                   className=
                       ms-Dropdown-title
                       {
diff --git a/packages/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot
index 42eecee15f5194..680578864a5af4 100644
--- a/packages/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot
@@ -139,9 +139,7 @@ Array [
       tabIndex={0}
     >
       <span
-        aria-atomic={true}
         aria-invalid={false}
-        aria-live="polite"
         className=
             ms-Dropdown-title
             {
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.Basic.Example.tsx.shot
index 665cffb6bf7728..4027b9e6f8742d 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.Basic.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.Basic.Example.tsx.shot
@@ -158,9 +158,7 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
       tabIndex={0}
     >
       <span
-        aria-atomic={true}
         aria-invalid={false}
-        aria-live="polite"
         className=
             ms-Dropdown-title
             ms-Dropdown-titleIsPlaceHolder
@@ -349,9 +347,7 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
       tabIndex={-1}
     >
       <span
-        aria-atomic={true}
         aria-invalid={false}
-        aria-live="polite"
         className=
             ms-Dropdown-title
             {
@@ -567,9 +563,7 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
       tabIndex={0}
     >
       <span
-        aria-atomic={true}
         aria-invalid={false}
-        aria-live="polite"
         className=
             ms-Dropdown-title
             {
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.Controlled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.Controlled.Example.tsx.shot
index 3842c20a11471f..c2a9482eb0f828 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.Controlled.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.Controlled.Example.tsx.shot
@@ -138,9 +138,7 @@ exports[`Component Examples renders Dropdown.Controlled.Example.tsx correctly 1`
     tabIndex={0}
   >
     <span
-      aria-atomic={true}
       aria-invalid={false}
-      aria-live="polite"
       className=
           ms-Dropdown-title
           ms-Dropdown-titleIsPlaceHolder
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.ControlledMulti.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.ControlledMulti.Example.tsx.shot
index 4799e497dc5c46..46d9b50e09281e 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.ControlledMulti.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.ControlledMulti.Example.tsx.shot
@@ -138,9 +138,7 @@ exports[`Component Examples renders Dropdown.ControlledMulti.Example.tsx correct
     tabIndex={0}
   >
     <span
-      aria-atomic={true}
       aria-invalid={false}
-      aria-live="polite"
       className=
           ms-Dropdown-title
           ms-Dropdown-titleIsPlaceHolder
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.Custom.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.Custom.Example.tsx.shot
index f90ff1d95fd382..42c3b31f4f1a20 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.Custom.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.Custom.Example.tsx.shot
@@ -158,9 +158,7 @@ exports[`Component Examples renders Dropdown.Custom.Example.tsx correctly 1`] =
       tabIndex={0}
     >
       <span
-        aria-atomic={true}
         aria-invalid={false}
-        aria-live="polite"
         className=
             ms-Dropdown-title
             ms-Dropdown-titleIsPlaceHolder
@@ -540,9 +538,7 @@ exports[`Component Examples renders Dropdown.Custom.Example.tsx correctly 1`] =
       tabIndex={0}
     >
       <span
-        aria-atomic={true}
         aria-invalid={false}
-        aria-live="polite"
         className=
             ms-Dropdown-title
             ms-Dropdown-titleIsPlaceHolder
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.Error.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.Error.Example.tsx.shot
index 49805474a8612f..361edea577ad11 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.Error.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.Error.Example.tsx.shot
@@ -334,9 +334,7 @@ exports[`Component Examples renders Dropdown.Error.Example.tsx correctly 1`] = `
       tabIndex={0}
     >
       <span
-        aria-atomic={true}
         aria-invalid={false}
-        aria-live="polite"
         className=
             ms-Dropdown-title
             ms-Dropdown-titleIsPlaceHolder
diff --git a/packages/react-examples/src/react/__snapshots__/Dropdown.Required.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Dropdown.Required.Example.tsx.shot
index 30c440db263670..a941859d593660 100644
--- a/packages/react-examples/src/react/__snapshots__/Dropdown.Required.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Dropdown.Required.Example.tsx.shot
@@ -188,9 +188,7 @@ exports[`Component Examples renders Dropdown.Required.Example.tsx correctly 1`]
         tabIndex={0}
       >
         <span
-          aria-atomic={true}
           aria-invalid={false}
-          aria-live="polite"
           className=
               ms-Dropdown-title
               ms-Dropdown-titleIsPlaceHolder
@@ -512,9 +510,7 @@ exports[`Component Examples renders Dropdown.Required.Example.tsx correctly 1`]
       tabIndex={0}
     >
       <span
-        aria-atomic={true}
         aria-invalid={false}
-        aria-live="polite"
         className=
             ms-Dropdown-title
             ms-Dropdown-titleIsPlaceHolder
diff --git a/packages/react-examples/src/react/__snapshots__/Facepile.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Facepile.Basic.Example.tsx.shot
index 6cfb1c44bd0d67..388b5b21eba7ee 100644
--- a/packages/react-examples/src/react/__snapshots__/Facepile.Basic.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Facepile.Basic.Example.tsx.shot
@@ -1049,9 +1049,7 @@ exports[`Component Examples renders Facepile.Basic.Example.tsx correctly 1`] = `
         tabIndex={0}
       >
         <span
-          aria-atomic={true}
           aria-invalid={false}
-          aria-live="polite"
           className=
               ms-Dropdown-title
               {
diff --git a/packages/react-examples/src/react/__snapshots__/Facepile.Overflow.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Facepile.Overflow.Example.tsx.shot
index f2f48bd448b4ae..c6a4595069a4bf 100644
--- a/packages/react-examples/src/react/__snapshots__/Facepile.Overflow.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Facepile.Overflow.Example.tsx.shot
@@ -1152,9 +1152,7 @@ exports[`Component Examples renders Facepile.Overflow.Example.tsx correctly 1`]
         tabIndex={0}
       >
         <span
-          aria-atomic={true}
           aria-invalid={false}
-          aria-live="polite"
           className=
               ms-Dropdown-title
               {
diff --git a/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot
index cf98287595af88..05130a736831f9 100644
--- a/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot
@@ -4115,9 +4115,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl
           tabIndex={0}
         >
           <span
-            aria-atomic={true}
             aria-invalid={false}
-            aria-live="polite"
             className=
                 ms-Dropdown-title
                 {
diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx
index 5a98a2dbba3f4c..8d19f4cbc13218 100644
--- a/packages/react/src/components/Dropdown/Dropdown.base.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx
@@ -309,7 +309,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
       onRenderLabel = this._onRenderLabel,
       hoisted: { selectedIndices },
     } = props;
-    const { isOpen, calloutRenderEdge } = this.state;
+    const { isOpen, calloutRenderEdge, hasFocus } = this.state;
     // eslint-disable-next-line deprecation/deprecation
     const onRenderPlaceholder = props.onRenderPlaceholder || props.onRenderPlaceHolder || this._getPlaceholder;
 
@@ -381,8 +381,8 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
           <span
             id={this._optionId}
             className={this._classNames.title}
-            aria-live="polite"
-            aria-atomic={true}
+            aria-live={hasFocus ? 'polite' : undefined}
+            aria-atomic={hasFocus ? true : undefined}
             aria-invalid={hasErrorMessage}
           >
             {
diff --git a/packages/react/src/components/Dropdown/Dropdown.test.tsx b/packages/react/src/components/Dropdown/Dropdown.test.tsx
index 8f9ce4f6a64112..dd316af8cfce94 100644
--- a/packages/react/src/components/Dropdown/Dropdown.test.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.test.tsx
@@ -147,6 +147,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/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index f950491999d356..a2b32c7f96889e 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -106,9 +106,7 @@ exports[`Dropdown multi-select Renders correctly 1`] = `
     tabIndex={0}
   >
     <span
-      aria-atomic={true}
       aria-invalid={false}
-      aria-live="polite"
       className=
           ms-Dropdown-title
           ms-Dropdown-titleIsPlaceHolder
@@ -281,9 +279,7 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
     tabindex="0"
   >
     <span
-      aria-atomic="true"
       aria-invalid="false"
-      aria-live="polite"
       class=
           ms-Dropdown-title
           {
@@ -1123,9 +1119,7 @@ exports[`Dropdown single-select Renders correctly 1`] = `
     tabIndex={0}
   >
     <span
-      aria-atomic={true}
       aria-invalid={false}
-      aria-live="polite"
       className=
           ms-Dropdown-title
           ms-Dropdown-titleIsPlaceHolder
@@ -1298,9 +1292,7 @@ exports[`Dropdown single-select Renders correctly when open 1`] = `
     tabindex="0"
   >
     <span
-      aria-atomic="true"
       aria-invalid="false"
-      aria-live="polite"
       class=
           ms-Dropdown-title
           {