From 50167397bf2266c7465425bec08304efd29d6aef Mon Sep 17 00:00:00 2001
From: clukhei <kheiboardwarrior@gmail.com>
Date: Fri, 19 Apr 2024 16:38:38 +0800
Subject: [PATCH 1/2] feat(datepicker): add aria-describedby and aria-invalids
 when input is invalid

---
 src/DatePicker/DateInput.tsx  | 2 +-
 src/DatePicker/DatePicker.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/DatePicker/DateInput.tsx b/src/DatePicker/DateInput.tsx
index 39ff3a84..27b8c865 100644
--- 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
index b561fa39..2da6f60f 100644
--- 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

From 3a770b94fb713b01cb94714cd6e67d0f1075a405 Mon Sep 17 00:00:00 2001
From: clukhei <kheiboardwarrior@gmail.com>
Date: Mon, 22 Apr 2024 09:51:25 +0800
Subject: [PATCH 2/2] test(datepicker): add UT for aria attr added during
 invalid state

---
 tests/DatePicker/DatePicker.test.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/tests/DatePicker/DatePicker.test.tsx b/tests/DatePicker/DatePicker.test.tsx
index f1eb7ec1..2c11e7fd 100644
--- 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);
+  });
 });