From 442983219aa3d1730805729bdc289b112c1acb4a Mon Sep 17 00:00:00 2001
From: Barbara Honhoff <barbara@honhoff.dev>
Date: Wed, 26 Jun 2024 11:56:44 +0200
Subject: [PATCH 1/2] Use the headless ui form components for accessibility

---
 .../objects/[id]/(provenance)/add-form.tsx    | 253 ++++++++++--------
 .../[id]/local-contexts-notices/form.tsx      |  48 ++--
 .../objects/[id]/user-enrichment-form.tsx     |  65 +++--
 .../components/form/checkbox-with-label.tsx   |  24 +-
 apps/researcher/src/components/form/input.tsx |   7 +-
 .../researcher/src/components/form/layout.tsx |   7 +-
 .../src/components/form/motivation-input.tsx  |  33 ++-
 .../src/components/form/textarea.tsx          |   3 +-
 8 files changed, 250 insertions(+), 190 deletions(-)

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/add-form.tsx b/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/add-form.tsx
index fc256c0cf..a1ef947d1 100644
--- a/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/add-form.tsx
+++ b/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/add-form.tsx
@@ -1,6 +1,13 @@
 'use client';
 
-import {Tab} from '@headlessui/react';
+import {
+  Field,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react';
 import {useLocale, useTranslations} from 'next-intl';
 import {Fragment, ReactNode, useMemo, useState} from 'react';
 import classNames from 'classnames';
@@ -231,12 +238,12 @@ export default function AddProvenanceForm({
           </div>
         </div>
       )}
-      <Tab.Group
+      <TabGroup
         manual
         selectedIndex={selectedIndex}
         onChange={setSelectedIndex}
       >
-        <Tab.List className="w-full pb-4 pt-8 flex flex-row flex-wrap gap-4 lg:gap-8 border-b  -mx-4 px-4 mb-4 italic">
+        <TabList className="w-full pb-4 pt-8 flex flex-row flex-wrap gap-4 lg:gap-8 border-b  -mx-4 px-4 mb-4 italic">
           <ProvenanceTab fields={['type']} number={1} title={t('TabWhat')} />
           <ProvenanceTab
             number={2}
@@ -248,41 +255,47 @@ export default function AddProvenanceForm({
             title={t('TabMoreInfo')}
             fields={['citation', 'inLanguage']}
           />
-        </Tab.List>
-        <Tab.Panels>
+        </TabList>
+        <TabPanels>
           <form onSubmit={handleSubmit(onSubmit)}>
-            <Tab.Panel>
+            <TabPanel>
               <FormRow>
                 <FormColumn>
-                  <InputLabel
-                    title={t('type')}
-                    description={t('typeDescription')}
-                    required
-                  />
-                  <Select
-                    name="type"
-                    options={typeOptions}
-                    placeholder={t('typePlaceholder')}
-                  />
-                  <FieldValidationMessage field="type.id" />
+                  <Field as={Fragment}>
+                    <InputLabel
+                      title={t('type')}
+                      description={t('typeDescription')}
+                      required
+                    />
+                    <Select
+                      name="type"
+                      options={typeOptions}
+                      placeholder={t('typePlaceholder')}
+                    />
+                    <FieldValidationMessage field="type.id" />
+                  </Field>
                   <MotivationInput name="motivations.type" />
                 </FormColumn>
                 <FormColumn>
-                  <InputLabel
-                    title={t('inLanguage')}
-                    description={t('inLanguageDescription')}
-                    required
-                  />
-                  <LanguageSelector name="inLanguage" />
+                  <Field as={Fragment}>
+                    <InputLabel
+                      title={t('inLanguage')}
+                      description={t('inLanguageDescription')}
+                      required
+                    />
+                    <LanguageSelector name="inLanguage" />
+                  </Field>
                 </FormColumn>
                 <FormColumn>
-                  <InputLabel
-                    title={t('community')}
-                    description={t('communityDescription')}
-                    required
-                  />
-                  <CommunitySelector />
-                  <FieldValidationMessage field="community.id" />
+                  <Field as={Fragment}>
+                    <InputLabel
+                      title={t('community')}
+                      description={t('communityDescription')}
+                      required
+                    />
+                    <CommunitySelector />
+                    <FieldValidationMessage field="community.id" />
+                  </Field>
                 </FormColumn>
               </FormRow>
               <ButtonGroup>
@@ -291,82 +304,92 @@ export default function AddProvenanceForm({
                   {t('nextButton')}
                 </DefaultButton>
               </ButtonGroup>
-            </Tab.Panel>
+            </TabPanel>
 
-            <Tab.Panel>
+            <TabPanel>
               <FormRow>
                 <FormColumn>
-                  <InputLabel
-                    title={t.rich('transferredFrom', {
-                      important: text => <em>{text}</em>,
-                    })}
-                    description={t('transferredFromDescription')}
-                  />
-                  <SearchSelector
-                    searchers={[
-                      {
-                        name: 'Wikidata Constituent',
-                        url: '/api/wikidata',
-                      },
-                      {
-                        name: 'Datahub Constituent',
-                        url: '/api/datahub',
-                      },
-                    ]}
-                    name="transferredFrom"
-                  />
+                  <Field as={Fragment}>
+                    <InputLabel
+                      title={t.rich('transferredFrom', {
+                        important: text => <em>{text}</em>,
+                      })}
+                      description={t('transferredFromDescription')}
+                    />
+                    <SearchSelector
+                      searchers={[
+                        {
+                          name: 'Wikidata Constituent',
+                          url: '/api/wikidata',
+                        },
+                        {
+                          name: 'Datahub Constituent',
+                          url: '/api/datahub',
+                        },
+                      ]}
+                      name="transferredFrom"
+                    />
+                  </Field>
                   <MotivationInput name="motivations.transferredFrom" />
-                  <InputLabel
-                    title={t.rich('transferredTo', {
-                      important: text => <em>{text}</em>,
-                    })}
-                    description={t('transferredToDescription')}
-                  />
-                  <SearchSelector
-                    searchers={[
-                      {
-                        name: 'Wikidata Constituent',
-                        url: '/api/wikidata',
-                      },
-                      {
-                        name: 'Datahub Constituent',
-                        url: '/api/datahub',
-                      },
-                    ]}
-                    name="transferredTo"
-                  />
+                  <Field as={Fragment}>
+                    <InputLabel
+                      title={t.rich('transferredTo', {
+                        important: text => <em>{text}</em>,
+                      })}
+                      description={t('transferredToDescription')}
+                    />
+                    <SearchSelector
+                      searchers={[
+                        {
+                          name: 'Wikidata Constituent',
+                          url: '/api/wikidata',
+                        },
+                        {
+                          name: 'Datahub Constituent',
+                          url: '/api/datahub',
+                        },
+                      ]}
+                      name="transferredTo"
+                    />
+                  </Field>
                   <MotivationInput name="motivations.transferredTo" />
                 </FormColumn>
                 <FormColumn>
-                  <InputLabel
-                    title={t('location')}
-                    description={t('locationDescription')}
-                  />
-                  <SearchSelector
-                    searchers={[
-                      {
-                        name: 'GeoNames Location',
-                        url: '/api/geonames',
-                      },
-                    ]}
-                    name="location"
-                  />
+                  <Field as={Fragment}>
+                    <InputLabel
+                      title={t('location')}
+                      description={t('locationDescription')}
+                    />
+                    <SearchSelector
+                      searchers={[
+                        {
+                          name: 'GeoNames Location',
+                          url: '/api/geonames',
+                        },
+                      ]}
+                      name="location"
+                    />
+                  </Field>
                   <MotivationInput name="motivations.location" />
                 </FormColumn>
                 <FormColumn>
-                  <InputLabel
-                    title={t('startDate')}
-                    description={t('startDateDescription')}
-                  />
-                  <EdtfInput name="date.startDate" />
-                  <FieldValidationMessage field="date.startDate" />
+                  <Field as={Fragment}>
+                    <InputLabel
+                      title={t('startDate')}
+                      description={t('startDateDescription')}
+                    />
+                    <EdtfInput name="date.startDate" />
+                    <FieldValidationMessage field="date.startDate" />
+                  </Field>
                   <MotivationInput name="motivations.startDate" />
-                  <InputLabel
-                    title={t('endDate')}
-                    description={t('startDateDescription')}
-                  />
-                  <EdtfInput name="date.endDate" />
-                  <FieldValidationMessage field="date.endDate" />
+                  <Field as={Fragment}>
+                    <InputLabel
+                      title={t('endDate')}
+                      description={t('startDateDescription')}
+                    />
+                    <EdtfInput name="date.endDate" />
+                    <FieldValidationMessage field="date.endDate" />
+                  </Field>
                   <FieldValidationMessage field="date.root" />
                   <MotivationInput name="motivations.endDate" />
                 </FormColumn>
@@ -379,27 +402,31 @@ export default function AddProvenanceForm({
                   {t('nextButton')}
                 </DefaultButton>
               </ButtonGroup>
-            </Tab.Panel>
+            </TabPanel>
 
-            <Tab.Panel>
+            <TabPanel>
               <FormRow>
                 <FormColumn>
-                  <InputLabel
-                    title={t('qualifier')}
-                    description={t('qualifierDescription')}
-                    required
-                  />
-                  <QualifierSelector name="qualifier" />
+                  <Field as={Fragment}>
+                    <InputLabel
+                      title={t('qualifier')}
+                      description={t('qualifierDescription')}
+                      required
+                    />
+                    <QualifierSelector name="qualifier" />
+                  </Field>
                   <MotivationInput name="motivations.qualifier" />
                 </FormColumn>
                 <FormColumn>
-                  <InputLabel
-                    title={t('citation')}
-                    description={t('citationDescription')}
-                    required
-                  />
-                  <Textarea name="citation" />
-                  <FieldValidationMessage field="citation" />
+                  <Field as={Fragment}>
+                    <InputLabel
+                      title={t('citation')}
+                      description={t('citationDescription')}
+                      required
+                    />
+                    <Textarea name="citation" />
+                    <FieldValidationMessage field="citation" />
+                  </Field>
                 </FormColumn>
                 <FormColumn>
                   <div className="mt-4">
@@ -430,10 +457,10 @@ export default function AddProvenanceForm({
                   {t('saveButton')}
                 </PrimaryButton>
               </ButtonGroup>
-            </Tab.Panel>
+            </TabPanel>
           </form>
-        </Tab.Panels>
-      </Tab.Group>
+        </TabPanels>
+      </TabGroup>
     </FormProvider>
   );
 }
diff --git a/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/form.tsx b/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/form.tsx
index 3d8ed272d..84e5c7b64 100644
--- a/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/form.tsx
+++ b/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/form.tsx
@@ -19,7 +19,7 @@ import {
   CommunitySelector,
   ButtonGroup,
 } from '@/components/form';
-import {ReactNode} from 'react';
+import {Fragment, ReactNode} from 'react';
 import {useUser} from '@/lib/user/hooks';
 import {CheckboxWithLabel} from '@/components/form/checkbox-with-label';
 import {DefaultButton, PrimaryButton} from '@/components/buttons';
@@ -28,6 +28,7 @@ import {
   localContextsNoticeEnrichmentTypeMapping,
 } from './mapping';
 import {LocalContextsNoticeSelector} from '@/components/form/local-contexts-notice-selector';
+import {Field} from '@headlessui/react';
 
 interface FormValues {
   type: LocalContextsNoticeEnrichmentType | null;
@@ -150,26 +151,31 @@ export function LocalContextsNoticeForm({
         </div>
         <div className="flex flex-col md:flex-row gap-10">
           <div className="w-full md:w-1/2 flex flex-col">
-            <InputLabel
-              title={t('description')}
-              description={t('descriptionSubTitle')}
-              required
-              id="description"
-            />
-            <Textarea name="description" />
-            <FieldValidationMessage field="description" />
-            <InputLabel
-              title={t('inLanguage')}
-              description={t('languageSubTitle')}
-            />
-            <LanguageSelector name="inLanguage" />
-            <InputLabel
-              title={t('community')}
-              description={t('communityDescription')}
-              required
-            />
-            <CommunitySelector />
-            <FieldValidationMessage field="community.id" />
+            <Field as={Fragment}>
+              <InputLabel
+                title={t('description')}
+                description={t('descriptionSubTitle')}
+                required
+              />
+              <Textarea name="description" />
+              <FieldValidationMessage field="description" />
+            </Field>
+            <Field as={Fragment}>
+              <InputLabel
+                title={t('inLanguage')}
+                description={t('languageSubTitle')}
+              />
+              <LanguageSelector name="inLanguage" />
+            </Field>
+            <Field as={Fragment}>
+              <InputLabel
+                title={t('community')}
+                description={t('communityDescription')}
+                required
+              />
+              <CommunitySelector />
+              <FieldValidationMessage field="community.id" />
+            </Field>
             <div className="mt-4">
               <CheckboxWithLabel
                 name="agreedToLicense"
diff --git a/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx b/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx
index a99ef02c9..8d281bf2d 100644
--- a/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx
+++ b/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx
@@ -21,10 +21,11 @@ import {
   ButtonGroup,
 } from '@/components/form';
 import type {HeritageObjectEnrichmentType} from '@colonial-collections/enricher';
-import {ReactNode} from 'react';
+import {Fragment, ReactNode} from 'react';
 import {useUser} from '@/lib/user/hooks';
 import {CheckboxWithLabel} from '@/components/form/checkbox-with-label';
 import {DefaultButton, PrimaryButton} from '@/components/buttons';
+import {Field} from '@headlessui/react';
 
 interface FormValues {
   description: string;
@@ -147,42 +148,48 @@ export function UserEnrichmentForm({
         )}
         <FormRow>
           <LeftFormColumn>
-            <InputLabel
-              title={t('description')}
-              description={t('descriptionSubTitle')}
-              required
-              id="description"
-            />
-            <Textarea name="description" />
-            <FieldValidationMessage field="description" />
+            <Field as={Fragment}>
+              <InputLabel
+                title={t('description')}
+                description={t('descriptionSubTitle')}
+                required
+              />
+              <Textarea name="description" />
+              <FieldValidationMessage field="description" />
+            </Field>
           </LeftFormColumn>
           <RightFormColumn>
-            <InputLabel
-              title={t('inLanguage')}
-              description={t('languageSubTitle')}
-            />
-            <LanguageSelector name="inLanguage" />
+            <Field as={Fragment}>
+              <InputLabel
+                title={t('inLanguage')}
+                description={t('languageSubTitle')}
+              />
+              <LanguageSelector name="inLanguage" />
+            </Field>
           </RightFormColumn>
         </FormRow>
         <FormRow>
           <LeftFormColumn>
-            <InputLabel
-              title={t('citation')}
-              description={t('citationSubTitle')}
-              required
-              id="citation"
-            />
-            <Textarea name="citation" />
-            <FieldValidationMessage field="citation" />
+            <Field as={Fragment}>
+              <InputLabel
+                title={t('citation')}
+                description={t('citationSubTitle')}
+                required
+              />
+              <Textarea name="citation" />
+              <FieldValidationMessage field="citation" />
+            </Field>
           </LeftFormColumn>
           <RightFormColumn>
-            <InputLabel
-              title={t('community')}
-              description={t('communityDescription')}
-              required
-            />
-            <CommunitySelector />
-            <FieldValidationMessage field="community.id" />
+            <Field as={Fragment}>
+              <InputLabel
+                title={t('community')}
+                description={t('communityDescription')}
+                required
+              />
+              <CommunitySelector />
+              <FieldValidationMessage field="community.id" />
+            </Field>
           </RightFormColumn>
         </FormRow>
         <FormRow>
diff --git a/apps/researcher/src/components/form/checkbox-with-label.tsx b/apps/researcher/src/components/form/checkbox-with-label.tsx
index dbe73b639..ea598460a 100644
--- a/apps/researcher/src/components/form/checkbox-with-label.tsx
+++ b/apps/researcher/src/components/form/checkbox-with-label.tsx
@@ -1,5 +1,7 @@
+import {Checkbox, Field, Label} from '@headlessui/react';
+import {CheckIcon} from '@heroicons/react/16/solid';
 import {ReactNode} from 'react';
-import {useFormContext} from 'react-hook-form';
+import {useController, useFormContext} from 'react-hook-form';
 
 interface Props extends React.HTMLProps<HTMLInputElement> {
   name: string;
@@ -7,14 +9,20 @@ interface Props extends React.HTMLProps<HTMLInputElement> {
 }
 
 export function CheckboxWithLabel({name, labelText, ...inputProps}: Props) {
-  const {register} = useFormContext();
+  const {control} = useFormContext();
+  const controller = useController({control, name});
 
   return (
-    <div className="flex justify-start gap-2 items-center">
-      <input {...register(name)} {...inputProps} type="checkbox" />
-      <label className="flex flex-col gap-1 mb-1" htmlFor={name}>
-        {labelText}
-      </label>
-    </div>
+    <Field className="flex justify-start gap-2 items-center mb-1">
+      <Checkbox
+        {...inputProps}
+        {...controller.field}
+        as="div"
+        className="shrink-0 flex-wrap group size-6 bg-white rounded border border-neutral-300 p-1 ring-1 ring-white ring-inset"
+      >
+        <CheckIcon className="hidden size-4 fill-black group-data-[checked]:block" />
+      </Checkbox>
+      <Label>{labelText}</Label>
+    </Field>
   );
 }
diff --git a/apps/researcher/src/components/form/input.tsx b/apps/researcher/src/components/form/input.tsx
index 4c3d81f15..826558d1a 100644
--- a/apps/researcher/src/components/form/input.tsx
+++ b/apps/researcher/src/components/form/input.tsx
@@ -1,17 +1,22 @@
 import {useFormContext} from 'react-hook-form';
+import {Input as HeadlessInput} from '@headlessui/react';
+import {useRef} from 'react';
 
 interface Props extends React.HTMLProps<HTMLInputElement> {
   name: string;
 }
 
 export function Input({name, ...inputProps}: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
   const {register} = useFormContext();
 
   return (
-    <input
+    <HeadlessInput
       {...register(name)}
       {...inputProps}
+      as="input" // Provide the correct type for the 'as' prop
       className="w-full border border-neutral-300 p-2 text-sm"
+      ref={inputRef}
     />
   );
 }
diff --git a/apps/researcher/src/components/form/layout.tsx b/apps/researcher/src/components/form/layout.tsx
index 4eac931da..75527d6a2 100644
--- a/apps/researcher/src/components/form/layout.tsx
+++ b/apps/researcher/src/components/form/layout.tsx
@@ -1,4 +1,5 @@
 import {ReactNode} from 'react';
+import {Label as HeadlessLabel} from '@headlessui/react';
 
 export function FormRow({children}: {children: ReactNode}) {
   return (
@@ -14,23 +15,21 @@ interface InputLabelProps {
   title: string | ReactNode;
   description: string | ReactNode;
   required?: boolean;
-  id?: string;
 }
 
 export function InputLabel({
   title,
   description,
-  id,
   required = false,
 }: InputLabelProps) {
   return (
-    <label className="flex flex-col gap-1 mb-1 mt-8 first:mt-0" htmlFor={id}>
+    <HeadlessLabel className="flex flex-col gap-1 mb-1 mt-8 first:mt-0">
       <strong>
         {title}
         {required && <span className="font-normal text-neutral-600">*</span>}
       </strong>
       <div>{description}</div>
-    </label>
+    </HeadlessLabel>
   );
 }
 
diff --git a/apps/researcher/src/components/form/motivation-input.tsx b/apps/researcher/src/components/form/motivation-input.tsx
index b43ed2a1e..6d8d19f61 100644
--- a/apps/researcher/src/components/form/motivation-input.tsx
+++ b/apps/researcher/src/components/form/motivation-input.tsx
@@ -1,6 +1,13 @@
 'use client';
 
-import {Popover} from '@headlessui/react';
+import {
+  Field,
+  Label,
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Textarea,
+} from '@headlessui/react';
 import {useTranslations} from 'next-intl';
 import {useState} from 'react';
 import {useController, useFormContext} from 'react-hook-form';
@@ -20,24 +27,24 @@ export function MotivationInput({name}: Props) {
   }
 
   return (
-    <Popover className="w-full text-sm mt-2 relative">
+    <Field as={Popover} className="w-full text-sm mt-2 relative">
       {controller.field.value ? (
         <div className="flex items-center justify-between gap-2">
           {controller.field.value}
-          <Popover.Button className="italic text-xs text-neutral-600 shrink-0">
+          <PopoverButton className="italic text-xs text-neutral-600 shrink-0">
             {t('editButton')}
-          </Popover.Button>
+          </PopoverButton>
         </div>
       ) : (
         <div className="text-right">
-          <Popover.Button className="italic text-xs text-neutral-600">
+          <PopoverButton className="italic text-xs text-neutral-600">
             {t('openButton')}
-          </Popover.Button>
+          </PopoverButton>
         </div>
       )}
-      <Popover.Panel className="w-full bg-neutral-100 p-4 flex-col gap-2 absolute shadow-xl z-40 text-left border border-neutral-200">
-        <label className="text-sm text-neutral-600">{t('description')}</label>
-        <textarea
+      <PopoverPanel className="w-full bg-neutral-100 p-4 flex-col gap-2 absolute shadow-xl z-40 text-left border border-neutral-200">
+        <Label className="text-sm text-neutral-600">{t('description')}</Label>
+        <Textarea
           className="h-28 border border-neutral-400 rounded p-2 text-sm w-full"
           value={motivation}
           onChange={event => setMotivation(event.target.value)}
@@ -54,15 +61,15 @@ export function MotivationInput({name}: Props) {
           >
             {t('saveButton')}
           </button>
-          <Popover.Button
+          <PopoverButton
             className="p-1 sm:py-2 sm:px-3 rounded-full text-xs bg-none hover:bg-neutral-300
                         text-neutral-800 transition flex items-center gap-1
                         border border-neutral-300 text-right"
           >
             {t('cancelButton')}
-          </Popover.Button>
+          </PopoverButton>
         </div>
-      </Popover.Panel>
-    </Popover>
+      </PopoverPanel>
+    </Field>
   );
 }
diff --git a/apps/researcher/src/components/form/textarea.tsx b/apps/researcher/src/components/form/textarea.tsx
index 6a71fd61e..a7d0f704b 100644
--- a/apps/researcher/src/components/form/textarea.tsx
+++ b/apps/researcher/src/components/form/textarea.tsx
@@ -1,4 +1,5 @@
 import {useFormContext} from 'react-hook-form';
+import {Textarea as HeadlessTextarea} from '@headlessui/react';
 
 interface Props extends React.HTMLProps<HTMLInputElement> {
   name: string;
@@ -8,7 +9,7 @@ export function Textarea({name, cols = 30, rows = 3}: Props) {
   const {register} = useFormContext();
 
   return (
-    <textarea
+    <HeadlessTextarea
       {...register(name)}
       cols={cols}
       rows={rows}

From 6d02049f2f995fb2cf2408091647082ec48f9693 Mon Sep 17 00:00:00 2001
From: Barbara Honhoff <barbara@honhoff.dev>
Date: Wed, 26 Jun 2024 13:28:17 +0200
Subject: [PATCH 2/2] Fix failing test

---
 apps/researcher/e2e/object.test.ts                       | 5 +----
 .../app/[locale]/objects/[id]/user-enrichment-form.tsx   | 1 +
 .../src/components/form/checkbox-with-label.tsx          | 9 ++++++++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/researcher/e2e/object.test.ts b/apps/researcher/e2e/object.test.ts
index feecc2b81..8143569f2 100644
--- a/apps/researcher/e2e/object.test.ts
+++ b/apps/researcher/e2e/object.test.ts
@@ -86,10 +86,7 @@ test.describe('Object details page logged in', () => {
       .getByTestId('enrichment-form')
       .locator('textarea[name="citation"]')
       .fill('End to end test');
-    await page
-      .getByTestId('enrichment-form')
-      .locator('input[name="agreedToLicense"]')
-      .check();
+    await page.getByTestId('agreed-to-license').click();
     await page.getByTestId('community-selector').click();
     page.keyboard.press('ArrowDown');
     page.keyboard.press('Enter');
diff --git a/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx b/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx
index 8d281bf2d..ab083fee8 100644
--- a/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx
+++ b/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx
@@ -197,6 +197,7 @@ export function UserEnrichmentForm({
             <div className="mt-4">
               <CheckboxWithLabel
                 name="agreedToLicense"
+                testId="agreed-to-license"
                 labelText={t.rich('license', {
                   link: text => (
                     <a
diff --git a/apps/researcher/src/components/form/checkbox-with-label.tsx b/apps/researcher/src/components/form/checkbox-with-label.tsx
index ea598460a..65a3755b5 100644
--- a/apps/researcher/src/components/form/checkbox-with-label.tsx
+++ b/apps/researcher/src/components/form/checkbox-with-label.tsx
@@ -6,9 +6,15 @@ import {useController, useFormContext} from 'react-hook-form';
 interface Props extends React.HTMLProps<HTMLInputElement> {
   name: string;
   labelText: string | ReactNode;
+  testId?: string;
 }
 
-export function CheckboxWithLabel({name, labelText, ...inputProps}: Props) {
+export function CheckboxWithLabel({
+  name,
+  labelText,
+  testId,
+  ...inputProps
+}: Props) {
   const {control} = useFormContext();
   const controller = useController({control, name});
 
@@ -17,6 +23,7 @@ export function CheckboxWithLabel({name, labelText, ...inputProps}: Props) {
       <Checkbox
         {...inputProps}
         {...controller.field}
+        data-testid={testId}
         as="div"
         className="shrink-0 flex-wrap group size-6 bg-white rounded border border-neutral-300 p-1 ring-1 ring-white ring-inset"
       >