Menu items lack proper highlighting when accessed via keyboard

[johannao76]

Bug Report

Steps

When accessing menu items via the keyboard, we only show the background highlighting for the item, only for unselected items. This may not be enough for accessibility, particularly for the selected item, as there is no indication that the item is currently focused.

Repro (use provided sample under the Tescase section):

• Load the sample in the Testcase section below
• Notice that the button has the focus and shows a nice box around it
• Shift+Tab to focus on the first item in the menu

Expected Result

• First menu item should have a box around it indicating it is focused

Actual Result

• No indication that the first item is focused.

Version

0.21.1

Testcase

https://codesandbox.io/s/2vzw3k7q5j

[codepretty]

@johannao76 what is the scenario this needs to work for? Will this be fixed with #934?

[johannao76]

@codepretty: We need this for the implementation of the stickers picker. In that UI we have a grid with items that can be clicked on to open an editor with Save and Cancel buttons. If the user Cancels or hits the ESC key, we want to take the user back to the grid with the item they just tried to edit focused.

[codepretty]

After speaking with Johanna, the focus scenario is one around the vertical, pointing menu. We are getting redlines from Design and will include a focus state when redlining this variation.