Enhancement: Flow - Menu keyboard navigation

[esri]

Enhancement: Flow - Menu keyboard navigation

[driskull]

Can't fix this until we get the option of setting the delegatesFocus on the shadow dom.

calling .focus() on a calcite-action doesn't do anything because the focus needs to be called on the button element inside.

When a node inside shadow DOM gains focus, :focus applies to the host in addition to the focused element.

https://developers.google.com/web/fundamentals/web-components/shadowdom

[driskull]

Summary
The calcite-flow-item menu-button needs to follow the guidelines found at this link: http://w3c.github.io/aria-practices/#menubutton
Specifically look into the aria-haspopup and aria-expanded

Also, when the user opens the menu and then continues tabbing through the page, the menu should close automatically.

Actual Behavior
Menu stays open when focus is removed

Expected Behavior
Menu should close when the focus is shifted to another element on the page

Reproduction Steps
https://esri.github.io/calcite-app-components/demos/calcite-flow-item.html
Tab through, open the menu button, then continue tabbing. Menu will not close
Relevant Info

[kat10140]

verified!