False Positive: Angular skiplink using routerLink & fragment

[MrGrigri]

When utilizing the Angular router module as a skip-link, the Axe browser extension for Chrome creates a false positive claiming: "All page content must be contained by landmarks". I believe this might be an issue due to the fact that there is no href attribute on the link itself. There are a couple of Angular directives (routerLink and fragment) as well as a click event binding that controls what happens when the user clicks or interacts with the link.

• Link to live demo: https://angular-4opnbd.stackblitz.io

axe extension version: 3.5.2
axe extension on: Chrome (69)

Browser and Assistive Technology versions

For Tooling issues:
- Node version: 8.11.1
- Platform:  Windows (10/1709)

[marcysutton]

@MrGrigri the example won't load for me, can you check to make sure your demo works without authenticating on stackblitz?

[MrGrigri]

Yeah, I opened it in an 'incognito' window in chrome and it works fine.

[marcysutton]

Hmm, still won't load for me.

[MrGrigri]

My guess is your local network is blocking it.

[marcysutton]

It was something weird with Chrome–I can get it to load in Firefox.

The link does render an href, but I think it's being thrown off by the clientside routing. If you remove the / from /#main-content in the skip link href, it passes. Sounds related to the fix that was added in #824, except this is the other way around (routing for skip links, which was excluded). Any thoughts on this @WilcoFiers? Seems like we can't really have it both ways...?

[MrGrigri]

Yeah, Angular adds the href attribute...there's no way of changing that (as far as I know)

[marcysutton]

It wouldn't be a focusable skip link without the href, so that part seems necessary.

[WilcoFiers]

Any update on this? Can you maybe provide a codepen that we could use instead @MrGrigri?

[jeeyyy]

I was able to get the example running.

Based on inspecting the DOM, it is clear that the skip link perhaps needs a landmark region (just as axe reports).

@MrGrigri
Could you try surrounding the a with nav or specifying a role=navigation on the parent div of the anchor?

[MrGrigri]

That div is only there to push the rest of the content down - ONLY FOR THE DEMO. That a element is the top-level element. Even when it's outside of that div, the error is still present. This demo is also being used for something else.

Here is the link to the code. It's all in angular.

[WilcoFiers]

After some research, I think I've figured it out. What's happening is that the skip to content link is has a / at the beginning of the href: /#main-content instead of #main-content. Axe isn't expecting you to use the / first.

This is a false positive, clearly this is a skiplink and axe is misidentifying it. We'll have to fix it. Thank you for reporting!

[MrGrigri]

Thanks for y'all's help.