React表单条件渲染出现ARIA与标签ID重复错误求助

问题背景 #

现有一个接收fields props的Form组件，会根据字段名称条件渲染普通输入框或复选框。虽然运行时每个字段只会渲染一种输入组件，但axe检测工具报错：

IDs used in ARIA and labels must be unique: Document has multiple elements referenced with ARIA with the same id attribute: {expression}Microsoft Edge Tools axe/parsing.

原因是静态分析时，检测工具发现两个渲染函数（createInputField和createCheckboxField）都使用field.name作为input的ID，误判为重复ID。

有效解决方案 #

方案1：合并渲染函数，消除静态重复ID #

将两个独立的渲染函数合并到createFormItem中，确保每个字段在静态代码中仅对应一个input元素，从根源避免检测工具误判：

function createFormItem(field: Field) {
  const fieldId = field.name;
  if (field.name === 'remember') {
    return (
      <div key={field.name} className="flex items-center">
        <input
          type={field.type}
          id={fieldId}
          className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
          {...register(field.name)}
        />
        <label
          htmlFor={fieldId}
          className="ml-2 block text-sm text-gray-900"
        >
          {field.label}
        </label>
      </div>
    );
  } else {
    return (
      <div key={field.name}>
        <label
          htmlFor={fieldId}
          className={`block text-sm font-medium text-gray-700 ${errors[field.name] ? 'text-red-700' : ' '}`}
        >
          {field.label}
        </label>
        <input
          type={field.type}
          id={fieldId}
          className={`appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 ${errors[field.name] ? 'border-red-300' : ' '}`}
          {...register(field.name, {
            required: 'This field is required.',
          })}
        />
        {errors[field.name] && (typeof errors[field.name] === 'string' || 'message') && (
            <span className="font-medium text-red-500">
              {errors[field.name]?.message?.toString()}
            </span>
          )}
      </div>
    );
  }
}

方案2：传递唯一ID给子渲染函数 #

如果希望保留独立的渲染函数，可以在createFormItem中生成唯一ID，再传递给子函数，确保静态代码中不会出现相同的ID赋值逻辑：

// 修改createFormItem，生成唯一ID并传递
function createFormItem(field: Field) {
  // 基于字段类型生成唯一ID，也可使用其他唯一标识规则
  const fieldId = `${field.name}-${field.type}`;
  return field.name === 'remember'
    ? createCheckboxField(field, fieldId)
    : createInputField(field, fieldId);
}

// 修改createInputField，接收fieldId参数
function createInputField(field: Field, fieldId: string) {
  return (
    <div key={field.name}>
      <label
        htmlFor={fieldId}
        className={`block text-sm font-medium text-gray-700 ${errors[field.name] ? 'text-red-700' : ' '}`}
      >
        {field.label}
      </label>
      <input
        type={field.type}
        id={fieldId}
        className={`appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 ${errors[field.name] ? 'border-red-300' : ' '}`}
        {...register(field.name, {
          required: 'This field is required.',
        })}
      />
      {errors[field.name] && (typeof errors[field.name] === 'string' || 'message') && (
          <span className="font-medium text-red-500">
            {errors[field.name]?.message?.toString()}
          </span>
        )}
    </div>
  );
}

// 修改createCheckboxField，接收fieldId参数
function createCheckboxField(field: Field, fieldId: string) {
  return (
    <div key={field.name} className="flex items-center">
      <input
        type={field.type}
        id={fieldId}
        className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
        {...register(field.name)}
      />
      <label
        htmlFor={fieldId}
        className="ml-2 block text-sm text-gray-900"
      >
        {field.label}
      </label>
    </div>
  );
}

方案3：给不同类型字段添加ID后缀 #

在两个渲染函数中，针对不同类型的字段添加独特后缀，确保静态代码中的ID表达式不同，避免检测工具误判：

// 修改createInputField的ID
function createInputField(field: Field) {
  const fieldId = `${field.name}-input`;
  return (
    <div key={field.name}>
      <label
        htmlFor={fieldId}
        className={`block text-sm font-medium text-gray-700 ${errors[field.name] ? 'text-red-700' : ' '}`}
      >
        {field.label}
      </label>
      <input
        type={field.type}
        id={fieldId}
        className={`appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 ${errors[field.name] ? 'border-red-300' : ' '}`}
        {...register(field.name, {
          required: 'This field is required.',
        })}
      />
      {/* 错误提示部分保持不变 */}
    </div>
  );
}

// 修改createCheckboxField的ID
function createCheckboxField(field: Field) {
  const fieldId = `${field.name}-checkbox`;
  return (
    <div key={field.name} className="flex items-center">
      <input
        type={field.type}
        id={fieldId}
        className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
        {...register(field.name)}
      />
      <label
        htmlFor={fieldId}
        className="ml-2 block text-sm text-gray-900"
      >
        {field.label}
      </label>
    </div>
  );
}

注意：此方案需要确保label的htmlFor与对应input的id完全一致，否则会导致标签与输入框失去关联。

内容的提问来源于stack exchange，提问作者S L