Unable to cycle focus using tab/shift+tab inside of AnchoredOverlay

Describe the bug When an AnchoredOverlay allows for keyboard navigation using FocusKeys.Tab, focus will remain trapped on the last focusable element when navigating through the overlay using Tab.

This comment in primer/behavior indicates that the focus trap should be responsible for wrapping focus with Tab (rather than specifying focusOutBehavior: 'wrap')

Because the focus trap rewrites the tabindex=-1 on focusable elements, the focus zone is not able to identify the first focusable element inside of the container when it comes time to wrap.

The below example is a bit contrived, but it seems like the focus zone and trap behaviors do not play nicely together when Tab is eligible for binding.

To Reproduce Go to sandbox https://codesandbox.io/s/optimistic-villani-6exe7?file=/src/App.js Click to open menu Use tab to navigate through the overlay, observe that focus is trapped in the last button

Expected behavior If FocusKeys.Tab is provided as a bindKey for focus zone, and a focus zone is present, I would expect focus to cycle when a user navigates using Tab.

Desktop (please complete the following information):

• OS: iOs
• Browser chrome, safari, firefox

[marywhite]

Thanks for the response @lesliecdubs 💟 ! Giving this another look (now that I’m more versed in some accessibility training 😄 ) I think we should be alright to close this. From what I understand we shouldn’t be using both arrow keys and tab to navigate the controls within a composite widget. For this specific use case - and probably most use cases, Tab should be sufficient for navigating the form controls, and arrow keys should be reserved for composite controls.

[lesliecdubs]

Hi @marywhite, so sorry we didn’t get back to you on this! Can you confirm that this is still a challenge and, if so, we’ll triage this issue further?