Menu Button: do not show keyboard focus indicator if activated with mouse or touch

[ianmcburnie]

Feature Request

Description

The visible keyboard focus indicator is not necessary for mouse-only or touch-only users. We should show it only when we are sure mouse or touch is being used. We also need to be aware of multi-input scenarios, where user might open menu with a mouse click then reach for keyboard to change menu item selection (in this case we would need to make the indicator visible).

Note: we still need to move focus onto the first item (for screen reader purposes), we are just hiding the outline/indicator.

Related

If we are okay with not supporting IE & Safari, we could go with a pure CSS approach.

• https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
• https://github.com/WICG/focus-visible
• https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/

Context

If we find a successful approach, we can apply it to other components

Screenshots

Example of menu button opening with keyboard visible on first item.

[ianmcburnie]

This will be handled on the skin side: eBay/skin#1332

We have decided for the time being to not use a JavaScript. polyfill for Safari & IE11.

[ianmcburnie]

Note: this change applies to ALL components. Not just menu button.