Accessibility: Links should be links (and be focusable)

[marcysutton]

This HTML is problematic for keyboard and screen reader users:

<a role="button" *ngIf="!last && url == prefix" (click)="navigateTo('/')">{{url}}</a>
<a role="button" *ngIf="!last && url != prefix" (click)="navigateTo(url)">{{friendlyName(url)}}</a>

The role="button" here isn't enough to make these accessible in the absence of href attributes; that just changes the role of the link to a button in a screen reader (and doesn't impact focusability). Is there a reason why you can't use href="/" / href={url} and actual client-side routing instead of (click)? That way you could leverage the anchor tag's default capabilities, including focusability.

In any case, without href you at least need tabindex="0" to make these items focusable to keyboard and screen reader users. I'd also recommend removing the role="button" since these are navigating the user someplace.

For more information on links vs. buttons, I wrote a blog post: https://marcysutton.com/links-vs-buttons-in-modern-web-applications/

[cmegown]

This should be a pretty quick fix to implement. Additional information can be found here: https://www.w3.org/TR/wai-aria-practices/#breadcrumb