Product

axe-core

Product Version

4.4.1

Latest Version

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

Issue Description

Expectation

Given a dialog which is labelled by a header:

<section role="dialog" aria-labelledby="dialog-header">
  <header id="dialog-header">My header</header>
  <div>Some dialog content</div>
</section>

I would expect the accessible name of the dialog to be identified as "My header"

Actual

I get a violation on "ARIA dialog and alertdialog nodes should have an accessible name (aria-dialog-name)"

On further investigation:

• It is correctly identifying the aria-labelledby link
• In determining the text of the header, it first considers its role
• The role is identified as banner, because https://github.com/dequelabs/axe-core/blob/522bdfb57e/lib/commons/standards/implicit-html-roles.js#L17 only links the header to the section if the section does not have a role attribute.
• Banners are not named from contents (https://github.com/dequelabs/axe-core/blob/522bdfb57e/lib/commons/aria/named-from-contents.js#L36) so the contents are ignored, so the element linked by aria-labelledby is identified as empty, hence the violation

How to Reproduce

See HTML in Expectation

Additional context

I haven't verified if a screen reader identifies the header as the dialog header.

I haven't seen anywhere that says that sectioning HTML elements are only sectioning when they don't have a role. https://www.w3.org/TR/2010/WD-html5-20101019/content-models.html#sectioning-content-0

All of the valid roles for a section in https://www.w3.org/TR/2010/WD-html5-20101019/content-models.html#annotations-for-assistive-technology-products-aria seem like they should still act as sectioning elements. I think invalid roles would be caught by the corresponding rule?

I can work around this by explicitly setting role="none" on my header.