ARIA live region triggers region rule violation

[madalynrose]

Description:

Gatsby updated navigation to announce when client-side routes are changed. This is accomplished through an ARIA live region with role="alert" and aria-live="assertive". Based on #1073 this should not cause any accessibility violations. However, technologies that rely on axe-core, including cypress-axe and the aXe browser extension are reporting a violation on the element. An issue in Gatsby was opened but I believe this is an issue with aXe itself.

Expectation:

No accessibility violations are found

Actual:

aXe reports that the region rule "Some page content is not contained by landmarks" has been violated after navigation has occurred

Motivation:

This live region is intended to increase the accessibility of client-side applications. Adding a landmark to this live region does not make semantic sense because it does not have user impact. This rule should allow this element to exist outside of landmarks.

axe-core version: 3.4.0

This can be reproduced on Gatsby's pages by running the aXe extension.

[straker]

I am able to reproduce this (go to https://www.gatsbyjs.org/docs/ and then navigate to Features). I think we just need to rearrange an if statement in our code to fix this. We appear to assume that an aria-live region will not have an explicit role set and so fail before we check if the aria-live attribute is set https://github.com/dequelabs/axe-core/blob/develop/lib/checks/navigation/region.js#L15-L21

[padmavemulapati]

on making testfile, <div aria-live="assertive" role="alert" id="target"><p>This is random content.</p></div> , not finding any voilations