Replaces #4965. Rolls back #4895. Fixes#4964. Partially fixes#4819.
The previous attempts to add a stylised "focus" ring, while with the best intentions, did not take into account how "outline" normally works for people using visual aids. Most high contrast software will effect the outline if its available (ie. make it bolder or more prevalant), thus the "outline" property is paramount to maintaining accessibility.
The previous changes also present issues with elements using box-shadows already, and again, on high contrast, box-shadows are no longer rendered.
This change will bring back the outline property for focus, but with an addition to allow a blue highlight for Firefox, would should keep it in "parity" with WebKit.
Refs:
- https://a11yproject.com/posts/never-remove-css-outlines/
- http://www.outlinenone.com
- https://stackoverflow.com/questions/52589391/css-box-shadow-vs-outline
Ben Thomson
Ayumi
matthew188
Samuel Georges