[terra-clinical-onset-picker] Show visible, textual label for all for…

…m fields (#894)
cerner · Aug 12, 2023 · e34c50b · e34c50b
1 parent 0d429b9
commit e34c50b
Show file tree

Hide file tree

Showing 256 changed files with 674 additions and 92 deletions.
diff --git a/packages/terra-clinical-onset-picker/CHANGELOG.md b/packages/terra-clinical-onset-picker/CHANGELOG.md
@@ -5,6 +5,9 @@
 * Added
   * Added screenreader support to announce state and chosen/selected item in the combo box.
 
+* Changed
+  * Change labels to be shown for all fields.
+
 ## 4.34.0 - (August 2, 2023)
 
 * Changed

diff --git a/packages/terra-clinical-onset-picker/src/OnsetPicker.jsx b/packages/terra-clinical-onset-picker/src/OnsetPicker.jsx
@@ -183,11 +183,10 @@ class OnsetPicker extends React.Component {
       <SelectField
         className={cx('field-inline', 'year')}
         value={this.state.onsetDate ? this.state.onsetDate.year().toString() : undefined}
-        label={intl.formatMessage({ id: 'Terra.onsetPicker.yearLabel' })}
+        label={intl.formatMessage({ id: 'Terra.onsetPicker.year' })}
         labelAttrs={{
           id: `${id}-year-select-label`,
         }}
-        isLabelHidden
         onChange={this.changeYear}
         placeholder={intl.formatMessage({ id: 'Terra.onsetPicker.year' })}
         selectId={`${id}-year-select`}
@@ -398,8 +397,7 @@ class OnsetPicker extends React.Component {
         <SelectField
           className={cx('field-inline', 'granularity')}
           value={this.state.granularity}
-          isLabelHidden
-          label={intl.formatMessage({ id: 'Terra.onsetPicker.granularityLabel' })}
+          label={intl.formatMessage({ id: 'Terra.onsetPicker.granularity' })}
           labelAttrs={{
             id: `${this.props.id}-granularity-select-label`,
           }}
@@ -431,8 +429,7 @@ class OnsetPicker extends React.Component {
             step: 1,
           }}
           inputId={`${this.props.id}-age-input`}
-          isLabelHidden
-          label={intl.formatMessage({ id: 'Terra.onsetPicker.ageLabel' })}
+          label={intl.formatMessage({ id: 'Terra.onsetPicker.age' })}
           labelAttrs={{
             id: `${this.props.id}-age-input-label`,
           }}
@@ -444,8 +441,7 @@ class OnsetPicker extends React.Component {
         <SelectField
           className={cx('field-inline', 'age-unit')}
           defaultValue={this.state.ageUnit}
-          isLabelHidden
-          label={intl.formatMessage({ id: 'Terra.onsetPicker.agePrecisionLabel' })}
+          label={intl.formatMessage({ id: 'Terra.onsetPicker.agePrecision' })}
           labelAttrs={{
             id: `${this.props.id}-age-unit-select-label`,
           }}
@@ -466,11 +462,10 @@ class OnsetPicker extends React.Component {
           <SelectField
             className={cx('field-inline', 'month')}
             value={this.state.onsetDate ? this.state.onsetDate.month().toString() : undefined}
-            label={intl.formatMessage({ id: 'Terra.onsetPicker.monthLabel' })}
+            label={intl.formatMessage({ id: 'Terra.onsetPicker.month' })}
             labelAttrs={{
               id: `${this.props.id}-month-select-label`,
             }}
-            isLabelHidden
             onChange={this.changeMonth}
             placeholder={intl.formatMessage({ id: 'Terra.onsetPicker.month' })}
             selectId={`${this.props.id}-month-select`}
@@ -491,9 +486,8 @@ class OnsetPicker extends React.Component {
     if (this.state.granularity === GranularityOptions.DATE) {
       dateSelect = (
         <Field
-          className={cx('field-inline')}
-          isLabelHidden
-          label={intl.formatMessage({ id: 'Terra.onsetPicker.dateLabel' })}
+          className={cx('field-inline', 'date')}
+          label={intl.formatMessage({ id: 'Terra.onsetPicker.date' })}
           labelAttrs={{
             'aria-hidden': 'true',
             id: `${this.props.id}-date-input-label`,
@@ -518,11 +512,10 @@ class OnsetPicker extends React.Component {
           <SelectField
             className={cx('field-inline', 'precision')}
             defaultValue={this.state.precision}
-            label={intl.formatMessage({ id: 'Terra.onsetPicker.precisionLabel' })}
+            label={intl.formatMessage({ id: 'Terra.onsetPicker.precision' })}
             labelAttrs={{
               id: `${this.props.id}-precision-select-label`,
             }}
-            isLabelHidden
             onChange={this.changePrecision}
             placeholder={intl.formatMessage({ id: 'Terra.onsetPicker.precision' })}
             selectId={`${this.props.id}-precision-select`}

diff --git a/packages/terra-clinical-onset-picker/tests/jest/OnsetPicker.test.jsx b/packages/terra-clinical-onset-picker/tests/jest/OnsetPicker.test.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import MockDate from 'mockdate';
 import { IntlProvider } from 'react-intl';
+/* eslint-disable-next-line import/no-extraneous-dependencies */
+import { shallowWithIntl } from 'terra-enzyme-intl';
 import selectMessages from 'terra-form-select/translations/en-US.json';
 import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider';
 import OnsetPicker from '../../lib/OnsetPicker';
@@ -100,6 +102,56 @@ it('should render only the supplied precisions', () => {
   expect(render(onsetPicker)).toMatchSnapshot();
 });
 
+it('should render Clinical Onset picker with the correct label for precision, granularity and age', () => {
+  const wrapper = shallowWithIntl(
+    <OnsetPicker
+      ageUnit="years"
+      birthdate="2011-08-16"
+      granularity="age"
+      id="test"
+      precision="before"
+      onsetDate="2014-08-16"
+    />,
+  ).dive();
+
+  expect(wrapper.find('.precision').prop('label')).toEqual('Terra.onsetPicker.precision');
+  expect(wrapper.find('.granularity').prop('label')).toEqual('Terra.onsetPicker.granularity');
+  expect(wrapper.find('.age').prop('label')).toEqual('Terra.onsetPicker.age');
+  expect(wrapper.find('.age-unit').prop('label')).toEqual('Terra.onsetPicker.agePrecision');
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+it('should render Clinical Onset picker with the correct label for month and year', () => {
+  const wrapper = shallowWithIntl(
+    <OnsetPicker
+      birthdate="2011-08-16"
+      granularity="month"
+      id="test"
+      precision="before"
+    />,
+  ).dive();
+
+  expect(wrapper.find('.month').prop('label')).toEqual('Terra.onsetPicker.month');
+  expect(wrapper.find('.year').prop('label')).toEqual('Terra.onsetPicker.year');
+  expect(wrapper).toMatchSnapshot();
+});
+
+it('should render Clinical Onset picker with the correct label for date', () => {
+  const wrapper = shallowWithIntl(
+    <OnsetPicker
+      birthdate="2011-08-16"
+      granularity="date"
+      id="test"
+      precision="before"
+      onsetDate="2014-08-16"
+    />,
+  ).dive();
+
+  expect(wrapper.find('.date').prop('label')).toEqual('Terra.onsetPicker.date');
+  expect(wrapper).toMatchSnapshot();
+});
+
 it('correctly applies the theme context className', () => {
   const tabs = render(
     <ThemeContextProvider theme={{ className: 'orion-fusion-theme' }}>