[Terra-Date-Time-Picker] - Added visual focus dashed border and SR fix (

#2035) Co-authored-by: PK106552 <[email protected]>
cerner · Feb 22, 2024 · 3c4a604 · 3c4a604
1 parent 1d4b562
commit 3c4a604
Show file tree

Hide file tree

Showing 178 changed files with 289 additions and 98 deletions.
diff --git a/packages/terra-date-picker/CHANGELOG.md b/packages/terra-date-picker/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+* Added
+  * Added visual focus dashed border for `terra-date-picker`.
+  * Removed selected date information on focus of picker button.
+  * Added ariaDescribedBy prop in `terra-date-time-picker` example for invalid error message.
+
 * Changed
   * Fixed the invalid case for SR announcement.
   * Changed the SR announcement for changing date from calender.

diff --git a/packages/terra-date-picker/src/DateInput.jsx b/packages/terra-date-picker/src/DateInput.jsx
@@ -143,6 +143,12 @@ const propTypes = {
    * A return value of true will be enabled and false will be disabled.
    */
   filterDate: PropTypes.func,
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue).
+   * If invalid error text is used, provide a string containing the IDs for error html element.
+   * ID must be htmlFor prop value with error text.
+   */
+  errorId: PropTypes.string,
 };
 
 const defaultProps = {
@@ -167,6 +173,7 @@ const defaultProps = {
   maxDate: '2100-12-31',
   minDate: '1900-01-01',
   filterDate: undefined,
+  errorId: '',
 };
 
 const DatePickerInput = (props) => {
@@ -195,6 +202,7 @@ const DatePickerInput = (props) => {
     maxDate,
     minDate,
     filterDate,
+    errorId,
     ...customProps
   } = props;
 
@@ -717,7 +725,7 @@ const DatePickerInput = (props) => {
       aria-invalid={isInvalid}
       aria-required={required}
       aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })}`}
-      aria-describedby={ariaDescriptionIds}
+      aria-describedby={`${ariaDescriptionIds} ${errorId}`}
       id={dayInputId}
     />
   );
@@ -749,7 +757,7 @@ const DatePickerInput = (props) => {
       aria-invalid={isInvalid}
       aria-required={required}
       aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })}`}
-      aria-describedby={ariaDescriptionIds}
+      aria-describedby={`${ariaDescriptionIds} ${errorId}`}
       id={monthInputId}
     />
   );
@@ -781,7 +789,7 @@ const DatePickerInput = (props) => {
       aria-invalid={isInvalid}
       aria-required={required}
       aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })}`}
-      aria-describedby={ariaDescriptionIds}
+      aria-describedby={`${ariaDescriptionIds} ${errorId}`}
       id={yearInputId}
     />
   );
@@ -808,6 +816,7 @@ const DatePickerInput = (props) => {
   if (DateUtil.isValidDate(value, momentDateFormat)) {
     inputDate = `${getLocalizedDateForScreenReader(DateUtil.createSafeDate(dateValue, initialTimeZone), { intl, locale: intl.locale })}`;
   }
+
   let calendarDate = inputDate ? `${inputDate} ${intl.formatMessage({ id: 'Terra.datePicker.selected' })}` : '';
 
   // Check if date is excluded or out of range or not included or filtered
@@ -873,7 +882,7 @@ const DatePickerInput = (props) => {
             aria-live={DateUtil.isMac() ? 'polite' : 'off'}
             text={`${invalidEntry}
             ${intl.formatMessage({ id: 'Terra.datePicker.dateFormatLabel' })}
-            ${format}. ${inputDate ? `${inputDate},` : ''} ${intl.formatMessage({ id: 'Terra.datePicker.hotKey' })} `}
+            ${format}. ${inputDate ? `${inputDate},` : ''} ${intl.formatMessage({ id: 'Terra.datePicker.hotKey' })}, `}
           />
           <div aria-hidden="true">
             {`(${format})`}

diff --git a/packages/terra-date-picker/src/DatePicker.jsx b/packages/terra-date-picker/src/DatePicker.jsx
@@ -141,6 +141,12 @@ const propTypes = {
    * The value must be in the `YYYY-MM-DD` format or the all-numeric date format based on the locale.
    */
   value: PropTypes.string,
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue).
+   * If invalid error text is used, provide a string containing the IDs for error html element.
+   * ID must be htmlFor prop value with error text.
+   */
+  errorId: PropTypes.string,
 };
 
 const defaultProps = {
@@ -165,6 +171,7 @@ const defaultProps = {
   useExternalFormatMask: false,
   required: false,
   selectedDate: undefined,
+  errorId: '',
 };
 
 class DatePicker extends React.Component {
@@ -427,6 +434,7 @@ class DatePicker extends React.Component {
       selectedDate,
       useExternalFormatMask,
       value,
+      errorId,
       ...customProps
     } = this.props;
 
@@ -506,6 +514,7 @@ class DatePicker extends React.Component {
                 maxDate={maxDate}
                 minDate={minDate}
                 filterDate={this.handleFilterDate}
+                errorId={errorId}
               />
             )}
             customInputRef="firstInputRefCallback"

diff --git a/packages/terra-date-picker/src/DatePicker.module.scss b/packages/terra-date-picker/src/DatePicker.module.scss
@@ -28,9 +28,9 @@
     width: 8em;
 
     &.is-focused {
-      border-color: var(--terra-date-picker-input-focus-border-color, #26a2e5);
+      background-color: var(--terra-date-picker-input-focus-background-color, #fff);
+      outline: var(--terra-date-picker-input-focus-border-outline, 2px dashed #000);
       box-shadow: var(--terra-date-picker-input-focus-box-shadow, none);
-      outline: none;
       z-index: 1;
     }
 
@@ -118,8 +118,7 @@
       }
 
       &.initial-focus {
-        background-color: transparent;
-        border: var(--terra-date-picker-input-date-component-initial-focus-border, 2px dashed #000);
+        background-color: var(--terra-date-picker-input-date-component-focused-input-background-color, rgba(139, 194, 249, 0.3));
         box-shadow: none;
       }
     }
@@ -162,9 +161,8 @@
     }
 
     &:focus {
-      border-color: var(--terra-date-picker-button-focus-border-color, #26a2e5);
-      box-shadow: var(--terra-date-picker-button-focus-box-shadow, 0 0 1px 3px rgba(76, 178, 233, 0.5), 0 0 7px 4px rgba(76, 178, 233, 0.35));
-      outline: none;
+      outline: var(--terra-date-picker-input-focus-border-outline, 2px dashed #000);
+      box-shadow: var(--terra-date-picker-button-focus-box-shadow, none);
       z-index: 2;
     }
 

diff --git a/packages/terra-date-picker/src/clinical-lowlight-theme/DatePicker.module.scss b/packages/terra-date-picker/src/clinical-lowlight-theme/DatePicker.module.scss
@@ -36,7 +36,10 @@
     --terra-date-picker-input-date-component-focus-box-shadow: none;
     --terra-date-picker-input-date-component-initial-focus-border: 2px dashed #fff;
     --terra-date-picker-button-focus-border-color: #000;
-    --terra-date-picker-button-focus-box-shadow: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76;
+    --terra-date-picker-button-focus-box-shadow: none;
+    --terra-date-picker-input-date-component-focused-input-background-color: rgba(139, 194, 249, 0.3);
+    --terra-date-picker-input-focus-border-outline: 2px dashed #b2b5b6;
+    --terra-date-picker-input-focus-background-color: #1e3a49;
 
     // Default - Disabled
     --terra-date-picker-input-disabled-background-color: #1d2529;

diff --git a/packages/terra-date-picker/src/orion-fusion-theme/DatePicker.module.scss b/packages/terra-date-picker/src/orion-fusion-theme/DatePicker.module.scss
@@ -30,13 +30,16 @@
 
     // Default - Focus
     --terra-date-picker-input-focus-border-color: #4cb2e9;
-    --terra-date-picker-input-focus-box-shadow: 0 0 8px #a6d9f4;
+    --terra-date-picker-input-focus-box-shadow: 0 0 0 1px rgba(76, 178, 233, 0.5), 0 0 4px 3px rgba(76, 178, 233, 0.35);
     --terra-date-picker-input-date-component-focus-background-color: transparent;
     --terra-date-picker-input-date-component-focus-border: 0;
     --terra-date-picker-input-date-component-focus-box-shadow: none;
-    --terra-date-picker-input-date-component-initial-focus-border: 2px dashed #000;
+    --terra-date-picker-input-date-component-initial-focus-border: none;
     --terra-date-picker-button-focus-border-color: #26a2e5;
     --terra-date-picker-button-focus-box-shadow: inset 0 3rem 1.5rem -2rem #f4f4f4, 0 0 1px 1px rgba(255, 255, 255, 0.65), 0 0 2px 3px rgba(76, 178, 233, 0.5), 0 0 6px 4px rgba(76, 178, 233, 0.3);
+    --terra-date-picker-input-date-component-focused-input-background-color: rgba(139, 194, 249, 0.3);
+    --terra-date-picker-input-focus-border-outline: none;
+    --terra-date-picker-input-focus-background-color: #fff;
 
     // Default - Disabled
     --terra-date-picker-input-disabled-background-color: #f4f4f4;

diff --git a/packages/terra-date-picker/tests/jest/__snapshots__/CalendarFilter.test.jsx.snap b/packages/terra-date-picker/tests/jest/__snapshots__/CalendarFilter.test.jsx.snap
@@ -5,6 +5,7 @@ exports[`should render a calendar filter with default date 1`] = `
   calendarClassName="calendar-filter"
   disableButtonFocusOnClose={false}
   disabled={false}
+  errorId=""
   intl={
     Object {
       "defaultFormats": Object {},
@@ -50,6 +51,7 @@ exports[`should render a calendar filter with excluded dates 1`] = `
   calendarClassName="calendar-filter"
   disableButtonFocusOnClose={false}
   disabled={false}
+  errorId=""
   excludeDates={
     Array [
       "2020-04-01",
@@ -99,6 +101,7 @@ exports[`should render a calendar filter with filtered dates 1`] = `
   calendarClassName="calendar-filter"
   disableButtonFocusOnClose={false}
   disabled={false}
+  errorId=""
   filterDate={[Function]}
   intl={
     Object {
@@ -144,6 +147,7 @@ exports[`should render a calendar filter with included dates 1`] = `
   calendarClassName="calendar-filter"
   disableButtonFocusOnClose={false}
   disabled={false}
+  errorId=""
   includeDates={
     Array [
       "2020-04-01",
@@ -193,6 +197,7 @@ exports[`should render a calendar filter with min and max dates 1`] = `
   calendarClassName="calendar-filter"
   disableButtonFocusOnClose={false}
   disabled={false}
+  errorId=""
   intl={
     Object {
       "defaultFormats": Object {},
@@ -237,6 +242,7 @@ exports[`should render a calendar filter with onChange 1`] = `
   calendarClassName="calendar-filter"
   disableButtonFocusOnClose={false}
   disabled={false}
+  errorId=""
   intl={
     Object {
       "defaultFormats": Object {},
@@ -282,6 +288,7 @@ exports[`should render a controlled calendar filter 1`] = `
   calendarClassName="calendar-filter"
   disableButtonFocusOnClose={false}
   disabled={false}
+  errorId=""
   intl={
     Object {
       "defaultFormats": Object {},