ByRole queries don't support <section> as region with only a `title`

@testing-library/dom version: v8.14.0.
Testing Framework and version: N/A
DOM Environment: Chrome 103.0.5060.114 (Official Build) (64-bit)

Relevant code or config:

<section title="My Section">
  some text
</section>

What you did:

screen.getByRole('region')

What happened:

TestingLibraryElementError: Unable to find an accessible element with the role "region"

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

Ignored nodes: comments, <script />, <style />

<body
  data-gr-ext-installed=""
  data-new-gr-c-s-check-loaded="14.1067.0"
>
  <div
    id="root"
  >
    <section
      title="My Section"
    >
      some text
    </section>
  </div>

Reproduction:

https://codesandbox.io/s/bold-bush-64s8n0?file=/src/App.js

Problem description:

<section> elements should have an internal browser role of section until you give them an accessible name; in which case, they implicitly have the role region: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

Implicit ARIA role region if the element has an accessible name, otherwise no corresponding role

Potential accessibility names are either an alt label, ARIA label, title, or the text content for certain elements. For whatever reason, Testing Library is not treating this <section> as a 'region' when it has an accessible name. Works fine for aria-label and aria-labelledby but not for title.

testing-library / dom-testing-library