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

arthurdenner · May 28, 2020 · 4d9ffb1 · 4d9ffb1 · vercel · May 28, 2020
1 parent b3a7e3e
commit 4d9ffb1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/__tests__/datepicker.test.tsx b/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({

diff --git a/src/components/input.tsx b/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}