FluentUI GroupedList and defaultTabbableElement when Detail Row contains another GroupedList

[alac0m]

I am using a customized Fluent UI Grouped List Component and I have NOT been able to use the component with a keyboard for navigating down into a Detail Row Grouped List Item for accessibility seamlessly.

I am not using the hierarchical "Grouping" feature of the Grouped List, because I don't think I would work for what I am trying to accomplish.

In each Detail Row, I render another Grouped List Component with or without text above the Grouped List component in the Detail Row.

When using Arrow Keys on the Top Level Grouped List Component, by default the focus goes to the Detail Row itself, and skips over the Detail Row Child components focusable items.

By setting shouldFocusInnerElementWhenReceivedFocus to true and handling the defaultTabbleElement function, I am able to at least find the first group header of the Details Row Grouped List component, set its tabindex to 0 and by doing so, I am able to press down Arrow Keys to get to it.

From defaultTabbleElement, I tried finding and returning the first FocusZone, the first GroupedList, but those are not getting focused, unless I return the first Grouped List Header and set its Tab Index to 0, then I am able to arrow down into the child grouped list.

This approach isn't working well for two reasons:

1. I am setting the defaultTabbleElement to the first Group Header, this is not good if I am navigating backwards with up arrow keys.
2. The focus bounces around before exiting the Detail Row Child Grouped List back out to the Parent Grouped list.

For a better understanding, please see this code pen and use your arrow keys to see the behavior.

https://codesandbox.io/s/kind-solomon-gq2ujz?file=/src/useGroupedList.tsx:5901-5941

I need to use my arrow keys and fluently navigate a Grouped List component and all its children from top to bottom with a keyboard.

Any suggestions would be appreciated.