Fix focus for dropdown items

Created by: spahno

Response to issue #31949 (closed)

Added universal outline for dropdown-items for button and a tags in _reboot.scss.

What we have tried:

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

2. 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:

The focus, when clicking:

Team:

@LtHustensaft @lewe98 @spahno