From 863c86228a929d379df3a0b0defd1f6d9044a680 Mon Sep 17 00:00:00 2001
From: "Geoff Cox (Microsoft)" <gcox@microsoft.com>
Date: Wed, 29 Sep 2021 14:12:57 -0700
Subject: [PATCH] Port 'Updated ComboBox error to have role="alert"' to 7.0
 (#20032)

* Port 'Updated ComboBox error to have role="alert" (#20013)' to 7.0

* Change files

* Update experiment snapshot

* Change files

Co-authored-by: GeoffCox <geoff.cox@live.com>
---
 ...s-23675a69-2a9a-4da5-943f-3e3570356213.json |  7 +++++++
 ...s-d9e03ae5-8e76-4b6b-9b18-30ebf49552ea.json |  7 +++++++
 ...t-5309a23c-12d1-4ee2-abb8-37e91b422075.json |  7 +++++++
 .../__snapshots__/Pagination.test.tsx.snap     |  9 ---------
 .../src/components/ComboBox/ComboBox.tsx       | 14 +++++---------
 .../__snapshots__/ComboBox.test.tsx.snap       | 18 ------------------
 .../ComboBox.Basic.Example.tsx.shot            |  9 ---------
 .../ComboBox.Controlled.Example.tsx.shot       |  9 ---------
 .../ComboBox.ControlledMulti.Example.tsx.shot  |  9 ---------
 .../ComboBox.CustomStyled.Example.tsx.shot     | 18 ------------------
 .../ComboBox.ErrorHandling.Example.tsx.shot    | 13 +------------
 .../ComboBox.Toggles.Example.tsx.shot          |  9 ---------
 .../ComboBox.Virtualized.Example.tsx.shot      |  9 ---------
 13 files changed, 27 insertions(+), 111 deletions(-)
 create mode 100644 change/@fluentui-react-examples-23675a69-2a9a-4da5-943f-3e3570356213.json
 create mode 100644 change/@uifabric-experiments-d9e03ae5-8e76-4b6b-9b18-30ebf49552ea.json
 create mode 100644 change/office-ui-fabric-react-5309a23c-12d1-4ee2-abb8-37e91b422075.json

diff --git a/change/@fluentui-react-examples-23675a69-2a9a-4da5-943f-3e3570356213.json b/change/@fluentui-react-examples-23675a69-2a9a-4da5-943f-3e3570356213.json
new file mode 100644
index 0000000000000..ccbcb84c41dfd
--- /dev/null
+++ b/change/@fluentui-react-examples-23675a69-2a9a-4da5-943f-3e3570356213.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Port 'Updated ComboBox error to have role=\"alert\" (#20013)' to 7.0",
+  "packageName": "@fluentui/react-examples",
+  "email": "geoff.cox@live.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@uifabric-experiments-d9e03ae5-8e76-4b6b-9b18-30ebf49552ea.json b/change/@uifabric-experiments-d9e03ae5-8e76-4b6b-9b18-30ebf49552ea.json
new file mode 100644
index 0000000000000..e03c7eb0b0253
--- /dev/null
+++ b/change/@uifabric-experiments-d9e03ae5-8e76-4b6b-9b18-30ebf49552ea.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update experiment snapshot",
+  "packageName": "@uifabric/experiments",
+  "email": "geoff.cox@live.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/office-ui-fabric-react-5309a23c-12d1-4ee2-abb8-37e91b422075.json b/change/office-ui-fabric-react-5309a23c-12d1-4ee2-abb8-37e91b422075.json
new file mode 100644
index 0000000000000..c6b460ea219d6
--- /dev/null
+++ b/change/office-ui-fabric-react-5309a23c-12d1-4ee2-abb8-37e91b422075.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Port 'Updated ComboBox error to have role=\"alert\" (#20013)' to 7.0",
+  "packageName": "office-ui-fabric-react",
+  "email": "geoff.cox@live.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
index fb1881786f11a..a703c708d04c6 100644
--- a/packages/experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -1710,15 +1710,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-live="polite"
-      className=""
-      id="ComboBox6-error"
-      role="region"
-    >
-      
-    </div>
   </div>
   <button
     aria-label="next page"
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
index 1c55e4d1b6163..47bec7d8c0de3 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
@@ -421,15 +421,11 @@ export class ComboBox extends React.Component<IComboBoxProps, IComboBoxState> {
             },
             this._onRenderContainer,
           )}
-        <div
-          role="region"
-          aria-live="polite"
-          aria-atomic="true"
-          id={errorMessageId}
-          className={hasErrorMessage ? this._classNames.errorMessage : ''}
-        >
-          {errorMessage !== undefined ? errorMessage : ''}
-        </div>
+        {hasErrorMessage && (
+          <div role="alert" id={errorMessageId} className={this._classNames.errorMessage}>
+            {errorMessage}
+          </div>
+        )}
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
index 480004591e97f..a91f7e836a91f 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
@@ -360,15 +360,6 @@ exports[`ComboBox Renders correctly 1`] = `
       </span>
     </button>
   </div>
-  <div
-    aria-atomic="true"
-    aria-live="polite"
-    className=""
-    id="ComboBox0-error"
-    role="region"
-  >
-    
-  </div>
 </div>
 `;
 
@@ -735,14 +726,5 @@ exports[`ComboBox renders with a Keytip correctly 1`] = `
       </span>
     </button>
   </div>
-  <div
-    aria-atomic="true"
-    aria-live="polite"
-    className=""
-    id="ComboBox0-error"
-    role="region"
-  >
-    
-  </div>
 </div>
 `;
diff --git a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Basic.Example.tsx.shot b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Basic.Example.tsx.shot
index 99b74d50964b2..0805219722c1d 100644
--- a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Basic.Example.tsx.shot
+++ b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Basic.Example.tsx.shot
@@ -390,15 +390,6 @@ exports[`Component Examples renders ComboBox.Basic.Example.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-live="polite"
-      className=""
-      id="ComboBox0-error"
-      role="region"
-    >
-      
-    </div>
   </div>
   <button
     className=
diff --git a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Controlled.Example.tsx.shot b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Controlled.Example.tsx.shot
index a7d9d28f6349d..aeb7c00c5da05 100644
--- a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Controlled.Example.tsx.shot
+++ b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Controlled.Example.tsx.shot
@@ -394,14 +394,5 @@ exports[`Component Examples renders ComboBox.Controlled.Example.tsx correctly 1`
       </span>
     </button>
   </div>
-  <div
-    aria-atomic="true"
-    aria-live="polite"
-    className=""
-    id="ComboBox0-error"
-    role="region"
-  >
-    
-  </div>
 </div>
 `;
diff --git a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot
index 9df9b805d88a6..d570e406c219d 100644
--- a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot
+++ b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot
@@ -415,14 +415,5 @@ exports[`Component Examples renders ComboBox.ControlledMulti.Example.tsx correct
       </span>
     </button>
   </div>
-  <div
-    aria-atomic="true"
-    aria-live="polite"
-    className=""
-    id="ComboBox0-error"
-    role="region"
-  >
-    
-  </div>
 </div>
 `;
diff --git a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot
index 95c279320bde2..6cf3d867ea62a 100644
--- a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot
+++ b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot
@@ -420,15 +420,6 @@ exports[`Component Examples renders ComboBox.CustomStyled.Example.tsx correctly
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-live="polite"
-      className=""
-      id="ComboBox0-error"
-      role="region"
-    >
-      
-    </div>
   </div>
   <div
     className="ms-ComboBox-container "
@@ -818,15 +809,6 @@ exports[`Component Examples renders ComboBox.CustomStyled.Example.tsx correctly
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-live="polite"
-      className=""
-      id="ComboBox4-error"
-      role="region"
-    >
-      
-    </div>
   </div>
 </div>
 `;
diff --git a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot
index 4b9294a73d290..aa06eeef8716b 100644
--- a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot
+++ b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot
@@ -327,8 +327,6 @@ exports[`Component Examples renders ComboBox.ErrorHandling.Example.tsx correctly
       </button>
     </div>
     <div
-      aria-atomic="true"
-      aria-live="polite"
       className=
 
           {
@@ -341,7 +339,7 @@ exports[`Component Examples renders ComboBox.ErrorHandling.Example.tsx correctly
             margin-top: 5px;
           }
       id="ComboBox0-error"
-      role="region"
+      role="alert"
     >
       Oh no! This ComboBox has an error!
     </div>
@@ -734,15 +732,6 @@ exports[`Component Examples renders ComboBox.ErrorHandling.Example.tsx correctly
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-live="polite"
-      className=""
-      id="ComboBox4-error"
-      role="region"
-    >
-      
-    </div>
   </div>
 </div>
 `;
diff --git a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Toggles.Example.tsx.shot b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Toggles.Example.tsx.shot
index 0fc6a836be7d6..0133c239a5b1d 100644
--- a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Toggles.Example.tsx.shot
+++ b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Toggles.Example.tsx.shot
@@ -417,15 +417,6 @@ exports[`Component Examples renders ComboBox.Toggles.Example.tsx correctly 1`] =
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-live="polite"
-      className=""
-      id="ComboBox0-error"
-      role="region"
-    >
-      
-    </div>
   </div>
   <div
     className=
diff --git a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot
index 0375eb52eb1c6..3b62bfa014be8 100644
--- a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot
+++ b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot
@@ -412,15 +412,6 @@ exports[`Component Examples renders ComboBox.Virtualized.Example.tsx correctly 1
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-live="polite"
-      className=""
-      id="ComboBox0-error"
-      role="region"
-    >
-      
-    </div>
   </div>
 </div>
 `;