Cannot toggle fullscreen in testcafe

I have a react page in an iframe with a button that can enter fullscreen mode. I've tested this manually with firefox and chrome which both work. However, clicking with testcafe does not go to fullscreen mode and fails the test.

I'm assuming the iframe isn't the issue because it works manually but wanted to mention it just in case.

This is some of the app:

fs.fullScreen = function () {
    const el = (fsEl && fsEl.current) || document.documentElement

    if (el.requestFullscreen) return el.requestFullscreen()
    if (el.mozRequestFullScreen) return el.mozRequestFullScreen()
    if (el.webkitRequestFullscreen) return el.webkitRequestFullscreen()
    if (el.msRequestFullscreen) return el.msRequestFullscreen()
  }

<button onClick={fs.fullScreen}>Fullscreen</button>

This is the test that fails:

beforeEach((t) => t.switchToIframe(storybook.iframe))
afterEach((t) => t.switchToMainWindow())

test('The Fullscreen button enters fullscreen mode', async (t) => {
  const { description, fullscreenButton } = storybook.hooks.fullscreen
  await t
    .expect(description.textContent)
    .contains('Browser not in fullscreen mode')
    .click(fullscreenButton)
    .expect(description.textContent)
    .contains('Browser in fullscreen mode')
})

In Firefox I've seen the console error: Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler.

In Chrome, I've seen the console error: Uncaught TypeError: fullscreen error.

The firefox error is fairly clear but I don't know how to work around it with testcafe. There is a way by editing the firefox profile before running the test but that won't work for chrome or other browsers. Is the chrome issue likely to be for the same reason?

This seems like it would be a common issue that automation frameworks have solved, so I might be missing something obvious?