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

frontend/dashboard.js

@@ -5855,6 +5855,7 @@
     mediaQuery: window.matchMedia('(max-width: 600px)'),
     schedule: callback => requestAnimationFrame(callback),
   });
+  const searchModal = createMobileSearchModal({document});
   function closeSearchPreview(navigate = true) {
     if (searchPreviewReturnKind === 'following') {
       searchPreview.close();
@@ -5870,7 +5871,7 @@
     qs('#cmd-palette').classList.add('open');
     qs('#cmd-input').setAttribute('aria-expanded', 'true');
     renderCommands(qs('#cmd-input').value);
-    qs('#cmd-input').focus();
+    searchModal.transition(qs('#cmd-palette'), { initialFocus:qs('#cmd-input') });
   }
   const next = searchPreview.next;
   async function openPreviewWorkInMyWork(detail) {
@@ -5892,6 +5893,7 @@
       mobileSearchViewport.rememberScroll();
       searchPreviewReturnKind = 'search';
       searchPreview.open(item.result).catch(() => {});
+      searchModal.transition(qs('#search-preview'), { initialFocus:qs('#close-search-preview') });
       taskOverlayHistory.open('search-preview', {
         query:qs('#cmd-input').value, scope:currentSearchScope(), preview:item.result,
       });
@@ -5938,7 +5940,10 @@
     mobileSearchViewport.open();
     mobileSearchViewport.restoreScroll();
     qs('#cmd-input').setAttribute('aria-expanded', 'true');
-    qs('#cmd-input').focus();
+    searchModal.activate(qs('#cmd-palette'), {
+      opener:document.activeElement,
+      initialFocus:qs('#cmd-input'),
+    });
     commandSelection = -1;
     renderCommands(qs('#cmd-input').value);
   }
@@ -5957,6 +5962,7 @@
         else {
           searchPreview.close();
           mobileSearchViewport.close();
+          searchModal.deactivate();
         }
         searchPreviewReturnKind = null;
       }
@@ -5964,7 +5970,7 @@
         qs('#cmd-palette').classList.remove('open');
         qs('#cmd-input').setAttribute('aria-expanded', 'false');
         mobileSearchViewport.close();
-        qs('#open-palette').focus();
+        searchModal.deactivate();
       }
       if (previous === 'plan-today-preview' && kind !== 'plan-today-preview') {
         if (addPlanPreviewOnReturn && addPlanPreviewOverride) planTodayPreview.close({ add:true, override:true });
@@ -5992,6 +5998,10 @@
         if (detail?.scope) applySearchScope(detail.scope);
         if (detail?.query !== undefined) qs('#cmd-input').value = detail.query;
         searchPreviewReturnKind = 'search';
+        searchModal.activate(qs('#search-preview'), {
+          opener:document.activeElement,
+          initialFocus:qs('#close-search-preview'),
+        });
         searchPreview.open(detail.preview).catch(() => taskOverlayHistory.close());
       }
       if (kind === 'plan-today' && previous !== 'plan-today' && previous !== 'plan-today-preview') openPlanToday(planTodayTrigger, false);

frontend/index.html

@@ -780,7 +780,7 @@
   </section>
 </div>
 
-<div id="cmd-palette" role="dialog" aria-label="Command palette">
+<div id="cmd-palette" role="dialog" aria-modal="true" aria-label="Command palette">
   <div class="cmd-palette-header">
     <strong>Search work</strong>
     <div class="cmd-palette-header-actions">
@@ -2367,6 +2367,7 @@
 <script src="static/device-storage.js"></script>
 <script src="static/mobile-device-setup.js"></script>
 <script src="static/mobile-search-viewport.js"></script>
+<script src="static/mobile-search-modal.js"></script>
 <script src="static/mobile-composer-viewport.js"></script>
 <script src="static/mention-composer.js"></script>
 <script src="static/push-notifications.js"></script>

frontend/mobile-search-modal.js

@@ -0,0 +1,83 @@
+(function (root, factory) {
+  const createMobileSearchModal = factory();
+  if (typeof module !== 'undefined' && module.exports) module.exports = createMobileSearchModal;
+  else root.createMobileSearchModal = createMobileSearchModal;
+})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
+  const FOCUSABLE = [
+    'a[href]', 'button', 'input', 'select', 'textarea',
+    '[tabindex]:not([tabindex="-1"])', '[contenteditable="true"]',
+  ].join(',');
+
+  return function createMobileSearchModal(options) {
+    const documentRef = options.document;
+    const backgrounds = Array.from(options.backgrounds || [
+      documentRef.querySelector?.('body > header'),
+      documentRef.querySelector?.('main'),
+      documentRef.querySelector?.('#mobile-task-dock'),
+    ]).filter(Boolean);
+    let surface = null;
+    let opener = null;
+    let priorInert = null;
+
+    function focusable() {
+      if (!surface || typeof surface.querySelectorAll !== 'function') return [];
+      return Array.from(surface.querySelectorAll(FOCUSABLE)).filter(element =>
+        !element.disabled && !element.hidden && element.getAttribute?.('aria-hidden') !== 'true' &&
+        (typeof element.matches !== 'function' || element.matches(':not([hidden])')) &&
+        (typeof element.getClientRects !== 'function' || element.getClientRects().length > 0)
+      );
+    }
+
+    function focus(element) {
+      if (element?.isConnected !== false && typeof element?.focus === 'function') element.focus();
+    }
+
+    function onKeydown(event) {
+      if (!surface || event.key !== 'Tab') return;
+      const controls = focusable();
+      if (!controls.length) {
+        event.preventDefault();
+        return;
+      }
+      const first = controls[0];
+      const last = controls[controls.length - 1];
+      if (event.shiftKey && documentRef.activeElement === first) {
+        event.preventDefault();
+        focus(last);
+      } else if (!event.shiftKey && documentRef.activeElement === last) {
+        event.preventDefault();
+        focus(first);
+      } else if (!controls.includes(documentRef.activeElement)) {
+        event.preventDefault();
+        focus(event.shiftKey ? last : first);
+      }
+    }
+
+    function transition(nextSurface, transitionOptions = {}) {
+      surface = nextSurface;
+      focus(transitionOptions.initialFocus || focusable()[0]);
+    }
+
+    function activate(nextSurface, activateOptions = {}) {
+      if (!surface) {
+        opener = activateOptions.opener || documentRef.activeElement || null;
+        priorInert = backgrounds.map(element => element.inert === true);
+        backgrounds.forEach(element => { element.inert = true; });
+      }
+      transition(nextSurface, activateOptions);
+    }
+
+    function deactivate() {
+      if (!surface) return;
+      backgrounds.forEach((element, index) => { element.inert = priorInert[index]; });
+      surface = null;
+      priorInert = null;
+      const restore = opener;
+      opener = null;
+      focus(restore);
+    }
+
+    documentRef.addEventListener('keydown', onKeydown);
+    return { activate, transition, deactivate, current: () => surface };
+  };
+});

frontend/service-worker.js

@@ -283,6 +283,7 @@ const SHELL = [
   BASE + 'static/device-storage.js',
   BASE + 'static/mobile-device-setup.js',
   BASE + 'static/mobile-search-viewport.js',
+  BASE + 'static/mobile-search-modal.js',
   BASE + 'static/mobile-composer-viewport.js',
   BASE + 'static/mention-composer.js',
   BASE + 'static/push-notifications.js',