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

* Updated error to be role alert * Change files * Updated snapshot in react-experiments * Change files
microsoft · Sep 29, 2021 · e726d8b · e726d8b
1 parent 94916b2
commit e726d8b
Show file tree

Hide file tree

Showing 15 changed files with 20 additions and 186 deletions.
diff --git a/change/@fluentui-react-814bb693-05b1-4c4b-9b33-a4695b4bf333.json b/change/@fluentui-react-814bb693-05b1-4c4b-9b33-a4695b4bf333.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated error to be role alert",
+  "packageName": "@fluentui/react",
+  "email": "gcox@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-experiments-d2d23199-aaa3-4462-9e1c-6466930b4b33.json b/change/@fluentui-react-experiments-d2d23199-aaa3-4462-9e1c-6466930b4b33.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated experiment snapshot that uses ComboBox",
+  "packageName": "@fluentui/react-experiments",
+  "email": "gcox@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Basic.Example.tsx.shot
@@ -398,15 +398,6 @@ exports[`Component Examples renders ComboBox.Basic.Example.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox0-error"
-      role="region"
-    >
-
-    </div>
   </div>
   <button
     className=
@@ -963,15 +954,6 @@ exports[`Component Examples renders ComboBox.Basic.Example.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox7-error"
-      role="region"
-    >
-
-    </div>
   </div>
 </div>
 `;
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Controlled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Controlled.Example.tsx.shot
@@ -418,15 +418,6 @@ exports[`Component Examples renders ComboBox.Controlled.Example.tsx correctly 1`
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox0-error"
-      role="region"
-    >
-
-    </div>
   </div>
   <div
     className=

diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.ControlledMulti.Example.tsx.shot
@@ -440,15 +440,6 @@ exports[`Component Examples renders ComboBox.ControlledMulti.Example.tsx correct
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox0-error"
-      role="region"
-    >
-
-    </div>
   </div>
   <div
     className=

diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.CustomStyled.Example.tsx.shot
@@ -418,15 +418,6 @@ exports[`Component Examples renders ComboBox.CustomStyled.Example.tsx correctly
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox0-error"
-      role="region"
-    >
-
-    </div>
   </div>
   <div
     className="ms-ComboBox-container "
@@ -824,15 +815,6 @@ exports[`Component Examples renders ComboBox.CustomStyled.Example.tsx correctly
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox4-error"
-      role="region"
-    >
-
-    </div>
   </div>
 </div>
 `;
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.ErrorHandling.Example.tsx.shot
@@ -355,8 +355,6 @@ exports[`Component Examples renders ComboBox.ErrorHandling.Example.tsx correctly
       </button>
     </div>
     <div
-      aria-atomic="true"
-      aria-live="polite"
       className=
 
           {
@@ -369,7 +367,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>
@@ -770,15 +768,6 @@ exports[`Component Examples renders ComboBox.ErrorHandling.Example.tsx correctly
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox4-error"
-      role="region"
-    >
-
-    </div>
   </div>
 </div>
 `;
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Inline.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Inline.Example.tsx.shot
@@ -398,15 +398,6 @@ exports[`Component Examples renders ComboBox.Inline.Example.tsx correctly 1`] =
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox0-error"
-      role="region"
-    >
-
-    </div>
   </div>
   <div
     style={

diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.SelectAll.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.SelectAll.Example.tsx.shot
@@ -420,15 +420,6 @@ exports[`Component Examples renders ComboBox.SelectAll.Example.tsx correctly 1`]
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox0-error"
-      role="region"
-    >
-
-    </div>
   </div>
   <div
     className="ms-ComboBox-container "
@@ -848,15 +839,6 @@ exports[`Component Examples renders ComboBox.SelectAll.Example.tsx correctly 1`]
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox4-error"
-      role="region"
-    >
-
-    </div>
   </div>
 </div>
 `;
diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Toggles.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Toggles.Example.tsx.shot
@@ -418,15 +418,6 @@ exports[`Component Examples renders ComboBox.Toggles.Example.tsx correctly 1`] =
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox0-error"
-      role="region"
-    >
-
-    </div>
   </div>
   <div
     className=

diff --git a/packages/react-examples/src/react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ComboBox.Virtualized.Example.tsx.shot
@@ -397,14 +397,5 @@ exports[`Component Examples renders ComboBox.Virtualized.Example.tsx correctly 1
       </span>
     </button>
   </div>
-  <div
-    aria-atomic="true"
-    aria-hidden={true}
-    aria-live="polite"
-    id="ComboBox0-error"
-    role="region"
-  >
-
-  </div>
 </div>
 `;
diff --git a/packages/react-examples/src/react/__snapshots__/TimePicker.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/TimePicker.Example.tsx.shot
@@ -421,15 +421,6 @@ exports[`Component Examples renders TimePicker.Example.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox0-error"
-      role="region"
-    >
-
-    </div>
   </div>
   <div
     className="ms-ComboBox-container "
@@ -829,15 +820,6 @@ exports[`Component Examples renders TimePicker.Example.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox4-error"
-      role="region"
-    >
-
-    </div>
   </div>
   <div
     className="ms-ComboBox-container "
@@ -1237,15 +1219,6 @@ exports[`Component Examples renders TimePicker.Example.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox8-error"
-      role="region"
-    >
-
-    </div>
   </div>
 </div>
 `;
diff --git a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -1718,15 +1718,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
         </span>
       </button>
     </div>
-    <div
-      aria-atomic="true"
-      aria-hidden={true}
-      aria-live="polite"
-      id="ComboBox6-error"
-      role="region"
-    >
-      
-    </div>
   </div>
   <button
     aria-label="next page"

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -464,15 +464,11 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
             },
             this._onRenderContainer,
           )}
-        <div
-          role="region"
-          aria-live="polite"
-          aria-atomic="true"
-          id={errorMessageId}
-          {...(hasErrorMessage ? { className: this._classNames.errorMessage } : { 'aria-hidden': true })}
-        >
-          {errorMessage !== undefined ? errorMessage : ''}
-        </div>
+        {hasErrorMessage && (
+          <div role="alert" id={errorMessageId} className={this._classNames.errorMessage}>
+            {errorMessage}
+          </div>
+        )}
       </div>
     );
   }

diff --git a/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
@@ -367,15 +367,6 @@ exports[`ComboBox Renders correctly 1`] = `
       </span>
     </button>
   </div>
-  <div
-    aria-atomic="true"
-    aria-hidden={true}
-    aria-live="polite"
-    id="ComboBox0-error"
-    role="region"
-  >
-    
-  </div>
 </div>
 `;
 
@@ -1136,13 +1127,6 @@ exports[`ComboBox Renders correctly when open 1`] = `
       </div>
     </div>
   </span>
-  <div
-    aria-atomic="true"
-    aria-hidden="true"
-    aria-live="polite"
-    id="ComboBox0-error"
-    role="region"
-  />
 </div>
 `;
 
@@ -2012,13 +1996,6 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
       </div>
     </div>
   </span>
-  <div
-    aria-atomic="true"
-    aria-hidden="true"
-    aria-live="polite"
-    id="ComboBox0-error"
-    role="region"
-  />
 </div>
 `;
 
@@ -2364,12 +2341,5 @@ exports[`ComboBox renders with a Keytip correctly 1`] = `
       </span>
     </button>
   </div>
-  <div
-    aria-atomic="true"
-    aria-hidden="true"
-    aria-live="polite"
-    id="ComboBox0-error"
-    role="region"
-  />
 </div>
 `;