From 3dc0b0b2f066d76fb66802785fc1c893fee131ef Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Tue, 7 Sep 2021 10:56:32 -0700
Subject: [PATCH 1/4] only set live region on Dropdown when focused

---
 packages/react/src/components/Dropdown/Dropdown.base.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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

From 4d05f2c15d746c8f78b2ad3f4a3e63db9b41109d Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Tue, 7 Sep 2021 11:24:31 -0700
Subject: [PATCH 2/4] update snapshots

---
 .../__snapshots__/ChoiceGroup.Custom.Example.tsx.shot     | 2 --
 .../DetailsList.CustomGroupHeaders.Example.tsx.shot       | 2 --
 .../react/__snapshots__/Dropdown.Basic.Example.tsx.shot   | 6 ------
 .../__snapshots__/Dropdown.Controlled.Example.tsx.shot    | 2 --
 .../Dropdown.ControlledMulti.Example.tsx.shot             | 2 --
 .../react/__snapshots__/Dropdown.Custom.Example.tsx.shot  | 4 ----
 .../react/__snapshots__/Dropdown.Error.Example.tsx.shot   | 2 --
 .../__snapshots__/Dropdown.Required.Example.tsx.shot      | 4 ----
 .../react/__snapshots__/Facepile.Basic.Example.tsx.shot   | 2 --
 .../__snapshots__/Facepile.Overflow.Example.tsx.shot      | 2 --
 .../ResizeGroup.OverflowSet.Example.tsx.shot              | 2 --
 .../Dropdown/__snapshots__/Dropdown.test.tsx.snap         | 8 --------
 12 files changed, 38 deletions(-)

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 d4ae65bd52b215..9f917d9d44fe43 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/__snapshots__/Dropdown.test.tsx.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index da82a379ba9585..a03b61f48e210a 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
           {
@@ -1125,9 +1121,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
@@ -1300,9 +1294,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
           {

From 1c48b43e2fb238146397f7d8fe733aaec357a289 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Tue, 7 Sep 2021 11:27:09 -0700
Subject: [PATCH 3/4] Change files

---
 ...luentui-react-87609c16-e599-49cf-91e0-2ac09923a565.json | 7 +++++++
 1 file changed, 7 insertions(+)
 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"
+}

From 50f956186011915a4d03138a53313507e0a94d04 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Wed, 8 Sep 2021 16:42:58 -0700
Subject: [PATCH 4/4] added a test for aria-live on focus

---
 .../react/src/components/Dropdown/Dropdown.test.tsx  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

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');