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 <[email protected]>
microsoft · Sep 29, 2021 · 863c862 · 863c862
1 parent f05c10e
commit 863c862
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 111 deletions.
diff --git a/change/@fluentui-react-examples-23675a69-2a9a-4da5-943f-3e3570356213.json 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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@uifabric-experiments-d9e03ae5-8e76-4b6b-9b18-30ebf49552ea.json b/change/@uifabric-experiments-d9e03ae5-8e76-4b6b-9b18-30ebf49552ea.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update experiment snapshot",
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]",
+  "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
@@ -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": "[email protected]",
+  "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
@@ -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
@@ -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
@@ -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/...s/react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Basic.Example.tsx.shot b/...s/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/...ct-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Controlled.Example.tsx.shot b/...ct-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/...amples/src/office-ui-fabric-react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot b/...amples/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/...-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot b/...-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/...examples/src/office-ui-fabric-react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot b/...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/...react-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Toggles.Example.tsx.shot b/...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/...t-examples/src/office-ui-fabric-react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot b/...t-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>
 `;