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

[matt-pawley]

• @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.