frontend/aria: Fix top navigation layout and note about zooming, debugging

Author: haraldschilly

src/dev/ARIA.md

@@ -414,4 +414,13 @@ SortableTabs role="tablist"
 
 1. Decide on approach to fix aria-required-parent/children (requires deeper restructuring)
 
-**Future**: 2. **DEFER**: color-contrast (8+ items) - plan custom antd theme with accessibility option
+**Future**:
+
+2. **DEFER**: color-contrast (8+ items) - plan custom antd theme with accessibility option
+
+3. **DEFER**: Browser zoom scaling issue - When users enable zoom (`user-scalable=yes`), the page scales but doesn't properly overflow/scroll. Changed PAGE_STYLE width from `100vw` to `100%`, but issue persists. Need to investigate:
+   - Whether content is actually overflowing or being reflowed
+   - If parent containers (html/body) need explicit overflow handling
+   - Possible interactions with fixed positioning elements (nav bar, sidebars)
+   - Test on mobile vs desktop browsers
+   - May require restructuring how viewport constraints are applied

src/packages/frontend/account/account-page.tsx

@@ -501,16 +501,6 @@ export const AccountPage: React.FC = () => {
         </nav>
         <div
           className="smc-vfill"
-          role="region"
-          aria-label={
-            active_page === "preferences" && active_sub_tab
-              ? `${
-                  titles[active_sub_tab]?.props?.children?.[1] || active_sub_tab
-                } settings`
-              : `${
-                  titles[active_page]?.props?.children?.[1] || active_page
-                } settings`
-          }
           style={{
             overflow: "auto",
             paddingLeft: "15px",
@@ -532,7 +522,7 @@ export const AccountPage: React.FC = () => {
   }
 
   return (
-    <div className="smc-vfill" role="main" aria-label="Account page">
+    <div className="smc-vfill">
       {is_logged_in && !get_api_key ? (
         render_logged_in_view()
       ) : (

src/packages/frontend/app/hotkey/dialog.tsx

@@ -588,6 +588,16 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
 
   // Keyboard handler - handle number shortcuts and navigation
   const handleKeyDown = async (e: React.KeyboardEvent) => {
+    // Only handle keyboard events when dialog is visible
+    if (!visible) {
+      return;
+    }
+
+    const blockEvent = () => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
     // Number shortcuts (0-9) - always available to jump to frames
     const num = parseInt(e.key, 10);
     if (!isNaN(num) && num >= 0 && num <= 9) {
@@ -597,25 +607,15 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
           // Check if chat is already open for this file
           const fileInfo = open_files?.get(activeFileName);
           const chatState = fileInfo?.get("chatState");
-          const isChatOpen = !!chatState; // truthy chatState means chat is open
-
-          if (DEBUG) {
-            console.log("Chat toggle key 0 pressed:", {
-              activeFileName,
-              activeProjectId,
-              fileInfo: fileInfo?.toJS?.() || fileInfo,
-              chatState,
-              isChatOpen,
-            });
-          }
 
           // Toggle chat using shared function
           toggleChat(activeProjectId, activeFileName, chatState, "hotkey-0");
 
           onClose();
-          e.preventDefault();
+          blockEvent();
           return;
         }
+        blockEvent();
         return;
       }
 
@@ -630,14 +630,17 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
 
       if (targetFrameId) {
         await handleFrameClick(targetFrameId);
-        e.preventDefault();
+        blockEvent();
         return;
       }
+      blockEvent();
+      return;
     }
 
     // Arrow keys and Return - navigate through filtered leaf nodes only
     if (e.key === "ArrowUp" || e.key === "ArrowDown") {
       if (!searchValue || filteredSearchList.length === 0) {
+        blockEvent();
         return;
       }
       // filteredSearchList contains only leaf nodes matching the search (if any)
@@ -670,18 +673,18 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
           });
         }
       }
-      e.preventDefault();
+      blockEvent();
     } else if (e.key === "Enter") {
       // Activate selected node
       const node = filteredSearchList.find((item) => item.key === selectedKey);
       if (node?.node.navigationData) {
         await triggerAction(node.node.navigationData.action);
         onClose();
       }
-      e.preventDefault();
+      blockEvent();
     } else if (e.key === "Escape") {
       onClose();
-      e.preventDefault();
+      blockEvent();
     }
   };
 
@@ -798,6 +801,7 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
               "Placeholder text for the search input in quick navigation",
           })}
           onChange={handleSearch}
+          onKeyDown={handleKeyDown}
           value={searchValue}
           autoFocus
           allowClear

src/packages/frontend/app/hotkey/util.ts

@@ -59,10 +59,30 @@ const DOM_ONLY_EDITOR_TYPES = new Set([
   "latex_table_of_contents",
 ]);
 
+// Editors that still need DOM focus even after their internal focus()
+// logic runs (e.g., to move keyboard events to the correct frame).
+const NEEDS_DOM_FOCUS_EDITOR_TYPES = new Set(["jupyter_cell_notebook"]);
+
 interface FocusOptions {
   editorType?: string;
 }
 
+function isDomOnlyEditorType(editorType?: string): boolean {
+  if (!editorType) {
+    return false;
+  }
+  if (DOM_ONLY_EDITOR_TYPES.has(editorType)) {
+    return true;
+  }
+  if (editorType.startsWith("pdf")) {
+    return true;
+  }
+  if (editorType.endsWith("_preview")) {
+    return true;
+  }
+  return false;
+}
+
 /**
  * Decide whether we should rely on the editor actions' focus() method for a frame.
  * TODO: detect this from frame/editor metadata instead of a hard-coded list.
@@ -71,16 +91,17 @@ function shouldUseEditorFocus(editorType?: string): boolean {
   if (!editorType) {
     return true;
   }
-  if (DOM_ONLY_EDITOR_TYPES.has(editorType)) {
-    return false;
-  }
-  if (editorType.startsWith("pdf")) {
+  return !isDomOnlyEditorType(editorType);
+}
+
+function needsDomFocus(editorType?: string): boolean {
+  if (!editorType) {
     return false;
   }
-  if (editorType.endsWith("_preview")) {
-    return false;
+  if (NEEDS_DOM_FOCUS_EDITOR_TYPES.has(editorType)) {
+    return true;
   }
-  return true;
+  return isDomOnlyEditorType(editorType);
 }
 
 /**
@@ -140,9 +161,10 @@ export function focusFrameWithRetry(
       return false;
     };
 
+    const requireDomFocus = needsDomFocus(options?.editorType);
     setTimeout(() => {
       const handled = focusEditor();
-      if (!handled) {
+      if (!handled || requireDomFocus) {
         focusDomFallback();
       }
     }, 50);

src/packages/frontend/app/page.tsx

@@ -80,8 +80,8 @@ const PAGE_STYLE: CSS = {
   display: "flex",
   flexDirection: "column",
   height: PAGE_HEIGHT, // see note
-  width: "100vw",
-  overflow: "hidden",
+  width: "100%",
+  overflow: "auto",
   background: "white",
 } as const;
 

src/packages/frontend/app/use-context.ts

@@ -65,8 +65,12 @@ export function calcStyle(isNarrow: boolean): PageStyle {
   const height = isNarrow ? NAV_HEIGHT_NARROW_PX : NAV_HEIGHT_PX;
 
   const topBarStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "5px",
     height: `${height}px`,
     background: "#fafafa",
+    width: "100vw",
   } as const;
 
   const fileUseStyle = {
@@ -97,6 +101,8 @@ export function calcStyle(isNarrow: boolean): PageStyle {
       } as const)
     : ({
         flex: "1 1 auto", // necessary to stretch out to the full width
+        minWidth: 0, // allow tabs to shrink below content size
+        overflow: "hidden", // prevent tabs from overflowing the nav
       } as const);
 
   return {

src/packages/frontend/frame-editors/frame-tree/frame-tree.tsx

@@ -56,6 +56,10 @@ import { FrameTitleBar } from "./title-bar";
 import * as tree_ops from "./tree-ops";
 import { EditorDescription, EditorSpec, EditorState, NodeDesc } from "./types";
 
+// Editors that must receive a raw Enter key (e.g., Jupyter notebooks) so they can
+// handle mode changes like entering edit mode themselves.
+const ENTER_HANDLER_SKIP_TYPES = ["jupyter_cell_notebook"] as const;
+
 interface FrameTreeProps {
   actions: Actions; // The Actions object for dispatching state changes
   active_id: string; // ID of the currently active frame
@@ -395,8 +399,22 @@ export const FrameTree: React.FC<FrameTreeProps> = React.memo(
       }
 
       function handleFrameKeyDown(e: React.KeyboardEvent) {
-        // Return/Enter: focus the editor content within this frame
-        if (e.key === "Enter") {
+        // Only handle a plain Enter pressed directly on the frame container.
+        // Let modified Enter keys (Shift/Ctrl/Cmd/Alt) and descendant inputs
+        // handle the event themselves so notebook shortcuts keep working.
+        const isPlainEnter =
+          e.key === "Enter" &&
+          !e.shiftKey &&
+          !e.ctrlKey &&
+          !e.metaKey &&
+          !e.altKey;
+        const canHandleEnter =
+          !ENTER_HANDLER_SKIP_TYPES.includes(type) &&
+          isPlainEnter &&
+          !e.defaultPrevented &&
+          e.target === e.currentTarget;
+        if (canHandleEnter) {
+          // Return/Enter: focus the editor content within this frame
           e.preventDefault();
           e.stopPropagation();
           const frameContainer = e.currentTarget as HTMLElement;

src/packages/static/src/meta.tsx

@@ -8,7 +8,10 @@ export default function Meta() {
       <meta name="apple-mobile-web-app-status-bar-style" content="black" />
       <meta name="apple-mobile-web-app-title" content="CoCalc" />
       <meta name="theme-color" content="#fbb635" />
-      <meta name="viewport" content="width=device-width,initial-scale=1" />
+      <meta
+        name="viewport"
+        content="width=device-width,initial-scale=1,user-scalable=yes"
+      />
       <meta name="google" content="notranslate" />
     </>
   );