javascript - Passed react component is failing on accessibility unit test for form label? -
my reusable component looks `jsx
return <div> <label classname="label" htmlfor={name}> </label> <textarea name={name} aria-label={name} id={id || name} onchange={this.onchange} value={value} /> </div>;
and being pulled in below inside component this
<txtareacomp name="lorem" value={this.props.lorem} id="lorem-ipsum" onchange={this.props.lorem} />
and when rendered looks
<div><label class="label" for="lorem">lorem</label> <textarea name="lorem" " id="lorem"> </textarea> </div>
works fine, problem failing tests accessibility
its saying missing label
sniffybara::pagenotaccessibleerror: form elements must have labels elements: <txtareacomp... ["#lorem-ipsum"]
although there label, how can bypass fix this... while using existing component?
for
needs id
, not name, of input
. if you're setting id
via id={id || name}
on input, need set htmlfor
same way: htmlfor={id || name}
on label.
of course, have other option: putting input
inside label
. don't need for
or id
on input
(for this; may need id
else). whether can depends on styling.
Comments
Post a Comment