Created by: spahno
#31949 (closed)
Response to issue
button
and a
tags in _reboot.scss.
Added universal outline for dropdown-items for What we have tried:
-
The problem is, that if you set the
-webkit-focus-ring-color auto
attribute, the outline style and outline color works differently in every browser for the<a>
and the<button>
tag. For example, the<a>
is dotted in Firefox unlike the<button>
which is surrounded with a solid blue outline. -
We tried to recreate the blue outline with a border and border-radius for every tag but we could not make the anchor tag have a rounded border, because a link cannot have a border-radius.
Solution:
To find a consistent solution for every browser, we decided to add a blue outline without a border-radius as you can see below in the screenshots.
Tested browsers:
Chrome 86.0.4240.193, Firefox 82.0.3 and Safari 14.0.
Screenshots:
The focus, when navigating with arrow keys:
Team:
@LtHustensaft @lewe98 @spahno