title: `getByRole` can't find the name of the appropriate textbox
body: <p>Here is the test for the :</p>
  <pre class="lang-js prettyprint-override"><code>  it(&quot;changes the state when body input is changed&quot;, () =&gt; {
      render(&lt;CommentForm /&gt;)
      // let input = screen.getByLabelText(&quot;Your Name&quot;);
  
      let input = screen.getByRole(&quot;textbox&quot;, { name: &quot;Your Comment&quot; });
      fireEvent.change(input, { target: { value: &quot;MyComment&quot; } });
      expect(input.value).toEqual(&quot;MyComment&quot;);
    });
  
  </code></pre>
  <p>With the commented line it works (when I search with <code>getByLabelText</code>). Here is what I am getting when I try to find it with <code>getByRole</code>:</p>
  <pre><code> Unable to find an accessible element with the role &quot;textbox&quot; and name &quot;Your Comment&quot;
  
      Here are the accessible roles:
  
        document:
  
        Name &quot;&quot;:
        &lt;body /&gt;
  
        --------------------------------------------------
        generic:
  
        Name &quot;&quot;:
        &lt;div /&gt;
  
        Name &quot;&quot;:
        &lt;div
          class=&quot;input-group&quot;
        /&gt;
  
        Name &quot;&quot;:
        &lt;div
          class=&quot;input-group&quot;
        /&gt;
  
        --------------------------------------------------
        heading:
  
        Name &quot;Post a Comment&quot;:
        &lt;h2 /&gt;
  
        --------------------------------------------------
        textbox:
  
        Name &quot;Your Name&quot;:
        &lt;input
          id=&quot;author-name&quot;
          name=&quot;author&quot;
          type=&quot;text&quot;
          value=&quot;&quot;
        /&gt;
  
        Name &quot;&quot;:
        &lt;textarea
          cols=&quot;30&quot;
          id=&quot;body&quot;
          name=&quot;body&quot;
          rows=&quot;10&quot;
        /&gt;
  
  </code></pre>
  <p>So it seems like the name is empty but I am not sure why that is.</p>
  <p>And here is the actual component:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import useInput from &quot;../hooks/useInput&quot;;
  
  const CommentForm = ({ onSubmit }) =&gt; {
    const { value: author, reset: resetAuthor, bind: bindAuthor } = useInput(&quot;&quot;);
    const { value: body, reset: resetBody, bind: bindBody } = useInput(&quot;&quot;);
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
      onSubmit({ author, body }, resetInputs);
    };
    const resetInputs = () =&gt; {
      resetAuthor();
      resetBody();
    };
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;h2&gt;Post a Comment&lt;/h2&gt;
        &lt;div className=&quot;input-group&quot;&gt;
          &lt;label htmlFor=&quot;author-name&quot;&gt;Your Name&lt;/label&gt;
          &lt;input id=&quot;author-name&quot; type=&quot;text&quot; name=&quot;author&quot; {...bindAuthor} /&gt;
        &lt;/div&gt;
  
        &lt;div className=&quot;input-group&quot;&gt;
          &lt;label htmlFor=&quot;body&quot;&gt;Your Comment&lt;/label&gt;
          &lt;textarea
            id=&quot;body&quot;
            name=&quot;body&quot;
            cols=&quot;30&quot;
            rows=&quot;10&quot;
            {...bindBody}
          &gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    );
  };
  
  export default CommentForm;
  
  </code></pre>
  <p>Can anyone see the issue here. I am sure it should work and I don't see any reason why the author input can be grabbed with <code>getByRole</code> and name but this one can't.</p>