header/footer elements incorrectly inferred with banner/contentinfo role when nested in section

• @testing-library/dom version: 10.4.0
• Testing Framework and version: Jest
• DOM Environment:

Relevant code or config:

    <header>Header</header>
    <main>Main</main>
    <section>
      <header>Section header</header>
      <footer>Section header</footer>
    </section>
    <footer>Footer</footer>

What you did:

Expected that only header/footer elements that are decedents of section elements don't have roles of banner / contentinfo as per the MDN docs:

By default, the HTML's

element has an identical meaning to the banner landmark, unless it is a descendant of , , , , or , at which point exposes a generic role, and not the equivalent of the site-wide banner.

When it is an immediate descendant of the using the

element will automatically communicate a section has a role of contentinfo (save for a known issue in VoiceOver). If at all possible, prefer using instead. Note that a footer element nested within an article, aside, main, nav, or section is not considered contentinfo.

What happened:

Elements have the aforementioned roles.

Reproduction:

https://codesandbox.io/p/sandbox/react-testing-library-bug-reproduction-sw7zzf?file=%2Fsrc%2FApp.js%3A4%2C1-12%2C6

Problem description:

Conflicts with the MDN docs/browser accessibility tree.

Start with the linked CodeSandbox reproduction and trace how DOM Testing Library infers roles for the header and footer elements. Compare the result with the documented expectations, then add regression coverage showing that elements nested in a section do not expose banner or contentinfo roles.