javascript - 通过的 react 组件在表单标签的可访问性单元测试中失败了吗？

Question

我的可重用组件看起来像这样的 `jsx

 return <div>
  <label className="label" htmlFor={name}>
  </label>
  <textarea
    name={name}
    aria-label={name}
    id={id || name}
    onChange={this.onChange}
    value={value}
  />
</div>;

并且它像下面这样被拉入另一个组件中

    <TxtareaComp
          name="Lorem"
          value={this.props.lorem}
          id="lorem-ipsum"
          onChange={this.props.lorem}
          />

渲染后看起来像这样

<div><label class="label"  for="Lorem">Lorem</label>
<textarea name="lorem" " id="Lorem">
 </textarea>
  </div>

工作得很好，但问题是它对 accessibility

的测试失败了

它说我缺少标签

   Sniffybara::PageNotAccessibleError:
   Form elements must have labels

   Elements:
   <TxtareaComp...
   ["#lorem-ipsum"]

虽然有一个标签，但我如何绕过这个问题来解决这个问题......同时使用现有的组件？

Answer 1

for 需要 id，而不是 input 的名称。因此，如果您通过 id={id || 设置 id输入上的name}，需要同样设置htmlFor:htmlFor={id ||名称在标签上。

当然，您还有其他选择:将input inside label。那么你不需要 for 或 input 上的 id(为此；你可能需要 id为别的)。但能否做到这一点取决于您的造型。