title: Why does getByRole not find a button with aria-label?
body: <p>I have a use case (a modal dialog) for a button with a hidden label that uses an icon as its content. It's essentially the same use case as <a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html" rel="nofollow noreferrer">described here</a> in Example 1:</p>
  <pre><code>&lt;button aria-label=&quot;Close&quot; onClick={() =&gt; doSomething()}&gt;&lt;svg&gt;...&lt;/svg&gt;&lt;/button&gt;
  </code></pre>
  <p>(I just have an SVG element as a child of the button instead of the text &quot;X&quot;.)</p>
  <p>When I execute this query:</p>
  <pre><code>screen.getByRole('button', { name: 'Close' });
  </code></pre>
  <p>the button isn't found. The debug output tells me that this button's name is &quot;&quot;. Yet the <a href="https://testing-library.com/docs/dom-testing-library/api-queries#byrole" rel="nofollow noreferrer">documentation</a> states, &quot;You can query the returned element(s) by their accessible name. The accessible name is for simple cases equal to e.g. the label of a form element, or the text content of a button, <strong>or the value of the aria-label attribute</strong>.&quot; (emphasis mine)</p>
  <p>I found that <a href="https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships#aria-label" rel="nofollow noreferrer">this example</a> also supports my use case.</p>
  <p>So why does <code>getByRole('button', {name: 'Close'})</code> -- or even the simpler <code>getByLabelText('Close')</code> for that matter -- not find this button element?</p>