Handling aria attributes for invalid states [skip-cd] (#231)

GovTechSG · Apr 22, 2024 · 987989e · 987989e
2 parents 47d1bb5 + 3a770b9
commit 987989e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/src/DatePicker/DateInput.tsx b/src/DatePicker/DateInput.tsx
@@ -77,7 +77,7 @@ export const DateInput: DateInputPropsComponent = React.forwardRef(
       placeholder: placeholder || defaultPlaceHolder,
       disabled: disabled,
       isInvalid: isInvalid,
-      id: id,
+      id: id
     };
 
     // Assign the ref element of dropdown toggle to HTMLInputElement (FormControl)

diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx
@@ -840,6 +840,7 @@ export const DatePicker: BsPrefixRefForwardingComponent<
       month: 'Choose month',
       year: 'Choose year',
     };
+    const feedbackId = "id-6163-sgds-feedback-div"
     return (
       <DatePickerContext.Provider value={contextValue}>
         <Dropdown
@@ -861,6 +862,8 @@ export const DatePicker: BsPrefixRefForwardingComponent<
             validateDateInput={validateDateInput}
             enterDateRange={enterDateRange}
             enterDateSingle={enterDateSingle}
+            aria-invalid={state.invalid}
+            aria-describedby={state.invalid ? feedbackId : ""}
           />
           <Dropdown.Toggle
             ref={dropdownToggleRef}
@@ -882,7 +885,7 @@ export const DatePicker: BsPrefixRefForwardingComponent<
             <i className="bi bi-x"></i>
             <span className="visually-hidden">clear</span>
           </Button>
-          <FormControl.Feedback type="invalid">
+          <FormControl.Feedback type="invalid" id={feedbackId}>
             {props.invalidFeedback}
           </FormControl.Feedback>
           <Dropdown.Menu

diff --git a/tests/DatePicker/DatePicker.test.tsx b/tests/DatePicker/DatePicker.test.tsx
@@ -2198,4 +2198,23 @@ describe('Datepicker a11y', () => {
     });
     expect(container.querySelector('input')).toHaveFocus();
   });
+  it('when state is invalid, input aria-invalid=true, aria-describedby points to Feedback', async () => {
+    const { container, getByText } = render(<DatePicker />);
+
+    const input = container.querySelector('input')!;
+    expect(input.getAttribute('aria-describedby')).toEqual('');
+    expect(input.getAttribute('aria-invalid')).toEqual('false');
+    fireEvent.change(input, { target: { value: '01132024' } });
+    fireEvent.blur(input);
+    // Triggering invalid state
+    await waitFor(() => {
+      expect(getByText('Please enter a valid date')).toBeInTheDocument();
+    });
+    const feedbackId = getByText('Please enter a valid date').getAttribute(
+      'id'
+    );
+
+    expect(input.getAttribute('aria-invalid')).toEqual('true');
+    expect(input.getAttribute('aria-describedby')).toEqual(feedbackId);
+  });
 });