feature: Add iframe support for user.keyboard typing

src/document/prepareDocument.ts

@@ -47,7 +47,8 @@ export function prepareDocument(document: Document) {
       const initialValue = getInitialValue(el)
       if (initialValue !== undefined) {
         if (el.value !== initialValue) {
-          dispatchDOMEvent(el, 'change')
+          // a call to blur should already be wrapped in an act
+          el.dispatchEvent(new (document.defaultView ?? window).Event('change'))
         }
         clearInitialValue(el)
       }

src/utils/focus/getActiveElement.ts

@@ -10,6 +10,11 @@ export function getActiveElement(
     if (activeElementInShadowTree) {
       return activeElementInShadowTree
     }
+  } else if (activeElement?.tagName === 'IFRAME') {
+    let contentWindow = (activeElement as HTMLIFrameElement).contentWindow
+    if (contentWindow) {
+      return getActiveElement(contentWindow.document)
+    }
   }
   // Browser does not yield disabled elements as document.activeElement - jsdom does
   if (isDisabled(activeElement)) {

tests/keyboard/index.ts

@@ -190,3 +190,26 @@ customElements.define(
     }
   },
 )
+
+test('typing on focused element with iframe', async () => {
+  let iframe: HTMLIFrameElement
+  let iframeButton: HTMLElement
+  const {user} = setup(
+    '<div id="iframe-container"></div>',
+  )
+  iframe = document.createElement('iframe')
+  window.document.body.appendChild(iframe)
+  iframeButton = iframe.contentWindow!.document.createElement('button')
+  iframe.contentWindow!.document.body.appendChild(iframeButton)
+  let keydown = jest.fn()
+  let keyup = jest.fn()
+  iframeButton.addEventListener('keydown', keydown)
+  iframeButton.addEventListener('keyup', keyup)
+
+  iframeButton.focus()
+  await user.keyboard('[Space]')
+  expect(keydown).toHaveBeenCalled()
+  expect(keyup).toHaveBeenCalled()
+
+  iframe.remove()
+})