feat: Add DateRangePicker Component

src/components/forms/DateRangePicker/DateRangePicker.test.tsx

@@ -35,6 +35,21 @@ describe("DateRangePicker component", () => {
     expect(startDatePicker).toHaveClass('usa-date-range-picker__range-start')
     expect(endDatePicker).toHaveClass('usa-date-range-picker__range-end')
 
+    const internalInputs = getAllByTestId('date-picker-internal-input')
+    expect(internalInputs).toHaveLength(2)
+
+    const startDatePickerInternalInput = internalInputs[0]
+    const endDatePickerInternalInput = internalInputs[1]
+    expect(startDatePickerInternalInput).not.toHaveAttribute("aria-describedby")
+    expect(endDatePickerInternalInput).not.toHaveAttribute("aria-describedby")
+
+    const externalInputs = getAllByTestId('date-picker-external-input')
+    expect(externalInputs).toHaveLength(2)
+
+    const startDatePickerExternalInput = externalInputs[0]
+    const endDatePickerExternalInput = externalInputs[1]
+    expect(startDatePickerExternalInput).not.toHaveAttribute("aria-describedby")
+    expect(endDatePickerExternalInput).not.toHaveAttribute("aria-describedby")
   })
 
   it('renders labels when specified', () => {
@@ -66,6 +81,22 @@ describe("DateRangePicker component", () => {
     const endDateLabel = queryByText("End Date")
     expect(endDateLabel).toBeInTheDocument()
     expect(endDateLabel).toHaveClass('usa-label')
+
+    const internalInputs = getAllByTestId('date-picker-internal-input')
+    expect(internalInputs).toHaveLength(2)
+
+    const startDatePickerInternalInput = internalInputs[0]
+    const endDatePickerInternalInput = internalInputs[1]
+    expect(startDatePickerInternalInput).toHaveAttribute("aria-describedby", "start-date-label")
+    expect(endDatePickerInternalInput).toHaveAttribute("aria-describedby", "end-date-label")
+
+    const externalInputs = getAllByTestId('date-picker-external-input')
+    expect(externalInputs).toHaveLength(2)
+
+    const startDatePickerExternalInput = externalInputs[0]
+    const endDatePickerExternalInput = externalInputs[1]
+    expect(startDatePickerExternalInput).toHaveAttribute("aria-describedby", "start-date-label")
+    expect(endDatePickerExternalInput).toHaveAttribute("aria-describedby", "end-date-label")
   })
 
   it('renders hints when specified', () => {
@@ -83,13 +114,79 @@ describe("DateRangePicker component", () => {
     expect(dateRangePicker).toHaveClass('usa-date-range-picker')
     expect(getAllByTestId('date-picker')).toHaveLength(2)
 
-    const startDateLabel = queryByText("start date format: mm/dd/yyyy")
+    const startDateHint = queryByText("start date format: mm/dd/yyyy")
+    expect(startDateHint).toBeInTheDocument()
+    expect(startDateHint).toHaveClass('usa-hint')
+
+    const endDateHint = queryByText("end date format: mm/dd/yyyy")
+    expect(endDateHint).toBeInTheDocument()
+    expect(endDateHint).toHaveClass('usa-hint')
+
+    const internalInputs = getAllByTestId('date-picker-internal-input')
+    expect(internalInputs).toHaveLength(2)
+
+    const startDatePickerInternalInput = internalInputs[0]
+    const endDatePickerInternalInput = internalInputs[1]
+    expect(startDatePickerInternalInput).toHaveAttribute("aria-describedby", "start-date-hint")
+    expect(endDatePickerInternalInput).toHaveAttribute("aria-describedby", "end-date-hint")
+
+    const externalInputs = getAllByTestId('date-picker-external-input')
+    expect(externalInputs).toHaveLength(2)
+
+    const startDatePickerExternalInput = externalInputs[0]
+    const endDatePickerExternalInput = externalInputs[1]
+    expect(startDatePickerExternalInput).toHaveAttribute("aria-describedby", "start-date-hint")
+    expect(endDatePickerExternalInput).toHaveAttribute("aria-describedby", "end-date-hint")
+  })
+
+  it('renders labels and hints simultaneously, properly populating the aria-describedby property on each DatePicker', () => {
+    const { getByTestId, getAllByTestId, queryByText } = render(
+      <DateRangePicker
+        startDateLabel="Start Date"
+        startDateHint="start date format: mm/dd/yyyy"
+        startDatePickerProps={startDatePickerTestProps}
+        endDateLabel="End Date"
+        endDateHint="end date format: mm/dd/yyyy"
+        endDatePickerProps={endDatePickerTestProps}
+      />
+    )
+
+    const dateRangePicker = getByTestId('date-range-picker') 
+    expect(dateRangePicker).toBeInTheDocument()
+    expect(dateRangePicker).toHaveClass('usa-date-range-picker')
+    expect(getAllByTestId('date-picker')).toHaveLength(2)
+
+    const startDateLabel = queryByText("Start Date")
     expect(startDateLabel).toBeInTheDocument()
-    expect(startDateLabel).toHaveClass('usa-hint')
+    expect(startDateLabel).toHaveClass('usa-label')
 
-    const endDateLabel = queryByText("end date format: mm/dd/yyyy")
+    const endDateLabel = queryByText("End Date")
     expect(endDateLabel).toBeInTheDocument()
-    expect(endDateLabel).toHaveClass('usa-hint')
+    expect(endDateLabel).toHaveClass('usa-label')
+
+    const startDateHint = queryByText("start date format: mm/dd/yyyy")
+    expect(startDateHint).toBeInTheDocument()
+    expect(startDateHint).toHaveClass('usa-hint')
+
+    const endDateHint = queryByText("end date format: mm/dd/yyyy")
+    expect(endDateHint).toBeInTheDocument()
+    expect(endDateHint).toHaveClass('usa-hint')
+
+    const internalInputs = getAllByTestId('date-picker-internal-input')
+    expect(internalInputs).toHaveLength(2)
+
+    const startDatePickerInternalInput = internalInputs[0]
+    const endDatePickerInternalInput = internalInputs[1]
+    expect(startDatePickerInternalInput).toHaveAttribute("aria-describedby", "start-date-label start-date-hint")
+    expect(endDatePickerInternalInput).toHaveAttribute("aria-describedby", "end-date-label end-date-hint")
+
+    const externalInputs = getAllByTestId('date-picker-external-input')
+    expect(externalInputs).toHaveLength(2)
+
+    const startDatePickerExternalInput = externalInputs[0]
+    const endDatePickerExternalInput = externalInputs[1]
+    expect(startDatePickerExternalInput).toHaveAttribute("aria-describedby", "start-date-label start-date-hint")
+    expect(endDatePickerExternalInput).toHaveAttribute("aria-describedby", "end-date-label end-date-hint")
   })
 
   it('allows a date range to be selected by using both date pickers to pick start and end dates', () => {

src/components/forms/DateRangePicker/DateRangePicker.tsx

@@ -113,25 +113,40 @@ export const DateRangePicker = (
   const startDatePickerClasses = classnames(startDatePickerProps.className, 'usa-date-range-picker__range-start')
   const endDatePickerClasses = classnames(endDatePickerProps.className, 'usa-date-range-picker__range-end')
 
+  const startDatePickerLabelId = `${startDatePickerProps.id}-label`
+  const startDatePickerHintId = `${startDatePickerProps.id}-hint`
+  const startDatePickerAriaDescribedBy = [
+    startDateLabel && startDatePickerLabelId, 
+    startDateHint && startDatePickerHintId
+  ].join(" ").trim() || undefined
+
+  const endDatePickerLabelId = `${endDatePickerProps.id}-label`
+  const endDatePickerHintId = `${endDatePickerProps.id}-hint`
+  const endDatePickerAriaDescribedBy = [
+    endDateLabel && endDatePickerLabelId, 
+    endDateHint && endDatePickerHintId
+  ].join(" ").trim() || undefined
+
   return (
     <div className={classes} data-testid="date-range-picker">
       <FormGroup>
         {startDateLabel && 
-        <Label 
-          id={`${startDatePickerProps.id}-label`} 
+        <Label
+          id={startDatePickerLabelId} 
           htmlFor={startDatePickerProps.id}>
           {startDateLabel}
         </Label>}
         {startDateHint && 
         <div 
           className="usa-hint" 
-          id={`${startDatePickerProps.id}-hint`}>
+          id={startDatePickerHintId}>
           {startDateHint}
         </div>}
         <DatePicker
           className={startDatePickerClasses}
           rangeDate={endDateInternalValue} 
-          { ...startDatePickerProps } 
+          { ...startDatePickerProps }
+          aria-describedby={startDatePickerAriaDescribedBy}
           onChange={startDatePickerOnChange} 
           maxDate={getMaxStartDate()}
         />
@@ -140,20 +155,21 @@ export const DateRangePicker = (
       <FormGroup>
         {endDateLabel && 
         <Label
-          id={`${endDatePickerProps.id}-label`} 
+          id={endDatePickerLabelId} 
           htmlFor={endDatePickerProps.id}>
           {endDateLabel}
         </Label>}
         {endDateHint && 
         <div 
           className="usa-hint" 
-          id={`${endDatePickerProps.id}-hint`}>
+          id={endDatePickerHintId}>
           {endDateHint}
         </div>}
-        <DatePicker 
+        <DatePicker
           className={endDatePickerClasses}
           rangeDate={startDateInternalValue} 
-          { ...endDatePickerProps } 
+          { ...endDatePickerProps }
+          aria-describedby={endDatePickerAriaDescribedBy}
           onChange={endDatePickerOnChange}
           minDate={getMinEndDate()}
         />