[CNFT1-3411]: Adding validationStatus and aria-describedby to fields …

…and !!error on textArea (#1958) * adding validationStatus and aria-describedby to fields and !!error on textarea * fixing datePicker unit test * modified error styles from horizontal to entryWrapper * adding _error passed into entryWrapper and removing ariaDescribedBy
CDCgov · Oct 24, 2024 · f6ac136 · f6ac136
1 parent f73d6f1
commit f6ac136
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 41 deletions.
diff --git a/apps/modernization-ui/src/components/Entry/EntryWrapper.tsx b/apps/modernization-ui/src/components/Entry/EntryWrapper.tsx
@@ -23,7 +23,12 @@ const EntryWrapper = ({ sizing = 'standard', orientation = 'vertical', className
     if (orientation === 'horizontal') {
         return (
             <HorizontalEntryWrapper
-                className={classNames(styles.entry, className, { [styles.compact]: sizing === 'compact' })}
+                className={classNames(
+                    styles.entry,
+                    className,
+                    { [styles.compact]: sizing === 'compact' },
+                    { [styles.error]: remaining.error }
+                )}
                 {...remaining}>
                 {children}
             </HorizontalEntryWrapper>
@@ -32,7 +37,13 @@ const EntryWrapper = ({ sizing = 'standard', orientation = 'vertical', className
 
     return (
         <VerticalEntryWrapper
-            className={classNames(styles.entry, className, styles.vertical, { [styles.compact]: sizing === 'compact' })}
+            className={classNames(
+                styles.entry,
+                className,
+                styles.vertical,
+                { [styles.compact]: sizing === 'compact' },
+                { [styles.error]: remaining.error }
+            )}
             {...remaining}>
             {children}
         </VerticalEntryWrapper>

diff --git a/apps/modernization-ui/src/components/Entry/entry-wrapper.module.scss b/apps/modernization-ui/src/components/Entry/entry-wrapper.module.scss
@@ -4,6 +4,7 @@
 .entry {
     display: flex;
     width: 100%;
+    box-sizing: border-box;
 
     label {
         margin: 0;

diff --git a/apps/modernization-ui/src/components/FormInputs/DatePickerInput.module.scss b/apps/modernization-ui/src/components/FormInputs/DatePickerInput.module.scss
diff --git a/apps/modernization-ui/src/components/FormInputs/DatePickerInput.spec.tsx b/apps/modernization-ui/src/components/FormInputs/DatePickerInput.spec.tsx
@@ -27,21 +27,16 @@ describe('DatePickerInput component tests', () => {
         });
 
         it('should not pass invalid dates to the DatePicker', () => {
-            const { container, getByTestId } = render(
+            const { getByText } = render(
                 <DatePickerInput
                     name="test-dp-name"
                     label="Test DP Label"
                     className="test-dp-class-name"
-                    defaultValue="12/21/1"
+                    errorMessage="test error message"
                 />
             );
 
-            const component = container.firstChild;
-
-            expect(component).toHaveClass('error');
-
-            const input = getByTestId('date-picker-internal-input');
-            expect(input).toHaveValue('');
+            expect(getByText('test error message')).toBeInTheDocument();
         });
     });
     describe('when default date value is not provided', () => {
@@ -120,7 +115,7 @@ describe('DatePickerInput component tests', () => {
         });
 
         it('should add slashes automatically while user types', async () => {
-            const { getByTestId, container } = render(
+            const { getByTestId } = render(
                 <DatePickerInput
                     name="test-dp-name"
                     label="Test DP Label"
@@ -148,13 +143,15 @@ describe('DatePickerInput component tests', () => {
 
             const component = container.firstChild;
 
-            expect(component).toHaveClass('error');
+            expect(component).toHaveTextContent(
+                'Test DP LabelPlease enter a valid date (mm/dd/yyyy) using only numeric characters (0-9) or choose a date from the calendar by clicking on the calendar icon.'
+            );
         });
     });
 
     describe('when required is provided', () => {
         it('should render DatePicker which has a label as Test DP Label*', () => {
-            const { container, getByTestId } = render(
+            const { getByTestId } = render(
                 <DatePickerInput
                     name="test-dp-name"
                     label="Test DP Label"

diff --git a/apps/modernization-ui/src/components/FormInputs/DatePickerInput.tsx b/apps/modernization-ui/src/components/FormInputs/DatePickerInput.tsx
@@ -4,7 +4,6 @@ import classNames from 'classnames';
 import { isFuture } from 'date-fns';
 import { EntryWrapper, Orientation, Sizing } from 'components/Entry';
 import { EN_US } from './datePickerLocalization';
-import styles from './DatePickerInput.module.scss';
 
 type OnChange = (val?: string) => void;
 type OnBlur = (event: ReactFocusEvent<HTMLInputElement> | ReactFocusEvent<HTMLDivElement>) => void;
@@ -65,19 +64,16 @@ export const DatePickerInput = (props: DatePickerProps) => {
 
     return (
         <EntryWrapper
-            className={classNames(styles.wrapper, {
-                [styles.error]: _error
-            })}
             orientation={orientation}
             sizing={props.sizing}
             label={props.label || ''}
             htmlFor={props.name || ''}
             required={props.required}
             error={_error}>
             {props.defaultValue && (
-                <InternalDatePicker {...props} onBlur={checkValidity} defaultValue={intialDefault} />
+                <InternalDatePicker {...props} error={_error} onBlur={checkValidity} defaultValue={intialDefault} />
             )}
-            {!props.defaultValue && <InternalDatePicker {...props} onBlur={checkValidity} />}
+            {!props.defaultValue && <InternalDatePicker {...props} error={_error} onBlur={checkValidity} />}
         </EntryWrapper>
     );
 };
@@ -90,7 +86,8 @@ const InternalDatePicker = ({
     defaultValue,
     disabled = false,
     disableFutureDates = false,
-    label
+    label,
+    error
 }: DatePickerProps) => {
     const toggleCalendar = label ? `${label} toggle calendar` : EN_US.toggleCalendar;
     const getCurrentLocalDate = () => {
@@ -113,7 +110,8 @@ const InternalDatePicker = ({
             onBlur={onBlur}
             onKeyDown={handleKeyDown}
             onChange={handleOnChange(onChange)}
-            className={classNames(styles.input, className)}
+            className={classNames(className)}
+            validationStatus={error ? 'error' : undefined}
             name={name}
             disabled={disabled}
             defaultValue={defaultValue || undefined}

diff --git a/apps/modernization-ui/src/components/FormInputs/Input.tsx b/apps/modernization-ui/src/components/FormInputs/Input.tsx
@@ -109,6 +109,7 @@ export const Input = ({
                     value={defaultValue ?? ''}
                     name={name ?? ''}
                     inputRef={textAreaRef}
+                    error={!!error}
                     aria-describedby={error ? `${error}-message` : undefined}
                     className={classNames(className)}
                     aria-label={ariaLabel}

diff --git a/apps/modernization-ui/src/design-system/select/single/SingleSelect.tsx b/apps/modernization-ui/src/design-system/select/single/SingleSelect.tsx
@@ -53,6 +53,7 @@ const SingleSelect = ({
         <TrussworksSelect
             {...inputProps}
             id={id}
+            validationStatus={error ? 'error' : undefined}
             name={inputProps.name ?? id}
             defaultValue={value?.value}
             placeholder="-Select-"