onset a11y VO fix

cerner · Dec 22, 2023 · f44c62e · f44c62e
1 parent 3fbfa21
commit f44c62e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 201 deletions.
diff --git a/packages/terra-clinical-onset-picker/package.json b/packages/terra-clinical-onset-picker/package.json
@@ -37,7 +37,7 @@
     "terra-breakpoints": "^2.0.0",
     "terra-date-picker": "^4.73.1",
     "terra-form-field": "^4.25.0",
-    "terra-form-fieldset": "2.64.0",
+    "terra-form-fieldset": "^2.64.0",
     "terra-form-input": "4.15.0",
     "terra-form-select": "^6.40.0",
     "terra-theme-context": "^1.0.0"

diff --git a/packages/terra-clinical-onset-picker/src/OnsetPicker.jsx b/packages/terra-clinical-onset-picker/src/OnsetPicker.jsx
@@ -518,7 +518,7 @@ class OnsetPicker extends React.Component {
 
     return (
       <div id={this.props.id} {...customProps}>
-        <FieldSet className={cx('fieldset', theme.className)} legend={legend} isLegendHidden={isLegendHidden}>
+        <FieldSet className={cx('fieldset', theme.className)} legend={legend} isLegendHidden={isLegendHidden} legendAttrs={{ 'aria-hidden': 'true' }}>
           {/* Precision */}
           <SelectField
             className={cx('field-inline', 'precision')}
@@ -530,6 +530,7 @@ class OnsetPicker extends React.Component {
             onChange={this.changePrecision}
             placeholder={intl.formatMessage({ id: 'Terra.onsetPicker.precision' })}
             selectId={`${this.props.id}-precision-select`}
+            help={legend}
           >
             {OnsetUtils.allowedPrecisions(intl, this.props.precisionSet)
               .map(precisionEntry => <SelectField.Option value={precisionEntry.value} display={precisionEntry.display} key={precisionEntry.value} />)}
@@ -538,7 +539,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}

diff --git a/packages/terra-clinical-onset-picker/tests/jest/OnsetPicker.test.jsx b/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' }}>

diff --git a/packages/terra-clinical-onset-picker/tests/jest/__snapshots__/OnsetPicker.test.jsx.snap b/packages/terra-clinical-onset-picker/tests/jest/__snapshots__/OnsetPicker.test.jsx.snap
@@ -201,192 +201,25 @@ 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"
 >
   <Fieldset
     className="fieldset"
     isLegendHidden={false}
-    legendAttrs={Object {}}
+    legendAttrs={
+      Object {
+        "aria-hidden": "true",
+      }
+    }
     required={false}
   >
     <InjectIntl(SelectField)
@@ -472,7 +305,6 @@ exports[`should render Clinical Onset picker with the correct label for date 1`]
       />
     </InjectIntl(SelectField)>
     <div
-      aria-live="polite"
       id="dynamic_content"
     >
       <Field
@@ -520,7 +352,11 @@ exports[`should render Clinical Onset picker with the correct label for month an
   <Fieldset
     className="fieldset"
     isLegendHidden={false}
-    legendAttrs={Object {}}
+    legendAttrs={
+      Object {
+        "aria-hidden": "true",
+      }
+    }
     required={false}
   >
     <InjectIntl(SelectField)
@@ -606,7 +442,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)
@@ -763,7 +598,11 @@ exports[`should render Clinical Onset picker with the correct label for precisio
   <Fieldset
     className="fieldset"
     isLegendHidden={false}
-    legendAttrs={Object {}}
+    legendAttrs={
+      Object {
+        "aria-hidden": "true",
+      }
+    }
     required={false}
   >
     <InjectIntl(SelectField)
@@ -849,7 +688,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 +965,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 +1282,6 @@ exports[`should render only the supplied precisions 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         id="dynamic_content"
       />
     </div>
@@ -1654,7 +1490,6 @@ exports[`should render the same when onChange function is supplied 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         id="dynamic_content"
       />
     </div>
@@ -1861,7 +1696,6 @@ exports[`should render with age inputs filled in when supplied 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         id="dynamic_content"
       >
         <div
@@ -2209,7 +2043,6 @@ exports[`should render with non default inputs when supplied 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         id="dynamic_content"
       >
         <div