フォームラベルのアクセシビリティユニットテストで、合格した反応コンポーネントが失敗しましたか？

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はinputのid、ない名前を、必要とします。入力時にをid={id || name}に設定する場合、htmlForと同じ方法でラベルにhtmlFor={id || name}を設定する必要があります。

もちろん、別のオプションがあります。inputをのlabelに入れます。次に、にはforまたはidは必要ありません（このためには、他に何かのためにidが必要な場合があります）。しかし、あなたができるかどうかは、あなたのスタイリングに依存します。