<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 :focus
ed, 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-item
s, 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