title: Unable to get the name of the input when using getByRole while testing with testing-library
body: <p>I'm testing a component (let's call it MyComponent) which contains a Material Ui TextField component:</p>
  <pre><code>&lt;TextField
                name=&quot;code&quot;
                aria-label=&quot;code&quot;
                onKeyPress={keyPressHandler(codeRegExp)}
                value={values.code}
                placeholder={codePlaceholder}
                onChange={handleChange}
                InputProps={{
                  classes: {
                    input: classes.code,
                  },
                }}
                onBlur={handleBlur}
                helperText={
                  touchedValues.code &amp;&amp; errorValues.code ? errorValues.code : ''
                }
                FormHelperTextProps={{classes: {root: classes.errorMessage}}}
              /&gt;
  </code></pre>
  <p>I wrote the test for that:</p>
  <pre><code>test('Checking the initial rendering of the component', () =&gt; {
      const initialState = {
        refs: {
          choice: '',
          creationDate: '',
        },
      };
      render(&lt;MyComponent /&gt;, {initialState});
      expect(screen.getByRole('textbox', {name: /code/i})).toBeInTheDocument();
    });
  </code></pre>
  <p>The test fails and I got this error:</p>
  <pre><code> TestingLibraryElementError: Unable to find an accessible element with the role &quot;textbox&quot; and name `/code/i`
  
      Here are the accessible roles:
  
        textbox:
  
        Name &quot;&quot;:
        &lt;input
          aria-invalid=&quot;false&quot;
          class=&quot;MuiInputBase-input MuiInput-input makeStyles-code-9&quot;
          name=&quot;code&quot;
          placeholder=&quot;ABC_123&quot;
          type=&quot;text&quot;
          value=&quot;&quot;
        /&gt;
  </code></pre>
  <p>Should I add the <code>role=textbox </code> for the TextField Component or does the <code>textbox</code> role does not works with input elements?</p>