Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

Issue Analytics

State:
Created 6 years ago
Reactions:5
Comments:12 (10 by maintainers)

Top GitHub Comments

1reaction

patrickhlaukecommented, Jan 10, 2021

PR for the change to $gray-200 https://github.com/twbs/bootstrap/pull/32754

0reactions

patrickhlaukecommented, Jan 10, 2021

@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

Top Results From Across the Web

[Accessibility] Color contrast and styling for focus, hover, outline

This issue encompasses color contrast and styling for focus, hover, outline. This includes focus, hover, and outline states in/around these components:

Migrating to v5 - Bootstrap

Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.

Accessibility - React

Programmatically managing focus. Our React applications continuously modify the HTML DOM during runtime, sometimes leading to keyboard focus being lost or set ...

Targeting Menu Elements with Submenus in a Navigation Bar

By extension, drop down menus are merely nested <ul> s. ... by contrast, style anchor tags as not having additional sub items.

What's New In DevTools (Chrome 98)

Full-page Accessibility tree, more precise changes in the Changes ... However, the loading of the menu items is slow (it takes 6 seconds)....