Product

axe-core

Product Version

Chrome extension + axe-core 4.6.3 on Cypress

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

I am getting the "Document should not have more than one banner landmark" error on header elements placed inside webcomponents with the role="article"

When i test the elements on a storybook page, both with the Chrome extension and with Cypress (using axe-core), i get this error:

I understand that the <header> element has a role similar to the banner, unless it is a descendent of an <aside>, <article>, <main>, ... (like mentioned here)

These <header> elements are not direct descendents of any of these tags, but they are a direct descendent of a webcomponent with a role="article", so i expected them to have the same behavior as if they were inside an <article> tag

How to Reproduce

Unless i am understanding this issue incorrectly, a <header> element inside an <article> should not be a problem. I also think if it is inside a webcomponent with the role="article" it shouldn't throw the error so:

1. This should throw the error

<my-component>
    <header>....</header>
</my-component>

<my-component>
    <header>....</header>
</my-component>

2. This should not throw the error

<article>
    <header>....</header>
</article>

<article>
    <header>....</header>
</article>

3. This also should not throw the error

<my-component role="article">
    <header>....</header>
</my-component>

<my-component role="article">
    <header>....</header>
</my-component>