Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use the headless ui form components for accessibility #675

Merged
merged 2 commits into from
Jun 26, 2024
Merged

Use the headless ui form components for accessibility #675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4429832
Use the headless ui form components for accessibility
barbarah Jun 26, 2024
6d02049
Fix failing test
barbarah Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions apps/researcher/e2e/object.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
253 changes: 140 additions & 113 deletions apps/researcher/src/app/[locale]/objects/[id]/(provenance)/add-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -430,10 +457,10 @@ export default function AddProvenanceForm({
{t('saveButton')}
</PrimaryButton>
</ButtonGroup>
</Tab.Panel>
</TabPanel>
</form>
</Tab.Panels>
</Tab.Group>
</TabPanels>
</TabGroup>
</FormProvider>
);
}
Expand Down
Loading