bug: Chrome adding outline to focused `ion-card` button

[Yohandah]

Bug Report

I've found that adding a routerLink to a ion-card makes the card "focusable" and Chrome has a style on the card when it's in the "focus" state :

You can open the stackblitz linked on Firefox and when you press a card there is no black border while on chrome there is.

Maybe ionic should override this Chrome :hover style to reset it by default ? I added this in my styles.global.scss :

// reset chrome style
ion-card:focus {
  outline: none;
}

I'm also able to fix this by setting a (click) event then navigate with NavController instead of a RouterLink

Ionic version:
[x] 5.x

Related code:

https://ionic-v5-base-test-bordures.stackblitz.io

[Yohandah]

I am not sure this is a ionic specific bug but it needs to be looked at for the behavior with a RouterLink.

It follows this chromium release : https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

In addition to improving the default styling, the two teams also tuned up form controls' accessibility and enhanced touch support.

Maybe this is just that I am not "allowed" to set a routerLink on a ion-card (div) and should use a (click) event instead then use the NavControllerand navigateRoot. I am not sure this is 100% relevant to Ionic and this is just a side effect of what I implemented in the past that doesn't fit new Chrome policies. Overriding the style would mean difficult navigation with "tab" key.

[liamdebeasi]

I looked into this a bit more, and this appears to be a duplicate of #20632.

When using routerLink, Angular forces tabindex="0" to the component. There is an open issue on the Angular repo regarding this that we commented on. For more information, please see #20632 (comment).

[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.