Testing keyboard navigation of nested FocusZone components with jest and testing library's userEvent

[Zeddox]

While fixing some accessibility bugs, we needed to add regression test cases for keyboard navigation that involved a table with nested FocusZone components.

We're using @fluentui/react version 8.56.0.

Top Level FocusZone:

<FocusZone
    role={'table'}
    direction={FocusZoneDirection.vertical}
    shouldEnterInnerZone={(ev) => ev.key === 'ArrowRight'}
    handleTabKey={FocusZoneTabbableElements.all}
></FocusZone>

Nested FocusZones:

<FocusZone
    role={'row'}
    direction={FocusZoneDirection.horizontal}
    tabIndex={0}
    data-is-focusable={'true'}
    isCircularNavigation
></FocusZone>

Our test case for testing the keyboard navigation has this code:

const row = screen.getAllByRole('row')[1]; // Skips header row

userEvent.tab();
expect(row).toHaveFocus();

userEvent.keyboard('{ArrowRight}');
// Assert that the first interactive element has focus

Our test was failing to focus the first interactive element within the nested focus zone. After debugging the code path for shouldEnterInnerZone, we came across a line within the utilities/focus.ts module that checks for an element's visibility and a condition for an isVisible property on the HTMLElement. IsVisible property check

After we added (HTMLElement.prototype as any).isVisible = true; to our test suite's beforeEach, the inner focus zone is entered with the right arrow key and our test is passing.

Not sure if this is documented anywhere, but hopefully it helps anyone else trying to perform this kind of test.