fix(angular): remove the tabindex set by routerLink from Ionic components

[brandyscarney]

Issue number: resolves #20632

---

What is the current behavior?

When using the routerLink directive in Angular, it automatically adds tabindex="0" to the element. This creates issues with Ionic components that render native button or anchor elements, as they have their own focus management. As a result, when navigating between list items with routerLink using the Tab key, you need to press the Tab key twice to move to the next item. This problem is illustrated in the following demo:

Related Angular issue: angular/angular#28345

What is the new behavior?

Updated our RouterLinkDelegateDirective to check if the element using routerLink is one of the following Ionic components: ion-back-button, ion-breadcrumb, ion-button, ion-card, ion-fab-button, ion-item, ion-item-option, ion-menu-button, ion-segment-button, or ion-tab-button. If so, it removes the tabindex attribute from the element. This allows these Ionic components to let the native button or anchor element handle the focus.

This solution is demonstrated in the following demo:

Note

I did not include the ion-router-link component in the list to remove tabindex because the router link documentation does not recommend using it with Angular:

Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an <a> and routerLink with the Angular router.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 8.2.7-dev.11722448707.1e8c66e6

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2024 5:49pm