Accessibility - breadcrumb <a> tags cannot be navigated with keyboard

[pinkkis]

🐞 Bug report

Description

Breadcrumbs use a (click) handler for navigation, and do not have a [href] attribute. Pressing tab key to navigate will skip these links. They should either have a href attribute, or then add a tabindex=0 (or customizable).

Edit: Also, if you add tabindex programatically to the <a> tags, you cannot activate the link with a keyboard, as it only has a (click) handler, no keyboard handlers.

🔬 Minimal Reproduction

Any regular use

💻Your Environment

Angular Version:

Angular: 9.1.12
Node: 15.0.1
OS: darwin x64

xng-breadcrumb version
6.3.4

[dedrazer]

I think this also prevents the cursor from turning into a pointer when it hovers over a breadcrumb

[pinkkis]

Updated to add the edit about not being able to activate links with keyboard

[udayvunnam]

A recent move from routerLink to (click) caused this issue. routerLink handles a11y implicitly. We had to use (click) to provide support for breadcrumb.routeInterceptor.

Thanks for reporting this issue on a11y. A fix will be rolled out shortly!

[udayvunnam]

@pinkkis @dedrazer This issue is fixed and released with version 6.5.0 🎉. Thanks for raising the issue.

[pinkkis]

Thanks a lot!