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 || name}：input。

当然，您还有另一种选择：将label 置于 for内。然后，id上不需要input或id（为此;您可能需要var a = []; //Object container for(var i = 0; i < a.lenght; i++){ for(var j = i+1; j < a.lenght; j++){ var object1 = a[i]; var object2 = a[j]; //collision detection } }来获取其他内容）。但是，你能否做到这一点取决于你的造型。

传递反应组件在表单标签的可访问性单元测试中失败了吗？

1 个答案: