bug: ion-button with [routerLink] will display a border if being activated

[wilk-polarny]

Bug Report

Ionic version:

[x] 4.11.9

Current behavior:
When activating an <ion-button> element with a [routerLink] directive being set, the button will display show a border.

Expected behavior:
No border should be displayed when a button gets activated.

Steps to reproduce:

• Use an empty template to create an ion-button like below.
• Either click the element to briefly see the border or cycle through the elements with tab

Related code:

<ion-button expand="block" fill="clear" [routerLink]="['/tabs/tab2']">Some button</ion-button>

https://stackblitz.com/edit/ionic-v4-angular-tabs-9a3req

Other information:
I'm not sure whether buttons are supposed to work like this, but this does not happen with a href being set.
I would only expect such behaviour in a real browser app, where anchors are being colored accordingly - but not within a Hybrid App on iOS :)

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/Users/Wilk/.nvm/versions/node/v10.16.3/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.9
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

   cordova-res (update available: 0.9.0) : 0.8.1
   native-run                            : 0.3.0

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.2
   NodeJS     : v10.16.3 (/Users/Wilk/.nvm/versions/node/v10.16.3/bin/node)
   npm        : 6.9.0
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504

[brandyscarney]

Thanks for the issue! This is actually an issue due to Angular adding tabindex=0 to the ion-button component. The outline can be hidden using:

ion-button:focus {
  outline: none;
}

However, the real problem is that by adding the tabindex both the ion-button and the native a element are able to be tabbed to, so you have to tab twice on the same element to go to the next one.

I left a comment on an issue on Angular's repo about this: angular/angular#28345 (comment)

You should be able to work around this issue by adding tabindex="null" to your ion-button. Unfortunately when I tried adding that in our actual component in Ionic, Angular still overrode it to 0, but I tested it out in an Angular app using Ionic and it is working there. I believe this is something that will need to be fixed on Angular's side, but we are going to reach out to the team directly about it.

[CrashBrennan]

However, the real problem is that by adding the tabindex both the ion-button and the native a element are able to be tabbed to, so you have to tab twice on the same element to go to the next one.

Has there been any progress on this issue? Or has angular ignored it for over 4 years?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.