fix(landing): blur legacy inert focus

Author: waleedlatif1

apps/sim/app/(landing)/demo/components/legacy-inert-fallback.test.ts

@@ -33,4 +33,21 @@ describe('applyLegacyInertFallback', () => {
     expect(button?.getAttribute('tabindex')).toBeNull()
     expect(link?.getAttribute('tabindex')).toBe('2')
   })
+
+  it('moves focus out of a panel before hiding it', () => {
+    const panel = document.createElement('div')
+    const button = document.createElement('button')
+    panel.append(button)
+    document.body.append(panel)
+    button.focus()
+
+    expect(document.activeElement).toBe(button)
+
+    const restore = applyLegacyInertFallback(panel)
+
+    expect(document.activeElement).not.toBe(button)
+
+    restore()
+    panel.remove()
+  })
 })

apps/sim/app/(landing)/demo/components/legacy-inert-fallback.ts

@@ -21,6 +21,9 @@ export function applyLegacyInertFallback(node: HTMLElement): () => void {
   const previousAriaHidden = node.getAttribute('aria-hidden')
   const previousPointerEvents = node.style.pointerEvents
   const previousTabIndexes = new Map<HTMLElement, string | null>()
+  const activeElement = node.ownerDocument.activeElement
+
+  if (activeElement instanceof HTMLElement && node.contains(activeElement)) activeElement.blur()
 
   node.setAttribute('aria-hidden', 'true')
   node.style.pointerEvents = 'none'