feat: contain Security Center focus (Closes #1136)

frontend/security-center.js

@@ -19,6 +19,31 @@
     section, root.document.getElementById(`security-${section}-section`),
   ]));
   let activityCursor = null;
+  let backgroundInert = null;
+
+  const backgroundElements = ['header', 'main', '#mobile-task-dock']
+    .map(selector => root.document.querySelector?.(selector))
+    .filter(Boolean);
+  const focusableControls = () => [...(devicesSheet?.querySelectorAll?.(
+    'button:not([disabled]), select:not([disabled]), input:not([disabled]), textarea:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])'
+  ) || [])].filter(control => !control.hidden && !control.disabled);
+  const containBackground = () => {
+    if (!backgroundInert) {
+      backgroundInert = new Map(backgroundElements.map(element => [element, element.inert]));
+    }
+    backgroundInert.forEach((_wasInert, element) => { element.inert = true; });
+  };
+  const releaseBackground = () => {
+    if (!backgroundInert) return;
+    backgroundInert.forEach((wasInert, element) => { element.inert = wasInert; });
+    backgroundInert = null;
+  };
+  const finishClose = () => {
+    devicesSheet.hidden = true;
+    releaseBackground();
+    devicesButton?.focus();
+    onClose();
+  };
 
   const navigate = (section, { history = true } = {}) => {
     if (!sections[section]) section = 'activity';
@@ -43,16 +68,41 @@
   root.document.getElementById('close-active-devices')?.addEventListener('click', () => {
     if (root.history?.state?.stackchainSecuritySection) root.history.back();
   });
-  root.addEventListener?.('popstate', event => {
-    const section = event.state?.stackchainSecuritySection;
+  const handleRouteChange = section => {
     if (section && !devicesSheet.hidden) {
+      containBackground();
       navigate(section, { history: false });
       return;
     }
     if (!devicesSheet.hidden) {
-      devicesSheet.hidden = true;
-      devicesButton?.focus();
-      onClose();
+      finishClose();
+    }
+  };
+  root.addEventListener?.('popstate', event => {
+    handleRouteChange(event.state?.stackchainSecuritySection);
+  });
+  root.addEventListener?.('hashchange', () => {
+    handleRouteChange(root.history?.state?.stackchainSecuritySection);
+  });
+  root.document.addEventListener?.('keydown', event => {
+    if (devicesSheet.hidden) return;
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      if (root.history?.state?.stackchainSecuritySection) root.history.back();
+      else finishClose();
+      return;
+    }
+    if (event.key !== 'Tab') return;
+    const controls = focusableControls();
+    if (!controls.length) return;
+    const first = controls[0];
+    const last = controls[controls.length - 1];
+    if (event.shiftKey && event.target === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && event.target === last) {
+      event.preventDefault();
+      first.focus();
     }
   });
 
@@ -225,6 +275,7 @@
   const open = () => {
     if (!devicesSheet) return;
     onOpen();
+    containBackground();
     devicesSheet.hidden = false;
     root.document.getElementById('close-active-devices')?.focus();
     navigate('activity', { history: root.history?.state?.stackchainSecuritySection !== 'activity' });