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

microsoft · Sep 29, 2021 · 00bc797 · 00bc797
1 parent 8e804cd
commit 00bc797
Show file tree

Hide file tree

Showing 9 changed files with 6 additions and 102 deletions.
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>
 `;