fix(datepicker): apply id on label's htmlFor attribute (#284)

Author: arthurdenner

src/__tests__/datepicker.test.tsx

@@ -236,6 +236,16 @@ describe('Basic datepicker', () => {
     expect(datePickerInput.value).toBe('');
   });
 
+  it('should be accessible when id is provided', () => {
+    const { getByLabelText, getByText } = setup({
+      id: 'click-me',
+      label: 'Click me',
+    });
+
+    fireEvent.click(getByLabelText('Click me'));
+    expect(getByText('Today')).toBeTruthy();
+  });
+
   describe('clearOnSameDateClick', () => {
     it('reset its state when prop is true', () => {
       const { datePickerInput, getByText, openDatePicker } = setup({

src/components/input.tsx

@@ -18,7 +18,7 @@ const CustomInput = React.forwardRef<Input, InputProps>((props, ref) => {
 
   return (
     <Form.Field>
-      {label && <label>{label}</label>}
+      {label && <label htmlFor={rest.id as string | undefined}>{label}</label>}
       <Input
         data-testid="datepicker-input"
         {...rest}