feat(conform-react)!: default aria attributes to true

edmundhung · Jul 17, 2023 · 008a32b · 008a32b
1 parent 5b68f7a
commit 008a32b
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 77 deletions.
diff --git a/docs/accessibility.md b/docs/accessibility.md
@@ -66,7 +66,6 @@ function Example() {
  <input
  {...conform.input(message, {
  type: 'text',
- ariaAttributes: true,
  })}
  />
  <div id={conform.errorId(message)}>

diff --git a/docs/integrations.md b/docs/integrations.md
@@ -75,7 +75,6 @@ function Example() {
  <input
  ref={shadowInputRef}
  {...conform.input(currency, {
- ariaAttributes: true,
  hidden: true,
  })}
  />
@@ -148,7 +147,6 @@ function Select({ options, ...config }: SelectProps) {
  <input
  ref={shadowInputRef}
  {...conform.input(config, {
- ariaAttributes: true,
  hidden: true,
  })}
  />
@@ -184,7 +182,6 @@ function Select({ options, ...config }: SelectProps) {
  <input
  ref={shadowInputRef}
  {...conform.input(config, {
- ariaAttributes: true,
  hidden: true,
  })}
  onFocus={() => customInputRef.current?.focus()}
@@ -217,7 +214,6 @@ function Select({ options, .. }: SelectProps) {
  <input
  ref={shadowInputRef}
  {...conform.input(config, {
- ariaAttributes: true,
  hidden: true,
  })}
  onChange={(e) => setValue(e.target.value)}

diff --git a/packages/conform-react/README.md b/packages/conform-react/README.md
@@ -373,7 +373,6 @@ function Example() {
  <input
  {...conform.input(title, {
  type: 'text',
- ariaAttributes: true,
  })}
  />
  </form>

diff --git 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 extends Object>(props: Props): Props {
+function cleanup<Props>(props: Props): Props {
  for (const key in props) {
  if (props[key] === undefined) {
  delete props[key];
@@ -87,21 +87,25 @@ function cleanup<Props extends Object>(props: Props): Props {
 }
 
 function getFormElementProps(
- config: FieldConfig<any>,
- options?: BaseOptions,
+ config: FieldConfig<unknown>,
+ 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<any>,
+ config: FieldConfig<unknown>,
  options?: ControlOptions,
 ): FormControlProps {
  return cleanup({
@@ -215,7 +219,7 @@ export function textarea<Schema extends Primitive | undefined | unknown>(
 }
 
 export function fieldset<
- Schema extends Record<string, any> | undefined | unknown,
+ Schema extends Record<string, unknown> | undefined | unknown,
 >(config: FieldConfig<Schema>, options?: BaseOptions): FormControlProps {
  return getFormElementProps(config, options);
 }

diff --git a/playground/app/routes/input-attributes.tsx b/playground/app/routes/input-attributes.tsx
@@ -81,15 +81,13 @@ export default function Example() {
  <input
  {...conform.input(title, {
  type: 'text',
- ariaAttributes: true,
  description: enableDescription,
  })}
  />
  </Field>
  <Field label="Description" config={description}>
  <textarea
  {...conform.textarea(description, {
- ariaAttributes: true,
  description: enableDescription,
  })}
  />
@@ -98,15 +96,13 @@ export default function Example() {
  <input
  {...conform.input(images, {
  type: 'file',
- ariaAttributes: true,
  description: enableDescription,
  })}
  />
  </Field>
  <Field label="Tags" config={tags}>
  <select
  {...conform.select(tags, {
- ariaAttributes: true,
  description: enableDescription,
  })}
  >
@@ -124,7 +120,6 @@ export default function Example() {
  <input
  {...conform.input(rating, {
  type: 'number',
- ariaAttributes: true,
  description: enableDescription,
  })}
  />