fix(Dropdown): add aria-live only when focused (#19667)

microsoft · Sep 9, 2021 · 86c831d · 86c831d
1 parent 5df101a
commit 86c831d
Show file tree

Hide file tree

Showing 15 changed files with 22 additions and 41 deletions.
diff --git a/change/@fluentui-react-87609c16-e599-49cf-91e0-2ac09923a565.json 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": "[email protected]",
+  "dependentChangeType": "patch"
+}
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
@@ -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/...es/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot b/...es/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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}
           >
             {

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

diff --git 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
           {
@@ -1123,9 +1119,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
@@ -1298,9 +1292,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
           {