fix(heading-order): use aria-level on headings in addition to role=header elements

[clottman]

Allow aria-level on hn elements to override the semantic level of the element.

Closes issue: #2971

[WilcoFiers]

This is going to fail on <h1 role="heading">. Not sure if that's a new problem, but it's a problem.

[straker]

This will return the aria-level for non-header elements like <iframe aria-level="2"></iframe>, when we actually need the iframe to be level=-1

[clottman]

The rule doesn't run on iframes, as far as I can tell.

[straker]

The rule doesn't, but we use a selector inside the evaluate to look for iframes and assign them a level of -1 so in the after we can reconstruct heading order correctly for all iframes on the page.

axe-core/lib/checks/navigation/heading-order-evaluate.js

Lines 40 to 46 in 0d6604b

	const selector = 'h1, h2, h3, h4, h5, h6, [role=heading], iframe, frame';
	// TODO: es-modules_tree
	const vNodes = querySelectorAllFilter(axe._tree[0], selector, vNode =>
	isVisible(vNode.actualNode, true)
	);
	headingOrder = vNodes.map(vNode => {

addressed

addressed

[straker]

I believe this is the last thing. Everything else looks good. Good work.

addressed

[straker]

Alright. Wilco and I talked and we came to the conclusion that we want to change how we're handling positive values. Since aria-level > 6 is handled differently by different screen readers, we're going to flag it as part of a new check for aria-valid-attr-value and call out its lack of support.

But for heading-order we're just going to accept what the user gave us so there isn't two different failures caused by the same problem.

Suggested change

	if (isNaN(ariaLevel) || ariaLevel < 1 || ariaLevel > 6) {
	if (isNaN(ariaLevel) || ariaLevel < 1) {

addressed