<button> and <a> dropdown-items appear differently on focus in Chromium
Created by: 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.
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
- Create a dropdown
- Add a button
dropdown-item - Add a link
dropdown-item - Observe that their focus behavior is different
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