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

packages/angular/common/src/directives/navigation/router-link-delegate.ts

@@ -31,12 +31,45 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges {
 
   ngOnInit(): void {
     this.updateTargetUrlAndHref();
+    this.updateTabindex();
   }
 
   ngOnChanges(): void {
     this.updateTargetUrlAndHref();
   }
 
+  /**
+   * The `tabindex` is set to `0` by default on the host element when
+   * the `routerLink` directive is used. This causes issues with Ionic
+   * components that wrap an `a` or `button` element, such as `ion-item`.
+   * See issue https://github.com/angular/angular/issues/28345
+   *
+   * This method removes the `tabindex` attribute from the host element
+   * to allow the Ionic component to manage the focus state correctly.
+   */
+  private updateTabindex() {
+    // Ionic components that render a native anchor or button element
+    const ionicComponents = [
+      'ION-BACK-BUTTON',
+      'ION-BREADCRUMB',
+      'ION-BUTTON',
+      'ION-CARD',
+      'ION-FAB-BUTTON',
+      'ION-ITEM',
+      'ION-ITEM-OPTION',
+      'ION-MENU-BUTTON',
+      'ION-SEGMENT-BUTTON',
+      'ION-TAB-BUTTON',
+    ];
+    const hostElement = this.elementRef.nativeElement;
+
+    if (ionicComponents.includes(hostElement.tagName)) {
+      if (hostElement.getAttribute('tabindex') === '0') {
+        hostElement.removeAttribute('tabindex');
+      }
+    }
+  }
+
   private updateTargetUrlAndHref() {
     if (this.routerLink?.urlTree) {
       const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree));

packages/angular/test/base/e2e/src/lazy/router-link.spec.ts

@@ -123,6 +123,16 @@ describe('Router Link', () => {
       testBack();
     });
   });
+
+  describe('tabindex', () => {
+    it('should have tabindex="0" with a native span', () => {
+      cy.get('#span').should('have.attr', 'tabindex', '0');
+    });
+
+    it('should not have tabindex set with an ionic button', () => {
+      cy.get('#routerLink').should('not.have.attr', 'tabindex');
+    });
+  });
 });
 
 function testForward() {

packages/angular/test/base/e2e/src/standalone/router-link.spec.ts

@@ -2,7 +2,7 @@ describe('RouterLink', () => {
   beforeEach(() => {
     cy.visit('/standalone/router-link');
   });
-  
+
   it('should mount the root component', () => {
     cy.ionPageVisible('app-router-link');
 
@@ -21,4 +21,12 @@ describe('RouterLink', () => {
 
     cy.url().should('include', '/standalone/popover');
   });
+
+  it('should have tabindex="0" with a native span', () => {
+    cy.get('span').should('have.attr', 'tabindex', '0');
+  });
+
+  it('should not have tabindex set with an ionic button', () => {
+    cy.get('ion-button').should('not.have.attr', 'tabindex');
+  });
 });

packages/angular/test/base/src/app/lazy/router-link/router-link.component.html

@@ -36,4 +36,5 @@
   <p><button id="queryParamsFragment" routerLink="/lazy/router-link-page2/MyPageID==" [queryParams]="{ token: 'A&=#Y' }"
       fragment="myDiv1">Query Params and Fragment</button></p>
 
+  <p><span routerLink="/lazy/router-link-page" id="span">span[routerLink]</span></p>
 </ion-content>

packages/angular/test/base/src/app/standalone/router-link/router-link.component.html

@@ -4,3 +4,9 @@
 <button routerLink="/standalone/popover" routerDirection="root">
   I'm a button
 </button>
+<span routerLink="/standalone/popover" routerDirection="root">
+  I'm a span
+</span>
+<ion-button routerLink="/standalone/popover" routerDirection="root">
+  I'm an ion-button
+</ion-button>