Bootstrap: <button> and <a> dropdown-items appear differently on focus in Chromium

[bbugh]

I originally reported this in the bootstrap-vue repository but it appears to be an upstream issue, so I'm copying most of that bug report over to here with some tweaks for context.

Describe the bug

In Chromium, dropdown-item on a button shows a border when :focused, but dropdown-item on a a tag does not.

(Backgrounds are lightened to show the border effect)

dropdown-item on a button seems to be picking up the button outline: -webkit-focus-ring-color effect from Reboot.

https://github.com/twbs/bootstrap/blob/ebd9eb105ab094af747c09082ced1df71aaec123/scss/_reboot.scss#L419-L422

Firefox does not support -webkit-focus-ring-color so it show the single dotted outline on both a elements and button elements.

This issue arose when we started using a dropdown that includes both button and a tag dropdown-items, so a user clicking and/or using the keyboard will see two different focus behaviors in the same menu.

Steps to reproduce the bug

1. Create a dropdown
2. Add a button dropdown-item
3. Add a link dropdown-item
4. Observe that their focus behavior is different

demo

Expected behavior

I would expect the designs of these to behave consistently on all browsers, either both with or both without the outline.

Versions

Libraries:

• Bootstrap: 4.5.3

Environment:

• Device: Mac
• OS: Mojave
• Browser: Firefox (consistent), Chromium (this issue)
• Version: 81.02, 86.0.4240.99

Demo link

https://codesandbox.io/s/b-dropdown-item-button-styling-1ier8?file=/App.vue

[patrickhlauke]

to clarify that when navigating with keyboard, both the link and the button have the same appearance when focused. when clicking with the mouse, though, the browser will apply heuristics to determine if focus outline should be shown or not for the link, but for button the explicit :focus always applies even if clicked with mouse rather than focused via keyboard navigation.

this is one of those cases where :focus-visible would be useful, if it were supported properly ... which sadly it currently isn't

[spahno]

As a part of an university project, me and my team are trying to resolve the issue. 😄
@spahno
@LtHustensaft
@lewe98