Customizer Menus: visual focus highlight on menu item arrows is distracting

[designsimply]

After you open and close an existing menu item, the focus stays and the arrow looks highlighted. The highlight looks distracting to me. Is there a way to keep the focus for accessibility but get rid of the visual highlight? Sighted users probably don't need it to stay highlighted like that. This is a nitpick. :)

^{Seen at ​http://whatisinfinity.com/wp-admin/customize.php?url=http%3A%2F%2Fwhatisinfinity.com%2Fwp-admin%2F using Chrome 43.0.2357 on Windows 7.}

Found during user testing.

[afercia]

Visible focus is a specific Level AA Success Criterion, see ​http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

[celloexpressions]

Note that you'll only get this if you click on the arrow specifically, while you can click anywhere in the menu item title to open it. I don't think there's anything that we can easily do here to hide it from mouse users but show it for keyboard users, short of (essentially) hiding the actual focusable element and only showing it when it's focused.

[andg]

I wouldn't hide that kind of feedback on focus even for sighted user. As mentioned in ticket #32813 though, the focus outline kind of overlaps the menu item type text, which might not be very pretty.

[celloexpressions]

Anyone else have thoughts here? I noticed that widgets work around this, so it may be possible but would need someone to investigate. But again, only an issue currently if you tap directly on the arrow.

[celloexpressions]

Going to close this out for now; if anyone is interested in improving this and/or can make a patch please feel free to reopen.