[terra-clinical-onset-picker] Fixes screen reader issues

packages/terra-clinical-onset-picker/CHANGELOG.md

@@ -5,6 +5,9 @@
 * Added
   * Added required prop to mark fields as required based on granularity.
 
+* Fixed
+  * Fixed screen reader issues related to repetitive announcements.
+
 ## 4.36.0 - (September 21, 2023)
 
 * Added

packages/terra-clinical-onset-picker/src/OnsetPicker.jsx

@@ -538,7 +538,7 @@ class OnsetPicker extends React.Component {
           {granularitySelect}
 
           {(this.state.precision !== PrecisionOptions.UNKNOWN) && (
-            <div id="dynamic_content" aria-live="polite">
+            <div id="dynamic_content">
               {ageInput}
               {ageUnitSelect}
               {monthSelect}

packages/terra-clinical-onset-picker/tests/jest/OnsetPicker.test.jsx

@@ -152,22 +152,6 @@ it('should render Clinical Onset picker with the correct label for date', () =>
   expect(wrapper).toMatchSnapshot();
 });
 
-it('should render Clinical Onset picker with the aria-live region', () => {
-  const wrapper = shallowWithIntl(
-    <OnsetPicker
-      ageUnit="years"
-      birthdate="2011-08-16"
-      granularity="age"
-      id="test"
-      precision="before"
-      onsetDate="2014-08-16"
-    />,
-  ).dive();
-
-  expect(wrapper.find('#dynamic_content').prop('aria-live')).toEqual('polite');
-  expect(wrapper).toMatchSnapshot();
-});
-
 it('correctly applies the theme context className', () => {
   const tabs = render(
     <ThemeContextProvider theme={{ className: 'orion-fusion-theme' }}>

packages/terra-clinical-onset-picker/tests/jest/__snapshots__/OnsetPicker.test.jsx.snap

@@ -201,184 +201,13 @@ exports[`correctly applies the theme context className 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         id="dynamic_content"
       />
     </div>
   </fieldset>
 </div>
 `;
 
-exports[`should render Clinical Onset picker with the aria-live region 1`] = `
-<div
-  id="test"
->
-  <Fieldset
-    className="fieldset"
-    isLegendHidden={false}
-    legendAttrs={Object {}}
-    required={false}
-  >
-    <InjectIntl(SelectField)
-      className="field-inline precision"
-      defaultValue="before"
-      label="Terra.onsetPicker.precision"
-      labelAttrs={
-        Object {
-          "id": "test-precision-select-label",
-        }
-      }
-      onChange={[Function]}
-      placeholder="Terra.onsetPicker.precision"
-      selectId="test-precision-select"
-    >
-      <Option
-        disabled={false}
-        display="Terra.onsetPicker.precisionOnAt"
-        key="on/at"
-        value="on/at"
-      />
-      <Option
-        disabled={false}
-        display="Terra.onsetPicker.precisionAbout"
-        key="about"
-        value="about"
-      />
-      <Option
-        disabled={false}
-        display="Terra.onsetPicker.precisionBefore"
-        key="before"
-        value="before"
-      />
-      <Option
-        disabled={false}
-        display="Terra.onsetPicker.precisionAfter"
-        key="after"
-        value="after"
-      />
-      <Option
-        disabled={false}
-        display="Terra.onsetPicker.precisionUnknown"
-        key="unknown"
-        value="unknown"
-      />
-    </InjectIntl(SelectField)>
-    <InjectIntl(SelectField)
-      className="field-inline granularity"
-      label="Terra.onsetPicker.granularity"
-      labelAttrs={
-        Object {
-          "id": "test-granularity-select-label",
-        }
-      }
-      onChange={[Function]}
-      placeholder="Terra.onsetPicker.granularity"
-      selectId="test-granularity-select"
-      value="age"
-    >
-      <Option
-        disabled={false}
-        display="Terra.onsetPicker.age"
-        key="age"
-        value="age"
-      />
-      <Option
-        disabled={false}
-        display="Terra.onsetPicker.year"
-        key="year"
-        value="year"
-      />
-      <Option
-        disabled={false}
-        display="Terra.onsetPicker.month"
-        key="month"
-        value="month"
-      />
-      <Option
-        disabled={false}
-        display="Terra.onsetPicker.date"
-        key="date"
-        value="date"
-      />
-    </InjectIntl(SelectField)>
-    <div
-      aria-live="polite"
-      id="dynamic_content"
-    >
-      <InputField
-        className="field-inline age"
-        defaultValue={3}
-        disabled={false}
-        error={null}
-        errorIcon={
-          <IconError
-            viewBox="0 0 48 48"
-            xmlns="http://www.w3.org/2000/svg"
-          />
-        }
-        help={null}
-        hideRequired={false}
-        inputAttrs={
-          Object {
-            "max": 6,
-            "min": 0,
-            "step": 1,
-            "type": "number",
-          }
-        }
-        inputId="test-age-input"
-        isIncomplete={false}
-        isInline={false}
-        isInvalid={false}
-        isLabelHidden={false}
-        label="Terra.onsetPicker.age"
-        labelAttrs={
-          Object {
-            "id": "test-age-input-label",
-          }
-        }
-        onChange={[Function]}
-        required={false}
-        showOptional={false}
-      />
-      <InjectIntl(SelectField)
-        className="field-inline age-unit"
-        defaultValue="years"
-        label="Terra.onsetPicker.agePrecision"
-        labelAttrs={
-          Object {
-            "id": "test-age-unit-select-label",
-          }
-        }
-        onChange={[Function]}
-        placeholder="Terra.onsetPicker.agePrecision"
-        required={false}
-        selectId="test-age-unit-select"
-      >
-        <Option
-          disabled={false}
-          display="Terra.onsetPicker.agePrecisionWeek"
-          key="weeks"
-          value="weeks"
-        />
-        <Option
-          disabled={false}
-          display="Terra.onsetPicker.agePrecisionMonth"
-          key="months"
-          value="months"
-        />
-        <Option
-          disabled={false}
-          display="Terra.onsetPicker.agePrecisionYear"
-          key="years"
-          value="years"
-        />
-      </InjectIntl(SelectField)>
-    </div>
-  </Fieldset>
-</div>
-`;
-
 exports[`should render Clinical Onset picker with the correct label for date 1`] = `
 <div
   id="test"
@@ -472,7 +301,6 @@ exports[`should render Clinical Onset picker with the correct label for date 1`]
       />
     </InjectIntl(SelectField)>
     <div
-      aria-live="polite"
       id="dynamic_content"
     >
       <Field
@@ -606,7 +434,6 @@ exports[`should render Clinical Onset picker with the correct label for month an
       />
     </InjectIntl(SelectField)>
     <div
-      aria-live="polite"
       id="dynamic_content"
     >
       <InjectIntl(SelectField)
@@ -849,7 +676,6 @@ exports[`should render Clinical Onset picker with the correct label for precisio
       />
     </InjectIntl(SelectField)>
     <div
-      aria-live="polite"
       id="dynamic_content"
     >
       <InputField
@@ -1127,7 +953,6 @@ exports[`should render a default onset picker with specified onset date 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         id="dynamic_content"
       />
     </div>
@@ -1445,7 +1270,6 @@ exports[`should render only the supplied precisions 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         id="dynamic_content"
       />
     </div>
@@ -1654,7 +1478,6 @@ exports[`should render the same when onChange function is supplied 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         id="dynamic_content"
       />
     </div>
@@ -1861,7 +1684,6 @@ exports[`should render with age inputs filled in when supplied 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         id="dynamic_content"
       >
         <div
@@ -2209,7 +2031,6 @@ exports[`should render with non default inputs when supplied 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         id="dynamic_content"
       >
         <div