From 0504cbb4f9c591cc8754cd6593fc436c03d0f886 Mon Sep 17 00:00:00 2001 From: Edmund Hung Date: Mon, 17 Jul 2023 23:16:47 +0200 Subject: [PATCH 01/11] feat(conform-react)!: default aria attributes to true (#226) --- docs/accessibility.md | 1 - docs/integrations.md | 4 - packages/conform-react/README.md | 1 - packages/conform-react/helpers.ts | 26 ++-- playground/app/routes/input-attributes.tsx | 5 - tests/conform-react.spec.ts | 147 +++++++++++++-------- 6 files changed, 107 insertions(+), 77 deletions(-) diff --git a/docs/accessibility.md b/docs/accessibility.md index 3b28ab69..c0f2c6c4 100644 --- a/docs/accessibility.md +++ b/docs/accessibility.md @@ -66,7 +66,6 @@ function Example() {
diff --git a/docs/integrations.md b/docs/integrations.md index 5e5df7f7..f42d5fc0 100644 --- a/docs/integrations.md +++ b/docs/integrations.md @@ -75,7 +75,6 @@ function Example() { @@ -148,7 +147,6 @@ function Select({ options, ...config }: SelectProps) { @@ -184,7 +182,6 @@ function Select({ options, ...config }: SelectProps) { customInputRef.current?.focus()} @@ -217,7 +214,6 @@ function Select({ options, .. }: SelectProps) { setValue(e.target.value)} diff --git a/packages/conform-react/README.md b/packages/conform-react/README.md index c3fd130b..f208b96b 100644 --- a/packages/conform-react/README.md +++ b/packages/conform-react/README.md @@ -373,7 +373,6 @@ function Example() { diff --git a/packages/conform-react/helpers.ts b/packages/conform-react/helpers.ts index 50a32f29..c5c5ea8a 100644 --- a/packages/conform-react/helpers.ts +++ b/packages/conform-react/helpers.ts @@ -49,11 +49,11 @@ interface TextareaProps extends FormControlProps { type BaseOptions = | { - ariaAttributes?: false; + ariaAttributes?: true; + description?: boolean; } | { - ariaAttributes: true; - description?: boolean; + ariaAttributes: false; }; type ControlOptions = BaseOptions & { @@ -76,7 +76,7 @@ type InputOptions = ControlOptions & * Cleanup `undefined` from the dervied props * To minimize conflicts when merging with user defined props */ -function cleanup(props: Props): Props { +function cleanup(props: Props): Props { for (const key in props) { if (props[key] === undefined) { delete props[key]; @@ -87,21 +87,25 @@ function cleanup(props: Props): Props { } function getFormElementProps( - config: FieldConfig, - options?: BaseOptions, + config: FieldConfig, + options: BaseOptions = {}, ): FormElementProps { + const hasAriaAttributes = options.ariaAttributes ?? true; + return cleanup({ id: config.id, name: config.name, form: config.form, 'aria-invalid': - options?.ariaAttributes && config.errorId && config.error?.length + hasAriaAttributes && config.errorId && config.error?.length ? true : undefined, - 'aria-describedby': options?.ariaAttributes + 'aria-describedby': hasAriaAttributes ? [ config.errorId && config.error?.length ? config.errorId : undefined, - config.descriptionId && options?.description + config.descriptionId && + options.ariaAttributes !== false && + options.description ? config.descriptionId : undefined, ].reduce((result, id) => { @@ -120,7 +124,7 @@ function getFormElementProps( } function getFormControlProps( - config: FieldConfig, + config: FieldConfig, options?: ControlOptions, ): FormControlProps { return cleanup({ @@ -215,7 +219,7 @@ export function textarea( } export function fieldset< - Schema extends Record | undefined | unknown, + Schema extends Record | undefined | unknown, >(config: FieldConfig, options?: BaseOptions): FormControlProps { return getFormElementProps(config, options); } diff --git a/playground/app/routes/input-attributes.tsx b/playground/app/routes/input-attributes.tsx index 111b0c5f..081ceb11 100644 --- a/playground/app/routes/input-attributes.tsx +++ b/playground/app/routes/input-attributes.tsx @@ -81,7 +81,6 @@ export default function Example() { @@ -89,7 +88,6 @@ export default function Example() {