Heading-order may not correctly calculate level of heading element with aria-level

[straker]

ARIA allows <h1-6> elements to have the aria-level attributes. This causes a potential bug in our heading-order check as we only look at aria-level if the element has a role=heading attribute. Meaning that <h1 aria-level="6">Goodbye</h1> is calculated as a level 1 heading instead of a level 6 heading.

However, this doesn't work in all browsers. In modern browsers the aria-level is used to determine the heading level, but in IE 11 / JAWS the aria-level is ignored:

• FireFox / NVDA - "Heading level 6, Goodbye"
• Chrome / JAWS - "Heading level 6, Goodbye"
• IE 11 / JAWS - "Heading level 1, Goodbye"
• Safari / VO - "Heading level 6, Goodbye"
• Android Chrome / Voice Assistant - "Goodbye, Heading 6"

[straker]

Since everyone else is using the aria-level to calculate the level, we should update our code to do that.

[padmavemulapati]

Validated with the latest develop branch code base,
1.When we pass aria-level="6" even it tagged in h1, and norole` attribute is passing . It is announcing as heading 6.

2. we only look at aria-level if the element has a role=heading attribute. Meaning that <h2 aria-level="5" and role=heading>hello</h2> is calculated as a level 5 heading instead of a level 2 heading.

[straker]

No docs