feat: contain mobile Search focus through Preview (Closes #1390)

tests/e2e/test_mobile_search_preview_navigation.py

@@ -88,3 +88,62 @@ def test_rendered_mobile_search_preview_navigation_preserves_reading_space_and_d
         page.set_viewport_size({"width": 800, "height": 700})
         expect(navigation).to_be_hidden()
         browser.close()
+
+
+@pytest.mark.parametrize(("width", "height"), [(320, 568), (390, 844)])
+def test_rendered_search_to_preview_journey_contains_focus_until_final_close(width, height):
+    html = re.sub(r'<script src="static/[^"]+"></script>', "", (FRONTEND / "index.html").read_text())
+
+    with sync_playwright() as playwright:
+        browser = playwright.chromium.launch()
+        page = browser.new_page(viewport={"width": width, "height": height})
+        page.set_content(html)
+        page.add_style_tag(path=FRONTEND / "dashboard.css")
+        page.add_script_tag(path=FRONTEND / "mobile-search-modal.js")
+        page.evaluate("""() => {
+          const palette = document.querySelector('#cmd-palette');
+          const preview = document.querySelector('#search-preview');
+          palette.classList.add('open');
+          window.searchModalTest = createMobileSearchModal({document});
+          window.searchModalTest.activate(palette, {
+            opener:document.querySelector('[data-mobile-task="search"]'),
+            initialFocus:document.querySelector('#cmd-input'),
+          });
+          preview.append(Object.assign(document.createElement('button'), {id:'dynamic-preview-action', textContent:'Dynamic action'}));
+        }""")
+
+        expect(page.locator("#cmd-input")).to_be_focused()
+        expect(page.locator("#cmd-palette")).to_have_attribute("aria-modal", "true")
+        assert page.locator("body > header").evaluate("node => node.inert") is True
+        assert page.locator("main").evaluate("node => node.inert") is True
+        assert page.locator("#mobile-task-dock").evaluate("node => node.inert") is True
+
+        page.evaluate("""() => {
+          document.querySelector('#cmd-palette').classList.remove('open');
+          document.querySelector('#search-preview').classList.add('open');
+          searchModalTest.transition(document.querySelector('#search-preview'), {
+            initialFocus:document.querySelector('#close-search-preview'),
+          });
+          document.querySelector('#dynamic-preview-action').focus();
+        }""")
+        page.keyboard.press("Tab")
+        expect(page.locator("#close-search-preview")).to_be_focused()
+        assert page.locator("main").evaluate("node => node.inert") is True
+
+        page.evaluate("""() => {
+          document.querySelector('#search-preview').classList.remove('open');
+          document.querySelector('#cmd-palette').classList.add('open');
+          searchModalTest.transition(document.querySelector('#cmd-palette'), {
+            initialFocus:document.querySelector('#cmd-input'),
+          });
+        }""")
+        expect(page.locator("#cmd-input")).to_be_focused()
+        assert page.locator("main").evaluate("node => node.inert") is True
+        assert page.evaluate("document.documentElement.scrollWidth <= window.innerWidth")
+
+        page.evaluate("searchModalTest.deactivate()")
+        expect(page.locator('[data-mobile-task="search"]')).to_be_focused()
+        assert page.locator("body > header").evaluate("node => node.inert") is False
+        assert page.locator("main").evaluate("node => node.inert") is False
+        assert page.locator("#mobile-task-dock").evaluate("node => node.inert") is False
+        browser.close()