V4.beta Dropdown menu focus/hover style constrast too low for accessibility

[tmorehouse]

The current :focus / :hover styling is almost impossible to see (on some screens) as it is a very subtle change.

I would recommend that the background be darkened slightly to make it better for keyboard-only users to know which .dropdown-item they have highlighted.

In this screen shot, I have Another Item focused, and at quick glance (without straining my eyes) I can't tell which menu item is focused:

Doing the same thing, but adjusting the background color from background-color:#f8f9f8 to background-color:#e8e9e8 makes a big difference in being able to tell which menu item has focus:

[XhmikosR]

/CC @patrickhlauke

[tmorehouse]

Our current workaround is to darken the background via box-shadow:

.dropdown-item:focus,
.dropdown-item:hove {
    /* @See https://github.com/twbs/bootstrap/issues/23329 */
    box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .09);
}

.dropdown-item.active {
    box-shadow: initial;
}

[browner12]

you can also use the following variables:

$dropdown-link-hover-color: #fff;
$dropdown-link-hover-bg: #f00;

[pi0]

@browner12 While this suggestion is so nice, libraries like BootstrapVue just try to abstract bootstrap components (I mean not providing a pre-compiled BS css by default) and currently shadow hack tries to override user ones which is not a perfect solution. Maybe we can change variables for bootstrap defaults as an accessibility enhancement :)

[browner12]

agreed, having a more contrasting default would be good.

[patrickhlauke]

See #23990 for a partial fix for this.

[tmorehouse]

@patrickhlauke Does this also address button focus styling? It is possible to mix buttons and links together in the same dropdown, and they should both look the same to the user

[frederikhors]

Is there any news about it?

[mdo]

This applies to v4 and v5. Would $gray-200 be enough as opposed to the current $gray-100? And does this apply to our dark mode dropdown as well?

[patrickhlauke]

for keyboard users, focus styles now don't suppress the outline (per #23990). i'd still say that for sighted mouse users, the overly subtle change in background is practically invisible as it currently stands. changing from $gray-100 to $gray-200 (which shakes out to #E9ECEF by default) seems subjectively much better.

Current using $gray-100

Changed to $gray-200

the dark dropdown variant looks, subjectively, good to me as it is.

[patrickhlauke]

@patrickhlauke Does this also address button focus styling? It is possible to mix buttons and links together in the same dropdown, and they should both look the same to the user

general button focus styling is still a bit on the low contrast side. but specifically for dropdowns, yes you can mix and match links/buttons and i think they look the same styling-wise now

[patrickhlauke]

PR for the change to $gray-200 #32754