Remove anchor focus override within dropdown menu

[arizzitano]

The dropdown styles explicitly remove the browser's default focus outline for links within the menu, which hurts accessibility as it violates WCAG 2.0 AA section 2.4.7 [edit: technically, the focus highlight background color prevents it from failing]. Without the focus outline, keyboard-only users cannot orient themselves within a dropdown menu, which can be especially troublesome if the implementor has also applied a focus trap.

This PR removes the override, enabling the browser to apply its own native focus outline to links within the dropdown menu. The outline will only appear if a link has :focus, so mouse users will see virtually no change.

Suggestions welcome -- happy to amend as necessary!

Screenshots

Before	After

[patrickhlauke]

to clarify, no: the current situation does not fail wcag 2 2.4.7 as there is a visible focus indication (the background color applied to focused dropdown item). you can argue about whether or not the focus indication itself could be stronger, but as it stands it does nominally pass 2.4.7

[arizzitano]

I updated the description accordingly, but I stand by the override removal. It's entirely reasonable for users to expect a focus outline on links, since that's a browser default. Is there a reason for keeping the override?

Regarding the background highlight, the dropdown still fails 2.4.7 in high-contrast mode (all modes on Windows; all but the lowest setting on OSX).

[andresgalante]

I don't know about wcag 2 2.4.7, but I think that a focus ring can be stronger.

[tmorehouse]

I too agree that the current dropdown focus background is rather light, and depending on screen contrast is almost invisible. I have had keyboard only users complain about the inability to tell which dropdown item they have focused (screen readers users are OK with it).

We have added a box shadow with a large spread to darken the focus highlight. Non keyboard users didn't like the focus ring we applied, so we went with a darker background.

[arizzitano]

Just to be clear, this native focus ring will not show up for non-keyboard users. It only appears when focus is applied via the keyboard (or programmatically), and doesn't affect the hover state at all.

[patrickhlauke]

LGTM. @mdo ?

[patrickhlauke]

xref #23329

[tmorehouse]

This addresses link dropdown items, but not button dropdown items.