Keyboard users can't see focus styles

[ireade]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.16
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 7.0.7
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.0, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 15 other plugins)

System:

   ios-deploy : 2.0.0
   NodeJS     : v8.11.3 (/usr/local/bin/node)
   npm        : 5.6.0
   OS         : macOS
   Xcode      : Xcode 10.1 Build version 10B61

Describe the Bug
Users that navigate the PWA via a keyboard will not be able to see the currently focused item because outline: none is set to all interactive elements.

Steps to Reproduce
Steps to reproduce the behavior:

1. Go to the pwa version of any Ionic application
2. Use tab key to navigate through interactive elements like buttons, links, etc.
3. See that no focus styles exist

Related Code
I noticed that outline: none is set on a few focusable items, for example:

https://github.com/ionic-team/ionic/blob/802a3d14e75a26ef7c6c4677ff4705401009df73/core/src/components/button/button.scss#L214

https://github.com/ionic-team/ionic/blob/8029df344a24d2b5096efbe590485a5c9d61a262/core/src/components/input/input.scss#L69

https://github.com/ionic-team/ionic/blob/0abf992a136a34af66ea121f11e11fd5d9092d16/core/src/components/searchbar/searchbar.scss#L79

https://github.com/ionic-team/ionic/blob/8029df344a24d2b5096efbe590485a5c9d61a262/core/src/components/toggle/toggle.scss#L19

See search query for "outline: none" in this repository

Expected Behavior
Keyboard users should be able to see the currently-focused item.

Suggested Solution
I suggest that instead of removing the outline outright, we instead make use of the :focus-visible pseudo-class:

/* Instead of... */
:focus {
    outline: none;
}

/* ... do this */
:focus:not(:focus-visible) {
    outline: none;
}

The support for :focus-visible is still pretty low right now, but we can make use of the polyfill.

Also, this may only be a problem for the PWA so the styles and polyfill could be loaded only for that and not the native applications.

Let me know what you think, I would like to submit a PR implementing this.

[ireade]

Hi @manucorporat ! Would is be okay if I submitted a PR trying to fix this?

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