diff --git a/src/AGENTS.md b/src/AGENTS.md
index 0fa74f9444d..985623d04c0 100644
--- a/src/AGENTS.md
+++ b/src/AGENTS.md
@@ -158,7 +158,6 @@ CoCalc is organized as a monorepo with key packages:
 - Prefix git commits with the package and general area. e.g. 'frontend/latex: ...' if it concerns latex editor changes in the packages/frontend/... code.
 - When pushing a new branch to Github, track it upstream. e.g. `git push --set-upstream origin feature-foo` for branch "feature-foo".
 
-
 ## React-intl / Internationalization (i18n)
 
 CoCalc uses react-intl for internationalization with SimpleLocalize as the translation platform.
@@ -210,6 +209,24 @@ Same flow as above, but **before 3. i18n:upload**, delete the key. Only new keys
 - `packages/frontend/i18n/trans/[locale].compiled.json` - compiled translation files for runtime
 - `packages/frontend/i18n/index.ts` - exports and locale loading logic
 
+## ARIA Landmarks and Accessibility
+
+The CoCalc frontend should implement ARIA landmarks to enable proper landmark-based navigation for users with assistive technologies (screen readers, keyboard navigation tools, etc.).
+
+**Important**: See [./dev/ARIA.md](./dev/ARIA.md) for comprehensive documentation on:
+
+- What ARIA landmarks are and why they matter
+- CoCalc's three-level navigation hierarchy
+- How to implement landmarks in React/TSX components
+- Best practices and implementation guidelines
+
+Key points:
+
+- Use semantic HTML elements (`<main>`, `<nav>`, `<aside>`, `<footer>`) which automatically create landmarks
+- Use `role="region"` with `aria-label` for custom sections (toolbars, symbol panels, etc.)
+- Use `aria-label` to distinguish between multiple regions of the same type
+- Keep landmarks to 7 or fewer per page for optimal usability
+
 # Ignore
 
 - Ignore files covered by `.gitignore`
@@ -223,4 +240,4 @@ Same flow as above, but **before 3. i18n:upload**, delete the key. Only new keys
 - ALWAYS prefer editing an existing file to creating a new one
 - REFUSE to modify files when the git repository is on the `master` or `main` branch
 - NEVER proactively create documentation files (`*.md`) or README files. Only create documentation files if explicitly requested by the User
-- when modifying a file with a copyright banner at the top, make sure to fix/add the current year to indicate the copyright year
\ No newline at end of file
+- when modifying a file with a copyright banner at the top, make sure to fix/add the current year to indicate the copyright year
diff --git a/src/dev/ARIA.md b/src/dev/ARIA.md
new file mode 100644
index 00000000000..c6d7239497c
--- /dev/null
+++ b/src/dev/ARIA.md
@@ -0,0 +1,2187 @@
+# ARIA Landmarks and Accessibility in CoCalc Frontend
+
+This document explains how to implement ARIA landmarks in the CoCalc frontend to enable proper landmark-based navigation for assistive technology users.
+
+## What are ARIA Landmarks?
+
+ARIA landmarks identify major page sections for screen reader navigation. The eight landmark roles are:
+
+- **`main`** - Primary content area
+- **`navigation`** - Navigation links/sections
+- **`complementary`** - Sidebars, supplementary content
+- **`region`** - Generic sections (requires `aria-label`)
+- **`search`**, **`banner`**, **`contentinfo`**, **`form`** - Specialized roles as needed
+
+## CoCalc Frontend Structure
+
+The frontend has a **three-level hierarchy**:
+
+1. **Application Shell** - Top navigation, project tabs, main content area
+2. **Project Workspace** - File tabs, activity bar, editor, sidebar
+3. **Editor Features** - Toolbars, symbols, content areas
+
+## Implementation Guidelines
+
+### Core Principles
+
+1. **Use semantic HTML first** - `<main>`, `<nav>`, `<aside>`, `<footer>` automatically create landmarks
+2. **Use `role="region"` + `aria-label`** for custom sections
+3. **Make labels dynamic and context-aware** - Include relevant details (file names, types, counts)
+4. **Keep labels concise** - Use abbreviations when context is clear (e.g., "PDF (12p): {path}")
+5. **Maximum ~7 landmarks per page** - Avoid landmark overload
+
+### Pattern: Labeled Regions
+
+```tsx
+// Navigation
+<nav aria-label="Settings menu">...</nav>
+
+// Sidebar/supplementary content
+<aside role="complementary" aria-label="Project filters">...</aside>
+
+// Custom sections with role="region"
+<div role="region" aria-label="Editor: script.py">...</div>
+<div role="region" aria-label="Build log: document.tex">...</div>
+
+// Heading-based labels (alternative to aria-label)
+<h2 id="section-id">My Section</h2>
+<div role="region" aria-labelledby="section-id">...</div>
+
+// When using Ant Design components that support ARIA props,
+// apply role/aria-label directly without wrapping in div:
+<Space.Compact role="region" aria-label="Zoom controls">
+  {/* children */}
+</Space.Compact>
+
+// ✅ GOOD: Direct ARIA on component
+<Button aria-label="Save file" />
+
+// ❌ AVOID: Unnecessary wrapping
+<div role="button" aria-label="Save file">
+  <Button />
+</div>
+```
+
+### Dynamic Label Examples
+
+- Menu/Navigation: `"Account settings menu"`, `"Open files in {projectName}"`
+- Regions: `"Editor: {filePath}"`, `"Build log: {filePath}"`
+- Sections with counts: `"Projects list (5 total)"`, `"Issues (2e 1w): {path}"`
+- Conditional content: Update aria-label when content changes
+
+### Pattern: Keyboard Accessibility for Custom Interactive Elements
+
+When creating interactive elements with `role="button"`, `role="tab"`, or other interactive roles using `<div>` or other non-button elements, you must provide keyboard support via the `ariaKeyDown` utility from `@cocalc/frontend/app/aria`.
+
+**Why this is needed:**
+
+- Native `<button>` elements support Enter and Space keys automatically
+- Custom elements with `role="button"` do not have native keyboard support
+- Screen reader users and keyboard-only users rely on this keyboard behavior
+
+**Usage pattern:**
+
+```tsx
+import { ariaKeyDown } from "@cocalc/frontend/app/aria";
+
+// For button-like divs
+<div
+  role="button"
+  tabIndex={0}
+  onClick={handleClick}
+  onKeyDown={ariaKeyDown(handleClick)}
+  aria-label="Delete item"
+>
+  Delete
+</div>
+
+// For tab-like divs
+<div
+  role="tab"
+  tabIndex={0}
+  onClick={handleSelect}
+  onKeyDown={ariaKeyDown(handleSelect)}
+  aria-selected={isActive}
+>
+  Tab label
+</div>
+```
+
+**What ariaKeyDown does:**
+
+- Activates the handler when Enter or Space keys are pressed
+- Prevents default browser behavior (form submission, page scroll)
+- Provides the same keyboard experience as native buttons
+- Single source of truth for this common accessibility pattern
+
+**Implementation note:**
+Always use `ariaKeyDown` when you have:
+
+- `role="button"`, `role="tab"`, or other interactive roles on non-button elements
+- An `onClick` handler that should also work with keyboard
+- A `tabIndex={0}` to make the element focusable
+
+See `packages/frontend/app/aria.tsx` for the implementation and usage in:
+
+- `packages/frontend/app/nav-tab.tsx` - Navigation tabs
+- `packages/frontend/app/connection-indicator.tsx` - Status indicator
+- `packages/frontend/app/notifications.tsx` - Notification badges
+- `packages/frontend/frame-editors/frame-tree/status-bar.tsx` - Status bar close button
+
+## Split Editors with Multiple Frames
+
+When editors are split into multiple frames, use nested regions with clear labels:
+
+- Outer region: describes the split direction and file path
+- Inner regions: describe each frame's content type
+
+Example patterns:
+
+```tsx
+// Outer split container
+<div role="region" aria-label={`Vertical split: ${path}`}>
+  <div role="region" aria-label={`Code: ${path}`}>
+    {/* code frame */}
+  </div>
+  <div role="region" aria-label={`Output: ${path}`}>
+    {/* output frame */}
+  </div>
+</div>
+```
+
+Key: Include file path and describe frame contents clearly.
+
+## Key Components to Annotate
+
+When implementing ARIA landmarks in CoCalc, focus on these key component types:
+
+### 1. Editor Toolbars & Menus
+
+- Main container: `<div role="region" aria-label="${fileType} editor toolbar for ${fileName}">`
+- Menus: `<nav aria-label="${menuType} menu">`
+- Control buttons: Add `aria-label` with context (e.g., "Save {fileName}", "Build {fileName}")
+- Status indicators: Use `aria-live="polite"` for changes
+
+### 2. Jupyter Notebook Cells
+
+- Cell container: `<div role="region" aria-label="Code cell {N} (current, has error)">`
+- Cell input: `<div role="region" aria-label="Input for Code cell {N}">`
+- Cell output: `<div role="region" aria-label="Output for Code cell {N}">`
+- Cell controls: `<div role="region" aria-label="Controls for Code cell {N}">`
+
+Include cell type, number, and status in labels.
+
+### 3. Settings & Preferences Pages
+
+- Main content: `<main role="main" aria-label="Settings management">`
+- Navigation menu: `<nav aria-label="Settings menu">`
+- Section containers: `<div role="region" aria-label="Profile settings">` for each section
+- Form groups: `<div role="region" aria-label="{settingType} configuration">`
+
+### 4. Split Editors
+
+- Outer split container: `<div role="region" aria-label="Vertical split: {path}">`
+- Individual frames: `<div role="region" aria-label="Code: {path}">`, `<div role="region" aria-label="Output: {path}">`
+
+## Resources
+
+- [W3C WAI ARIA Landmarks](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/)
+- [MDN: ARIA Landmarks](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role)
+- [WebAIM: Landmark Regions](https://webaim.org/articles/screenreader_testing/#landmarks)
+
+## Current Implementation Status
+
+### ✅ Completed Areas - October 2025
+
+The following areas have been successfully implemented with ARIA landmarks and labels:
+
+#### Phase 1: Application Shell
+
+- Root `<main>` landmark in `packages/frontend/app/page.tsx`
+- Top navigation bar with `aria-label="Application navigation"`
+
+#### Phase 2: Project Workspace
+
+- File tab navigation with dynamic project context
+- Activity bar and sidebar landmarks with `role="complementary"`
+- Main editor area with appropriate main landmark
+
+#### Phase 3: Frame Tree Split Editors
+
+- Split frame annotations with vertical/horizontal indicators
+- File path context in labels (e.g., "Editor frames split vertically: /path/to/file.py")
+
+#### Phase 4: Editor Title Bar
+
+- Toolbar region annotations for each editor type
+- Dynamic labels including editor type and filename
+
+#### Phase 5: Jupyter Notebook Cells
+
+- Cell regions with number, type (code/markdown), and status
+- Examples: "Code cell 5 (current, has error)", "Markdown cell 2"
+
+#### Phase 6: LaTeX Editor
+
+- Main output region: `"LaTeX output: {path}"`
+- PDF preview tab: `"PDF preview: {path} ({totalPages} pages)"`
+- Contents tab: `"Table of contents: {path}"`
+- Build output: `"Build output: {path}"`
+- Problems tab: `"Errors and warnings: {path} ({error count})"`
+- Statistics and output files regions with dynamic labels
+- Modified files: `output.tsx`, `output-stats.tsx`, `output-files.tsx`
+
+#### Phase 7: Code Editor (All Text Editors)
+
+- Generic text editor region with `aria-label="Text editor: {path}"`
+- Applied to all text-based editors (Python, JavaScript, LaTeX source, etc.)
+- Modified file: `codemirror-editor.tsx`
+
+#### Phase 8: Projects List Page
+
+- Main projects management region: `role="main" aria-label="Projects management"`
+- Project filters and controls: `"Project filters and controls"`
+- Projects list with dynamic count: `"Projects list ({count} project(s) total)"`
+- Search region: `"Search projects and files"`
+- Starred projects section with count: `"Starred projects ({count})"`
+- Modified files: `projects-page.tsx`, `filename-search.tsx`, `projects-starred.tsx`
+
+### All Changes Include:
+
+✅ Dynamic `aria-label` attributes with contextual information
+✅ File paths, editor types, cell numbers, and status indicators
+✅ Proper semantic HTML and ARIA roles
+✅ All code formatted with prettier
+✅ Successful compilation with `pnpm build-dev`
+
+## Completed Phases Summary
+
+### Phases 9-22: Foundational ARIA Implementation ✅ COMPLETED
+
+Comprehensive ARIA landmark annotations added across CoCalc frontend:
+
+- **Phase 9**: Account settings pages (10+ files) - Main layout, menus, and settings regions
+- **Phase 9b**: Account preferences sub-sections (25+ sub-regions labeled)
+- **Phase 10**: Editor frame infrastructure - Title bars, status indicators, keyboard support
+- **Phase 11a**: Projects list page - Main workspace, filters, controls, starred projects
+- **Phase 11b**: Project page workspace - Activity bar, file tabs, content areas
+- **Phase 12**: App shell & navigation - Top nav, connection status, banners, notifications
+- **Phases 13-22**: Component library enhancements, forms, modals, keyboard event handling
+
+**Key Achievements**:
+
+- 100+ files modified with proper ARIA roles and labels
+- Frame tree with split editor support (vertical/horizontal)
+- Live regions for status updates (aria-live="polite")
+- Keyboard event handling standardized via `ariaKeyDown()` utility
+- Design system colors integrated throughout
+- All code formatted and builds successfully
+
+See git history for detailed implementation of each phase.
+
+### Phase 13: Forms & Settings ⏳ PENDING
+
+**Priority: MEDIUM**
+
+- [ ] **Profile Settings** (`account/profile-settings.tsx`)
+  - [ ] Form structure: Proper `<label>` elements
+  - [ ] Image upload: Clear button/input labels
+  - [ ] Save button: `aria-label="Save profile"`
+
+- [ ] **SSH Keys** (`account/ssh-keys/`)
+  - [ ] Key list: `role="list"` structure
+  - [ ] Key items: Truncated key + description
+  - [ ] Add/delete buttons: Clear labels
+  - [ ] Form for new keys: Proper fieldset/legend
+
+- [ ] **API Keys** (`account/settings/api-keys.tsx`)
+  - [ ] Key list: Table or list semantics
+  - [ ] Visibility toggle: `aria-pressed` state
+  - [ ] Copy button: State changes (Copy → Copied)
+
+- [ ] **Project Settings** (`project/settings/`)
+  - [ ] Settings form: `<fieldset>` groups
+  - [ ] Input fields: Associated `<label>` elements
+  - [ ] Selection: Dropdown/select aria-labels
+  - [ ] Radio buttons: `fieldset role="group"` with `<legend>`
+  - [ ] Checkboxes: Clear group labels
+
+### Phase 14: Tables & Data Display ⏳ PENDING
+
+**Priority: MEDIUM**
+
+- [ ] **Data Tables** (Generic)
+  - [ ] Table role: `role="grid"` or semantic `<table>`
+  - [ ] Headers: `<th scope="col">` for columns, `scope="row"` for row headers
+  - [ ] Sort buttons: `aria-sort="ascending|descending|none|other"`
+  - [ ] Cell content: Descriptive alt text for icons/abbreviations
+
+- [ ] **Purchases Table** (`purchases/purchases.tsx`)
+  - [ ] Product list: Table with proper headers
+  - [ ] Price/quantity: Clear column purposes
+  - [ ] Actions: Purchase buttons with clear labels
+
+- [ ] **Subscriptions Table** (`purchases/subscriptions.tsx`)
+  - [ ] Active subscriptions: Mark current status visually + ARIA
+  - [ ] Renewal dates: Clear formatting
+  - [ ] Cancel buttons: Confirmation dialogs
+
+### Phase 15: Modals & Dialogs ⏳ PENDING
+
+**Priority: MEDIUM**
+
+- [ ] **Settings Modal** (`app/settings-modal.tsx`)
+  - [ ] Focus trap: Trap focus inside modal
+  - [ ] Close button: `aria-label="Close settings"`
+  - [ ] Title: Proper heading for modal purpose
+  - [ ] Form: Proper form structure within modal
+
+- [ ] **Confirmation Dialogs** (`app/popconfirm-modal.tsx`)
+  - [ ] Message: Clear confirmation text
+  - [ ] Buttons: `aria-label="Confirm action"`, `aria-label="Cancel"`
+  - [ ] Escape key: Support to dismiss
+
+- [ ] **File Dialogs** (`project/explorer/`)
+  - [ ] Ask Filename dialog: Input with label, button
+  - [ ] Directory selector: Keyboard navigation support
+  - [ ] Confirm: Clear action buttons
+
+### Phase 16: Component Library ⏳ PENDING
+
+**Priority: MEDIUM** - Widely used across frontend
+
+Location: `packages/frontend/components/`
+
+- [ ] **Icon** (`icon.tsx` - 25KB)
+  - [ ] Usage audit: Find all icon-only uses without aria-label
+  - [ ] Add: `aria-label` to all interactive icons
+  - [ ] Decorative: Add `aria-hidden="true"` where appropriate
+
+- [ ] **Buttons**
+  - [ ] Copy Button (`copy-button.tsx`)
+    - [ ] ✅ State changes already labeled
+    - [ ] [ ] Ensure aria-live working
+
+  - [ ] Refresh Button (`refresh.tsx`)
+    - [ ] ✅ Basic label present
+    - [ ] [ ] Verify aria-busy state
+
+  - [ ] Close Button (`close-x.tsx`, `close-x2.tsx`)
+    - [ ] ✅ Already converted to semantic buttons
+    - [ ] [ ] Audit all uses for proper labels
+
+- [ ] **Form Inputs**
+  - [ ] Search Input (`search-input.tsx`)
+    - [ ] ✅ Basic label present
+    - [ ] [ ] Help text association
+
+  - [ ] Text Input (`text-input.tsx`)
+    - [ ] ✅ Label present
+    - [ ] [ ] Error indication: aria-invalid, aria-describedby
+
+  - [ ] Select/Dropdown (`selector-input.tsx`)
+    - [ ] Label: `<label>` or aria-label
+    - [ ] Options: Clear option labels
+    - [ ] Current selection: Announcement on change
+
+  - [ ] Date/Time Picker (`date-time-picker.tsx`)
+    - [ ] Input: Clear label with format
+    - [ ] Calendar: Keyboard navigation (arrows, Enter)
+    - [ ] Selected date: aria-current="date" when selected
+
+  - [ ] Color Picker (`color-picker.tsx`)
+    - [ ] Input field: Accessible label
+    - [ ] Palette: Keyboard navigation
+    - [ ] Selected color: aria-current indication
+
+- [ ] **Tables**
+  - [ ] Table of Contents (`table-of-contents.tsx`)
+    - [ ] List structure: `role="list"`
+    - [ ] Expandable: `aria-expanded` on collapsible items
+
+  - [ ] Scrollable List (`scrollable-list.tsx`)
+    - [ ] Container: `role="list"`
+    - [ ] Items: `role="listitem"`
+    - [ ] Selection: `aria-selected` on items
+
+  - [ ] Data Grid (`data-grid/`)
+    - [ ] Grid: `role="grid"` structure
+    - [ ] Cells: Keyboard navigation (arrows)
+    - [ ] Headers: `scope` attribute
+    - [ ] Selection: `aria-selected` states
+
+- [ ] **Alerts & Status**
+  - [ ] Error Display (`error-display.tsx`)
+    - [ ] Container: `role="alert"`
+    - [ ] Message: Clear error text
+
+  - [ ] Loading (`loading.tsx`)
+    - [ ] Spinner: `aria-busy="true"` on parent
+    - [ ] Message: `aria-label="Loading..."`
+
+  - [ ] Tip/Help (`tip.tsx`)
+    - [ ] Container: `role="region" aria-label="Information"`
+    - [ ] Icon: Decorative `aria-hidden="true"`
+
+### Phase 17: Keyboard Navigation ⏳ PENDING
+
+**Priority: MEDIUM** - Enhancement across all components
+
+- [ ] **Tab Order Management**
+  - [ ] Audit tab order in complex pages
+  - [ ] Fix focus management issues
+  - [ ] `tabindex="-1"` for programmatically focused elements
+
+- [ ] **Keyboard Shortcuts**
+  - [ ] Document keyboard shortcuts
+  - [ ] Add keyboard hint to icon buttons
+  - [ ] Escape key: Close modals/menus/flyouts
+  - [ ] Arrow keys: Navigate lists, menus, tabs
+  - [ ] Enter/Space: Activate buttons, toggle checkboxes
+
+- [ ] **Focus Management**
+  - [ ] Focus trap: Modals, dropdowns
+  - [ ] Focus restoration: After modal closes
+  - [ ] Focus announcement: Skip links (if needed)
+  - [ ] Focus visible: CSS for keyboard users
+
+### Phase 18: Live Regions & Announcements ⏳ PENDING
+
+**Priority: MEDIUM** - Dynamic content
+
+- [ ] **Status Updates**
+  - [ ] Save status: File saved, unsaved changes
+  - [ ] Connection status: Connected, disconnected, connecting
+  - [ ] Build status: Building, complete, errors
+  - [ ] Implementation: Use `aria-live="polite"` or `aria-live="assertive"`
+
+- [ ] **Notifications**
+  - [ ] Success messages: `aria-live="polite"`
+  - [ ] Error alerts: `aria-live="assertive" role="alert"`
+  - [ ] Info messages: `aria-live="polite"`
+
+- [ ] **Loading States**
+  - [ ] Indicator: `aria-busy="true"` on container
+  - [ ] Message: "Loading... please wait"
+  - [ ] Progress: `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
+
+### Phase 19: Compute Servers UI ⏳ PENDING
+
+**Priority: LOW** - Advanced feature
+
+Location: `packages/frontend/compute/`
+
+- [ ] **Compute Servers List** (`compute-servers.tsx`)
+  - [ ] List structure: `role="list"`
+  - [ ] Server items: Clear status indicators
+  - [ ] Actions menu: ARIA menu structure
+
+- [ ] **Server Details** (`compute-server.tsx`)
+  - [ ] Tabs: Proper tab structure
+  - [ ] Forms: Fieldset/legend for groups
+  - [ ] Status indicators: aria-live updates
+
+- [ ] **Google Cloud Config** (`google-cloud-config.tsx` - 56KB)
+  - [ ] Form structure: Nested fieldsets/legends
+  - [ ] Inputs: Proper labeling
+  - [ ] Help text: aria-describedby
+
+### Phase 20: Course Management UI ⏳ PENDING
+
+**Priority: LOW** - Feature-specific
+
+Location: `packages/frontend/course/`
+
+- [ ] **Course Configuration** (`configuration/`)
+  - [ ] Settings form: Proper structure
+  - [ ] Tabs/sections: Clear navigation
+
+- [ ] **Assignments** (`assignments/`)
+  - [ ] List: `role="list"` structure
+  - [ ] Due dates: Clear presentation
+  - [ ] Grading: Status indicators
+
+- [ ] **Students** (`students/`)
+  - [ ] Student list: Table or list structure
+  - [ ] Selection: Batch operations
+  - [ ] Status: Grade/submission indicators
+
+### Phase 21: Chat & Messaging ⏳ PENDING
+
+**Priority: MEDIUM** - User-facing feature
+
+Location: `packages/frontend/chat/`
+
+- [ ] **Chat Log** (`chat-log.tsx`)
+  - [ ] Container: `role="log"` with `aria-live="polite"`
+  - [ ] Messages: Proper message structure
+  - [ ] Timestamps: Hidden labels or title attributes
+
+- [ ] **Message** (`message.tsx` - 32KB)
+  - [ ] Author info: Semantic markup
+  - [ ] Links: Proper `<a>` tags with href
+  - [ ] Code blocks: `<pre>` with syntax highlight labels
+  - [ ] Reactions: Icon + text or alt text
+  - [ ] Edited indicator: Clear to screen readers
+
+- [ ] **Input** (`input.tsx`)
+  - [ ] Text field: `<textarea>` or `<input>` with `<label>`
+  - [ ] Submit: Clear send button label
+  - [ ] Attachments: File upload button label
+  - [ ] Formatting: Toolbar with aria-labels
+
+- [ ] **Mentions/Notifications**
+  - [ ] Unread count: Badge with aria-label
+  - [ ] New message: Announcement with aria-live
+
+### Phase 22: Billing & Purchases ⏳ PENDING
+
+**Priority: LOW** - Secondary feature
+
+Location: `packages/frontend/purchases/`
+
+- [ ] **Purchases Page** (`purchases.tsx` - 37KB)
+  - [ ] Product list: Table or grid
+  - [ ] Price display: Clear currency/unit
+  - [ ] Add to cart: Clear action buttons
+  - [ ] Cart: Summary with quantities
+
+- [ ] **Subscriptions** (`subscriptions.tsx`)
+  - [ ] Active subscriptions: Status indication
+  - [ ] Renewal info: Clear dates and costs
+  - [ ] Cancel: Warning dialog
+
+- [ ] **Payments** (`payments.tsx`)
+  - [ ] Transaction list: Table structure
+  - [ ] Details: Expandable rows
+  - [ ] Filtering: Clear filter labels
+
+- [ ] **Balance** (`balance.tsx`, `balance-button.tsx`)
+  - [ ] Amount: Clear label and currency
+  - [ ] Update time: Timestamp clarity
+  - [ ] Button: `aria-label="Account balance: ${amount}"`
+
+---
+
+## ARIA Label Conciseness Improvements
+
+Screen reader verbosity is a significant factor in usability. Labels should be concise while still being meaningful. Updated labels in all implementation phases to use shorter, more direct wording:
+
+### Shortened Labels Pattern
+
+- `"Editor frames split vertically: ${path}"` → `"Vertical split: ${path}"`
+- `"Editor frames split horizontally: ${path}"` → `"Horizontal split: ${path}"`
+- `"Text editor: ${path}"` → `"Editor: ${path}"`
+- `"PDF preview: ${path} (${pages} pages)"` → `"PDF (${pages}p): ${path}"`
+- `"Table of contents: ${path}"` → `"Contents: ${path}"`
+- `"Build output: ${path}"` → `"Build log: ${path}"`
+- `"Errors and warnings: ${path} (X errors, Y warnings)"` → `"Issues (${e}e ${w}w): ${path}"`
+- `"LaTeX output: ${path}"` → `"Output: ${path}"`
+- `"Output files: ${path}"` → `"Files: ${path}"`
+- `"Statistics: ${path}"` → `"Stats: ${path}"`
+- `"Projects management"` → `"Projects"`
+- `"Project filters and controls"` → `"Controls"`
+- `"Projects list (N projects total)"` → `"N project(s)"`
+- `"Search projects and files"` → `"Search"`
+- `"Starred projects (N)"` → `"Starred (N)"`
+
+### Rationale
+
+- Shorter labels reduce cognitive load for screen reader users
+- Conciseness improves navigation speed
+- Context (file path, file type) is still preserved in the label
+- Abbreviations (e.g., "e" for errors, "w" for warnings, "p" for pages) are clear in context
+
+### Modified Files
+
+- `packages/frontend/frame-editors/frame-tree/frame-tree.tsx`
+- `packages/frontend/frame-editors/code-editor/codemirror-editor.tsx`
+- `packages/frontend/frame-editors/latex-editor/output.tsx`
+- `packages/frontend/frame-editors/latex-editor/output-files.tsx`
+- `packages/frontend/frame-editors/latex-editor/output-stats.tsx`
+- `packages/frontend/projects/projects-page.tsx`
+- `packages/frontend/projects/filename-search.tsx`
+- `packages/frontend/projects/projects-starred.tsx`
+
+## LaTeX Output Tab Navigation Annotation
+
+The LaTeX editor output panel contains a tab bar for switching between different output views (PDF, Contents, Files, Build log, Issues, Stats). This navigation bar is now properly annotated:
+
+### Implementation
+
+**File**: `packages/frontend/frame-editors/latex-editor/output.tsx` (Tabs component, line 645-646)
+
+```tsx
+<Tabs
+  // ... other props ...
+  role="navigation"
+  aria-label={`Output tabs: ${path}`}
+/>
+```
+
+### What This Provides
+
+- **Landmark Navigation**: Screen reader users can navigate to the tab bar as a distinct landmark
+- **Context**: The label includes the file path so users know which file's output tabs they're navigating
+- **Clear Purpose**: `role="navigation"` explicitly marks this as navigation, not generic content
+
+### Benefits
+
+- Screen reader users can jump directly to output tabs using landmark navigation
+- Tab switching is properly announced as a navigation action
+- Multiple LaTeX output panels in split editors can be distinguished by their file paths
+
+## LaTeX PDF Controls Accessibility Enhancements
+
+The LaTeX editor output panel has a control bar with build, sync, and zoom controls. The entire controls section and individual controls have been annotated with proper ARIA landmarks and labels for screen reader users.
+
+### PDFControls Container ✅
+
+**File**: `packages/frontend/frame-editors/latex-editor/output-control.tsx` (line 106-110)
+
+```tsx
+<div
+  role="region"
+  aria-label="PDF controls"
+  // ... other props
+>
+```
+
+**Annotations**:
+
+- Main container: `role="region"` with `aria-label="PDF controls"`
+- Makes the entire controls section discoverable as a landmark
+- Screen reader users can jump directly to PDF controls
+
+### Individual Sub-Control Region Landmarks
+
+Each of the four sub-control components now has its own region landmark:
+
+#### 1. Build Controls ✅
+
+**File**: `packages/frontend/frame-editors/latex-editor/output-control-build.tsx` (line 140)
+
+```tsx
+<div role="region" aria-label="Build controls">
+  <Dropdown.Button aria-label="Build menu" />
+  <BSButton aria-label="..." aria-pressed={...} />  {/* Dark mode toggle */}
+</div>
+```
+
+**Annotations**:
+
+- Container: `role="region"` with `aria-label="Build controls"`
+- Dropdown button: `aria-label="Build menu"`
+- Dark mode toggle: `aria-label` with translated text + `aria-pressed` for state
+
+#### 2. Page Navigation ✅
+
+**File**: `packages/frontend/frame-editors/latex-editor/output-control-pages.tsx` (line 91)
+
+```tsx
+<div style={CONTROL_PAGE_STYLE} role="region" aria-label="Page navigation">
+  <InputNumber />
+  <Button aria-label="Previous page" disabled={...} />
+  <Button aria-label="Next page" disabled={...} />
+</div>
+```
+
+**Annotations**:
+
+- Container: `role="region"` with `aria-label="Page navigation"`
+- Buttons announce page direction and enabled/disabled state
+
+#### 3. Sync Controls ✅
+
+**File**: `packages/frontend/frame-editors/latex-editor/output-control-sync.tsx` (line 175-178)
+
+```tsx
+<div role="region" aria-label="Sync controls">
+  <BSButton aria-label="..." aria-pressed={autoSyncInverse} />
+  <BSButton aria-label="..." aria-pressed={autoSyncForward} />
+  <BSButton aria-label="..." /> {/* Manual sync */}
+</div>
+```
+
+**Annotations**:
+
+- Container: `role="region"` with `aria-label="Sync controls"`
+- All buttons have aria-labels with translated tooltip text
+- Toggle buttons have `aria-pressed` for state
+
+#### 4. Zoom Controls ✅
+
+**File**: `packages/frontend/frame-editors/latex-editor/output-control-zoom.tsx` (line 202)
+
+```tsx
+<div role="region" aria-label="Zoom controls">
+  <Space.Compact>
+    <Button aria-label="Zoom in" />
+    <Button aria-label="Zoom out" />
+    <Button
+      aria-label={`Zoom: ${currentZoomPercentage}%`}
+      aria-haspopup="menu"
+    />
+  </Space.Compact>
+</div>
+```
+
+**Annotations**:
+
+- Container: `role="region"` with `aria-label="Zoom controls"`
+- Zoom in/out buttons: simple translated labels
+- Zoom percentage dropdown: includes current value + `aria-haspopup="menu"`
+
+### Landmark Structure Summary
+
+The complete hierarchy is now:
+
+```
+main: PDFControls
+├── region: PDF controls (container)
+│   ├── region: Build controls
+│   ├── region: Page navigation (if totalPages > 0)
+│   ├── region: Sync controls
+│   └── region: Zoom controls
+│
+└── navigation: Output tabs
+```
+
+\*\*Build Controls
+
+```tsx
+<Dropdown.Button
+  // ... other props ...
+  aria-label="Build menu"
+/>
+
+<BSButton
+  // ... other props ...
+  aria-label={intl.formatMessage(editor.toggle_pdf_dark_mode_title)}
+  aria-pressed={pdfDarkModeDisabled}
+/>
+```
+
+**Annotations**:
+
+- Build dropdown button: `aria-label="Build menu"` (accessible button label)
+- Dark mode toggle: `aria-label` with translated text + `aria-pressed` for toggle state
+
+### Sync Controls
+
+**File**: `packages/frontend/frame-editors/latex-editor/output-control-sync.tsx`
+
+```tsx
+<BSButton
+  // Inverse sync toggle ...
+  aria-label={intl.formatMessage(INVERSE_SYNC_TOOLTIP_MSG)}
+  aria-pressed={autoSyncInverse}
+/>
+
+<BSButton
+  // Forward sync toggle ...
+  aria-label={intl.formatMessage(FORWARD_SYNC_TOOLTIP_MSG)}
+  aria-pressed={autoSyncForward}
+/>
+
+<BSButton
+  // Manual sync button ...
+  aria-label={intl.formatMessage(SYNC_BUTTON_TOOLTIP_MSG)}
+/>
+```
+
+**Annotations**:
+
+- All sync buttons use internationalized labels from tooltip messages
+- Toggle buttons (`aria-pressed`) for forward/inverse sync state
+- Manual sync button with clear action label
+
+### Zoom Controls
+
+**File**: `packages/frontend/frame-editors/latex-editor/output-control-zoom.tsx`
+
+```tsx
+<Button
+  // Zoom in ...
+  aria-label={intl.formatMessage(labels.zoom_in)}
+/>
+
+<Button
+  // Zoom out ...
+  aria-label={intl.formatMessage(labels.zoom_out)}
+/>
+
+<Button
+  // Zoom dropdown ...
+  aria-label={`Zoom: ${currentZoomPercentage}%`}
+  aria-haspopup="menu"
+/>
+```
+
+**Annotations**:
+
+- Zoom in/out buttons: explicit labels from i18n
+- Zoom percentage dropdown: includes current zoom value + `aria-haspopup="menu"`
+
+### Benefits
+
+- Icon-only buttons now have clear accessible labels via `aria-label`
+- Toggle buttons properly announce their state via `aria-pressed`
+- Dropdown menus properly indicate they have nested content via `aria-haspopup`
+- All labels use internationalized text for multi-language support
+- Screen reader users can quickly understand and operate all PDF controls
+
+## Component Library Quick Accessibility Wins
+
+Several commonly used components received quick but impactful ARIA accessibility improvements:
+
+### Close Buttons (CloseX and CloseX2) ✅
+
+**Files**: `packages/frontend/components/close-x.tsx`, `packages/frontend/components/close-x2.tsx`
+
+**Changes**:
+
+- Replaced non-semantic `<a href="">` and `<div onClick>` with proper `<button type="button">`
+- Added `aria-label="Close"` to provide accessible description
+- Added button style resets to maintain appearance: `border: "none"`, `background: "transparent"`, `padding: 0`
+- Ensures button looks identical to original anchor/div implementation
+- Maintains CSS classes and styling (e.g., `pull-right`, `lighten`)
+
+**Code Examples**:
+
+```tsx
+// CloseX
+const closex_style: React.CSSProperties = {
+  float: "right",
+  marginLeft: "5px",
+  border: "none", // Reset button default border
+  background: "transparent", // Remove button background
+  padding: 0, // Remove button padding
+  cursor: "pointer",
+} as const;
+
+// CloseX2
+const DEFAULT_STYLE: CSS = {
+  cursor: "pointer",
+  fontSize: "13pt",
+  border: "none", // Reset button default border
+  background: "transparent", // Remove button background
+  padding: 0, // Remove button padding
+};
+```
+
+**Impact**: Close buttons used throughout UI are now keyboard-accessible and properly announced, with zero visual changes
+
+### Copy Button ✅
+
+**File**: `packages/frontend/components/copy-button.tsx`
+
+**Changes**:
+
+- Added `aria-label` that changes based on state: "Copy to clipboard" / "Copied"
+- Added `aria-live="polite"` to announce state changes to screen readers
+
+**Code**:
+
+```tsx
+<Button
+  aria-label={copied ? "Copied" : "Copy to clipboard"}
+  aria-live="polite"
+>
+```
+
+**Impact**: State changes now properly announced; users know when copy succeeded
+
+### Refresh Button ✅
+
+**File**: `packages/frontend/components/refresh.tsx`
+
+**Changes**:
+
+- Added `aria-label="Refresh"` for clear button purpose
+- Added `aria-busy={refreshing}` to announce when refresh is in progress
+
+**Code**:
+
+```tsx
+<Button
+  aria-label="Refresh"
+  aria-busy={refreshing}
+>
+```
+
+**Impact**: Users know button is processing and when operation completes
+
+### Mark All Button ✅
+
+**File**: `packages/frontend/components/mark-all.tsx`
+
+**Changes**:
+
+- Added `aria-label={`Mark all items as ${capitalize(how)}`}` for explicit action description
+
+**Impact**: Action is clear even with icon-only display; works with "read", "unread", "seen", "unseen" states
+
+## Form Components Accessibility Improvements
+
+Four commonly used form input components received ARIA accessibility enhancements:
+
+### Number Input ✅
+
+**File**: `packages/frontend/components/number-input.tsx`
+
+**Changes**:
+
+- Added `aria-label` that includes unit information: `"Enter number in {unit}"` when unit is provided
+- Added `aria-describedby` linking to constraints when min/max bounds are defined
+
+**Code**:
+
+```tsx
+<Input
+  aria-label={`Enter number${props.unit ? ` in ${props.unit}` : ""}`}
+  aria-describedby={
+    props.min != null || props.max != null
+      ? "number-input-constraints"
+      : undefined
+  }
+/>
+```
+
+**Impact**: Users know the expected input format and any constraints (min/max values)
+
+### Text Input ✅
+
+**File**: `packages/frontend/components/text-input.tsx`
+
+**Changes**:
+
+- Added `aria-label` to input field distinguishing between text and textarea
+- Added `aria-label="Save changes"` to the Save button for explicit action label
+
+**Impact**: Users know which input they're in and that the button saves their changes
+
+### Search Input ✅
+
+**File**: `packages/frontend/components/search-input.tsx`
+
+**Changes**:
+
+- Added `aria-label="Search"`
+- Added `aria-describedby` linking to help text about keyboard shortcuts (Enter, Esc, arrow keys)
+
+**Impact**: Search purpose is clear; users can discover keyboard shortcuts via screen readers
+
+### Date/Time Picker ✅
+
+**File**: `packages/frontend/components/date-time-picker.tsx`
+
+**Changes**:
+
+- Added `aria-label` that uses placeholder text or defaults to "Select date and time"
+- Added `aria-describedby` linking to date format description (e.g., "YYYY-MM-DD HH:mm Z")
+
+**Impact**: Users know the expected date/time format and can understand picker behavior
+
+## Editor Menu Accessibility Enhancements
+
+While Ant Design's `Button`, `Dropdown`, and `Menu` components provide built-in ARIA support (`role="button"`, `aria-haspopup="menu"`, `aria-expanded`), additional enhancements improve screen reader experience:
+
+### Improvements Made:
+
+#### 1. Menu Button Labels ✅ IMPLEMENTED
+
+- Added explicit `aria-label` to DropdownMenu trigger buttons
+- Pattern: `aria-label={`${title} menu`}`
+- Example: "File menu", "Edit menu", "View menu"
+- **File**: `packages/frontend/components/dropdown-menu.tsx`
+- **Benefit**: Screen readers now explicitly announce menu button purpose (e.g., "File menu", "Edit menu")
+
+#### 2. Menu Item Labels with Keyboard Shortcuts
+
+- Menu items include keyboard shortcuts in `aria-label`
+- Pattern: `aria-label="Save (Ctrl+S)"`
+- Screen readers announce the shortcut with the command
+- **Status**: ⏳ Future enhancement - Requires refactoring ManageCommands to extract shortcuts from Command metadata
+- **Files**: `packages/frontend/frame-editors/frame-tree/title-bar.tsx`, `packages/frontend/frame-editors/frame-tree/commands.ts`
+
+#### 3. Toggle Button State Annotations
+
+- Buttons with toggle state include `aria-pressed` attribute
+- Pattern: `aria-pressed={isEnabled}` combined with `aria-label="Build on save"`
+- Screen readers announce: "Build on save, pressed" or "Build on save, not pressed"
+- Examples: Build on Save, Autosave, Time Travel enabled/disabled
+- **Status**: ⏳ Future enhancement - Requires state tracking in ManageCommands.menuItem() method
+- **Files**: `packages/frontend/frame-editors/frame-tree/title-bar.tsx`
+
+### Technical Details:
+
+**DropdownMenu Component** (`packages/frontend/components/dropdown-menu.tsx`):
+
+- Added `aria-label={`${title} menu`}` to the Button trigger
+- Preserves Ant Design's automatic ARIA handling
+- Improves discoverability for screen reader users
+
+**Menu Items** (generated in `title-bar.tsx`):
+
+- Command menu items receive labels like: "Save (Ctrl+S)", "Undo (Ctrl+Z)"
+- Toggle items show state: "Build on save (enabled)" or "Build on save (disabled)"
+- Reduces cognitive load by announcing available shortcuts
+
+### Why This Matters:
+
+- Screen reader users can't see menu button purpose or state at a glance
+- Keyboard shortcuts are invisible to assistive technology
+- Toggle states help users understand current configuration without examining UI
+- Explicit labels make menu navigation more predictable and faster
+
+## Jupyter Notebook Cell Controls
+
+### Cell Buttonbar ✅
+
+**File**: `packages/frontend/jupyter/cell-buttonbar.tsx`
+
+**Changes**:
+
+- Added `role="region" aria-label={`Cell ${index + 1} controls`}` to main container (1-indexed for user-friendly display)
+- Enhanced Run/Stop dropdown button with comprehensive aria-label: `${label} cell${isRunning ? " (running)" : ""}, dropdown menu: run all above, run all below`
+  - Describes the primary action (Run or Stop)
+  - Announces current cell state (running or idle)
+  - Lists available menu options so users know what the dropdown contains
+  - Includes `aria-haspopup="menu"` to announce dropdown availability
+- Added `aria-label="Format code"` and `aria-busy={formatting}` to Format button
+- Added `aria-label={editing ? "Save markdown" : "Edit markdown"}` to Markdown edit button
+
+**Impact**: Each cell's controls are announced as a distinct region. Users can navigate between cells and understand their current functionality. Toggle buttons announce their state via aria-busy (formatting in progress) and edit status changes.
+
+**Landmark Structure**:
+
+```
+region: Cell 1 controls
+├── button: Run menu (aria-haspopup="menu")
+│   └── menu items: Run all above, Run all below
+├── button: Format code (aria-busy when formatting)
+└── button: Edit markdown (state-aware label)
+
+region: Cell 2 controls
+├── button: Run menu
+├── button: Format code
+└── button: Edit markdown
+```
+
+**Code Pattern**:
+
+```tsx
+// In getRunStopButton(), calculate isRunning state
+const isRunning =
+  cell.get("state") === "busy" ||
+  cell.get("state") === "run" ||
+  cell.get("state") === "start";
+
+// Return isRunning along with other button properties
+return {
+  tooltip: "...",
+  label: "Run" | "Stop",
+  icon: "...",
+  isRunning, // Boolean indicating if cell is running
+  onClick: () => {
+    /* ... */
+  },
+};
+
+// In renderCodeBarRunStop(), destructure isRunning from getRunStopButton()
+const { label, icon, tooltip, onClick, isRunning } = getRunStopButton();
+
+// Use isRunning in aria-label to show current cell state
+<div role="region" aria-label={`Cell ${index + 1} controls`}>
+  <Dropdown.Button
+    aria-label={`${label} cell${isRunning ? " (running)" : ""}, dropdown menu: run all above, run all below`}
+    aria-haspopup="menu"
+  >
+    {/* Run/Stop button - label describes current action, cell state, and menu options */}
+  </Dropdown.Button>
+
+  <Button aria-label="Format code" aria-busy={formatting}>
+    {/* Format button */}
+  </Button>
+
+  <Button aria-label={editing ? "Save markdown" : "Edit markdown"}>
+    {/* Markdown edit toggle */}
+  </Button>
+</div>;
+```
+
+**Technical Notes**:
+
+- Each cell gets its own control region with a numerical identifier for context
+- The Run/Stop dropdown uses aria-haspopup to announce menu availability
+- Format button uses aria-busy to indicate when formatting is in progress
+- Markdown button label changes based on current edit state for dynamic feedback
+- Cell timing, compute server info, and LLM tools are contained within this region
+
+## Implementation Notes
+
+### Phase 10 Completion (2025-10-28)
+
+**Components Enhanced**:
+
+1. **title-bar.tsx** (38KB)
+   - `renderMainMenusAndButtons()`: Changed div to `<nav>` with aria-label for menu navigation
+   - `renderButtonBar()`: Added `role="region"` with aria-label for symbols/outline bar
+   - `renderFrameControls()`: Added `role="region"` with aria-label for layout controls
+   - `render_full()`: Added aria-label to maximize/minimize button
+   - `render_split_row()`: Added aria-label to horizontal split button
+   - `render_split_col()`: Added aria-label to vertical split button
+   - `render_x()`: Added aria-label to close button
+   - `allButtonsPopover()`: Added aria-label and aria-expanded to more commands button
+   - `renderConnectionStatus()`: Added aria-live="polite" and aria-label for connection status
+
+2. **editor.tsx**
+   - Main container: Added `role="application"` with context-aware aria-label including editor type and file path
+
+3. **status-bar.tsx**
+   - Main container: Added `role="status"`, `aria-live="polite"`, and `aria-atomic="true"`
+   - Clear button: Made keyboard accessible with keyboard handler
+
+4. **Icon Component Enhancement** (components/icon.tsx)
+   - Added ARIA attribute support to Icon component:
+     - `role`, `aria-label`, `aria-expanded`, `aria-pressed`, `aria-live`, `aria-atomic`, `tabIndex`, `onKeyDown`
+   - Updated both unicode and icon rendering paths to pass through ARIA attributes
+   - Enables Icon component to be used with roles like "button" and dynamic ARIA state
+
+**Build Status**: ✅ Build successful (pnpm build-dev in packages/static)
+
+### Best Practice Notes
+
+1. **Direct ARIA on Components**: When Ant Design components (Space.Compact, Button, etc.) support ARIA attributes, apply them directly without wrapping in divs:
+   - ✅ `<Space.Compact role="region" aria-label="Zoom controls">`
+   - ❌ `<div role="region"><Space.Compact>` (unnecessary nesting)
+
+2. **Component Props Support**: All frontend components should be checked to ensure they forward ARIA attributes to their DOM elements. The Icon component was enhanced to support ARIA props for broader accessibility support.
+
+3. **Live Regions**: Use `aria-live="polite"` for status updates and `aria-live="assertive"` only for urgent alerts. Always test with screen readers to ensure announcements are clear.
+
+## Keyboard Event Handling & Event Propagation ✅ (2025-11-06)
+
+### Problem Identified
+
+When keyboard events activate menu items or navigation tabs, events were bubbling up to parent elements, causing:
+
+1. Multiple handlers to trigger for a single keyboard action
+2. Menu items activating while also triggering parent keyboard shortcuts
+3. Return/Enter key causing unexpected behavior in editor context
+
+### Solution Implemented
+
+#### 1. Enhanced `ariaKeyDown()` Handler
+
+**File**: `packages/frontend/app/aria.tsx`
+
+```tsx
+export function ariaKeyDown(
+  handler: (e?: React.KeyboardEvent | React.MouseEvent) => void,
+  stopPropagation: boolean = true, // ← New parameter (default: true)
+): (e: React.KeyboardEvent) => void {
+  return (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (stopPropagation) {
+        e.stopPropagation(); // ← Prevents event bubbling
+      }
+      handler(e);
+    }
+  };
+}
+```
+
+**Impact**: All navigation buttons, tabs, and custom button elements now prevent keyboard event bubbling by default. Optional parameter allows disabling if needed (backwards compatible).
+
+#### 2. Menu Item Click Handlers
+
+**File**: `packages/frontend/frame-editors/frame-tree/commands/manage.tsx` (line 541+)
+
+```tsx
+const onClick = async (event) => {
+  // Prevent event bubbling from menu item clicks
+  event?.stopPropagation?.();
+  event?.preventDefault?.();
+  // ... rest of handler
+};
+```
+
+**Impact**: Menu items from all editor types (File, Edit, View menus, etc.) now prevent event propagation when activated.
+
+#### 3. DropdownMenu Handler
+
+**File**: `packages/frontend/components/dropdown-menu.tsx` (line 99+)
+
+```tsx
+const handleMenuClick: MenuProps["onClick"] = (e) => {
+  // Prevent event bubbling from menu clicks
+  e?.domEvent?.stopPropagation?.();
+  e?.domEvent?.preventDefault?.();
+  // ... rest of handler
+};
+```
+
+**Impact**: Ant Design's menu click events are properly contained and don't bubble to parent components.
+
+### Benefits
+
+- ✅ Menu items activate correctly without side effects
+- ✅ Keyboard navigation (Enter/Space) is isolated to the activated element
+- ✅ Return key in menus doesn't trigger editor keyboard shortcuts
+- ✅ Navigation tabs don't interfere with other page interactions
+- ✅ Backwards compatible - existing code works unchanged
+
+### Testing Notes
+
+When keyboard testing menus:
+
+1. Open a menu with mouse click
+2. Navigate with arrow keys (Ant Design handles this)
+3. Press Enter to activate item - should NOT trigger parent handlers
+4. Verify the menu closes and the action executes cleanly
+
+## Phase 23: AutoFocus User Preference ✅ COMPLETED (Nov 6, 2025)
+
+**Priority: HIGH** - Improves keyboard navigation experience
+
+### Problem Statement
+
+Users with assistive technology or keyboard-only access found that search inputs and form fields would automatically grab focus when navigating pages or opening dialogs. This interfered with:
+
+- Landmark-based navigation (Alt+Shift+M to navigate regions)
+- Tab-order navigation between sections
+- Keyboard shortcut usage
+- General page exploration before using search/input
+
+### Solution Implemented
+
+Created a user-configurable preference to disable autoFocus behavior on normal page input fields. Popup dialogs (modals, confirmation dialogs) retain autoFocus for better UX since they don't interfere with overall page navigation.
+
+### Architecture
+
+#### 1. New Hook: `useAutoFocusPreference()` ✅
+
+**File**: `packages/frontend/account/use-auto-focus-preference.ts` (Created)
+
+```typescript
+import { useTypedRedux } from "@cocalc/frontend/app-framework";
+
+export function useAutoFocusPreference(): boolean {
+  const other_settings = useTypedRedux("account", "other_settings");
+  return other_settings?.get("auto_focus") ?? false; // Default: disabled
+}
+```
+
+**Key Details**:
+
+- Centralized single source of truth for the preference
+- Returns boolean: true (autoFocus enabled) or false (disabled, default)
+- Integrates with Redux account store for persistence across sessions
+
+#### 2. Account Settings UI ✅
+
+**File**: `packages/frontend/account/account-preferences-appearance.tsx`
+
+Added new Switch control in "User Interface" section:
+
+```tsx
+<Switch
+  checked={!!other_settings.get("auto_focus")}
+  onChange={(e) => on_change("auto_focus", e.target.checked)}
+>
+  <FormattedMessage
+    id="account.other-settings.auto_focus"
+    defaultMessage={`<strong>Auto Focus Text Input:</strong>
+    automatically focus text input fields when they appear (e.g., in dialogs and modals)`}
+  />
+</Switch>
+```
+
+**Placement**: Above "Hide File Tab Popovers" in account preferences
+
+#### 3. Implementation Pattern ✅
+
+Used consistently across all affected input fields:
+
+```tsx
+// Import hook
+import { useAutoFocusPreference } from "@cocalc/frontend/account";
+
+// Use in component
+const shouldAutoFocus = useAutoFocusPreference();
+
+// Apply to inputs
+<Input
+  autoFocus={shouldAutoFocus}
+/>
+
+<SearchInput
+  autoFocus={shouldAutoFocus}
+  autoSelect={shouldAutoFocus}
+/>
+```
+
+### Files Modified
+
+**Core**:
+
+- `packages/frontend/account/use-auto-focus-preference.ts` (Created)
+- `packages/frontend/account/index.ts` - Added export
+- `packages/frontend/account/account-preferences-appearance.ts` - Added UI control
+- `packages/frontend/components/search-input.tsx` - **Bug fix**: Fixed undefined `focus` variable in useEffect (critical fix)
+
+**Input Fields Updated**:
+
+- `packages/frontend/project/new/new-file-page.tsx` - 2 inputs (create folder modal, filename)
+- `packages/frontend/projects/create-project.tsx` - 1 input (project title)
+- `packages/frontend/projects/projects-table-controls.tsx` - 1 input (search projects)
+- `packages/frontend/project/explorer/search-bar.tsx` - 1 input (filter files, select autoSelect)
+- `packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx` - 1 input (command palette)
+
+**NOT Modified** (intentional):
+
+- Popup dialog inputs in `ai-cell-generator.tsx` and `llm-assistant-button.tsx` - These remain with autoFocus enabled since popup dialogs don't interfere with keyboard navigation
+- Cell inputs in Jupyter notebooks - Cell-specific inputs remain with autoFocus enabled
+
+### User Impact
+
+- ✅ Keyboard-only users can navigate landmarks without inputs stealing focus
+- ✅ Assistive technology users have full control over focus behavior
+- ✅ Preference persists across sessions in account settings
+- ✅ Default (disabled) prevents unexpected focus grabs
+- ✅ Users can re-enable if they prefer automatic focusing
+
+### Testing
+
+**Bug Fix Validation**:
+
+The SearchInput component had a critical bug preventing the preference from working:
+
+```typescript
+// BEFORE (broken):
+useEffect(() => {
+  if (focus == null) return; // ← undefined variable
+  input_ref.current?.focus();
+}, [focus]); // ← wrong dependency
+
+// AFTER (fixed):
+useEffect(() => {
+  if (props.focus == null) return;
+  input_ref.current?.focus();
+}, [props.focus]); // ← correct dependency
+```
+
+This fix resolved the issue where file explorer search was still grabbing focus despite `shouldAutoFocus={false}`.
+
+---
+
+## Phase 24: Editor Content Landmark Navigation ✅ COMPLETED (Nov 6, 2025)
+
+**Priority: HIGH** - Core editor accessibility
+
+### Solution: Two-Step Interaction Pattern
+
+Users can now navigate editor content with landmarks and Return/Tab keys:
+
+**Step 1: Focus Content Landmark**
+
+```
+Alt+Shift+M → "Content: {filename}" landmark focused
+```
+
+**Step 2: Tab Between Frames (if split editors)**
+
+```
+Tab → Next frame focused and becomes active
+Shift+Tab → Previous frame focused and becomes active
+```
+
+**Step 3: Enter Editor**
+
+```
+Return → CodeMirror editor receives focus
+→ Ready to edit immediately
+```
+
+### Implementation Summary
+
+**File: `packages/frontend/project/page/page.tsx`**
+
+- Content landmark (`role="main"`) is now focusable with `tabindex="0"`
+- Return key handler calls `focusPrimaryEditor()` which:
+  1. Tries to focus CodeMirror editor (`.cm-editor`)
+  2. Falls back to first focusable element
+  3. Last resort: focuses main element itself
+
+**File: `packages/frontend/frame-editors/frame-tree/frame-tree.tsx`**
+
+- All frames focusable with `tabindex="0"` (was: only active frame)
+- `onFocus` handler calls `actions.set_active_id(frameId, false)` - focuses frame makes it active
+- Return key handler focuses editor within the focused frame
+- Tab/Shift+Tab naturally navigate between frames
+
+**File: `packages/frontend/frame-editors/_style.sass`**
+
+- Visual feedback with design system colors:
+  - Focus outline: `colors.$COL_ANTD_LINK_BLUE` (#1677ff)
+  - Background highlight: `colors.$COL_ANTD_BG_BLUE_L` (#e6f4ff)
+- Using `:focus-visible` for keyboard navigation only
+
+### User Experience
+
+**With Split Editors (Vertical or Horizontal)**:
+
+```
+1. Alt+Shift+M → "Content: file.py (Main)" landmark
+2. Tab → Frame 1 focused (blue border, light blue bg)
+3. Tab → Frame 2 focused (blue border, light blue bg)
+4. Return → Editor in Frame 2 receives focus
+5. Type → Ready to edit
+6. Alt+Shift+M → Navigate to next landmark (sidebar, activity bar, etc.)
+```
+
+### Key Features
+
+✅ Full Tab/Shift+Tab navigation between all frames
+✅ Visual highlighting with design system colors
+✅ Focused frame automatically becomes active frame
+✅ Return key focuses CodeMirror editor
+✅ Works with all editor types and split layouts
+✅ No mouse required - fully keyboard accessible
+✅ Uses `:focus-visible` - only shows on keyboard nav
+
+### Testing Status
+
+Ready to test - not yet manually tested due to time constraints
+
+---
+
+## Session Summary - November 6, 2025
+
+### Session Accomplishments
+
+**Phases Completed**:
+
+- ✅ Phase 23: AutoFocus User Preference
+- ✅ Phase 24: Editor Content Landmark Navigation
+
+**Phase 23: AutoFocus User Preference** ✅
+
+- New user preference: "Auto Focus Text Input" in account appearance settings
+- Created reusable hook: `useAutoFocusPreference()` for consistent behavior across 5+ input locations
+- **Critical bug fix**: Fixed undefined `focus` variable in `search-input.tsx`
+- Default: autoFocus disabled (false) for better landmark navigation
+- Popup dialogs remain with autoFocus enabled (no interference with navigation)
+- Files modified: 9 (hook, export, account UI, bug fix, 5 input components)
+
+**Phase 24: Editor Content Landmark Navigation** ✅
+
+- **Implementation**: Complete Tab/Shift+Tab navigation between split editor frames
+- Content landmark made focusable: Alt+Shift+M navigates, Return key enters editor
+- All frame containers focusable: Tab between frames, each becomes active when focused
+- Visual feedback: Design system colors (blue outline and light blue background) via `:focus-visible`
+- Files modified: 3 (page.tsx, frame-tree.tsx, \_style.sass)
+- Status: Built successfully, ready for testing (manual testing deferred due to time)
+
+### Key Improvements This Session
+
+1. **Keyboard Navigation**: Full Tab/Shift+Tab navigation through split editor frames
+2. **Landmark Integration**: Alt+Shift+M + Return/Tab provides seamless access to editor content
+3. **Visual Design**: Uses design system colors for consistency with rest of app
+4. **Bug Fixes**: Fixed SearchInput focus bug that was preventing autoFocus preference from working
+
+### Architecture Highlights
+
+- **Frame Focus**: `onFocus` handler auto-activates frames, enabling natural Tab navigation
+- **Focus Strategies**: Three-tier fallback (CodeMirror → focusable element → main element)
+- **No Hardcoding**: All colors use design system variables (`$COL_ANTD_LINK_BLUE`, `$COL_ANTD_BG_BLUE_L`)
+
+### Next Steps
+
+- Manual testing of Phase 24 when time permits
+- Phase 25: Hotkey Navigation Dialog (Design Phase - In Progress)
+
+---
+
+## Phase 25: Hotkey Quick Navigation Dialog ✅ COMPLETED (Nov 7, 2025)
+
+**Priority: HIGH** - Keyboard-driven navigation enhancement
+
+**Goal**: Enable rapid keyboard-based navigation between frames, files, and pages via global hotkey.
+
+### Implementation Overview
+
+The Hotkey Quick Navigation Dialog provides a fast, accessible way to navigate anywhere in CoCalc using keyboard shortcuts. It combines:
+
+1. **Global Hotkey Detection**: Configurable hotkey (Shift+Shift, Alt+Shift+H, Alt+Shift+Space) triggers the dialog
+2. **Hierarchical Navigation Tree**: Shows all accessible items (frames, files, pages, account)
+3. **Smart Search**: Multi-term partial matching with visual highlighting
+4. **Keyboard-Only Interaction**: Complete keyboard control with no mouse required
+5. **Focus Management**: Dialog handles focus correctly for accessibility
+
+### Architecture & Files
+
+**Location**: `packages/frontend/app/hotkey/` directory
+
+**Core Components**:
+
+1. **QuickNavigationDialog** (`dialog.tsx`) - 500px wide modal
+   - Search input with clearable button, auto-focused when dialog opens
+   - Tree view with dynamic expansion based on search results
+   - Real-time search with multi-term partial matching
+   - Visual highlighting of matching search terms with `<strong>` tags
+   - Selection highlighting with pale blue background (`rgba(13, 110, 253, 0.15)`)
+   - Fixed height (`80vh`) to prevent jumping layout
+   - No modal animation for instant appearance
+
+2. **Navigation Tree Builder** (`build-tree.tsx`)
+   - Converts Redux state into hierarchical NavigationTreeNode structure
+   - **Files**: `FileInfo[]` with path and frame array
+   - **Pages**: Project fixed tabs (Files, New, Search, Log, Settings, Info, Users, Servers, Upgrades)
+   - **Frames**: Active editor frames in current file (numbered 1-9)
+   - **Icons**: Uses `filenameIcon()` for files and `FIXED_PROJECT_TABS` icons for pages
+   - **NavigationData**: Each node has type ("frame", "file", "page", "account") and action callback
+
+3. **Navigation Data Hook** (`use-navigation-data.ts`)
+   - `useNavigationTreeData()`: Extracts Redux state into raw tree data
+     - Active frames from current editor (if in editor mode)
+     - Current project (prioritized in tree order)
+     - Other open projects from `open_projects` set
+     - File list from current project's Redux state
+     - Attempts to fetch files from other projects via `redux.getProjectStore(projectId)`
+     - Account pages (hardcoded, always available)
+   - `useEnhancedNavigationTreeData()`: Adds Redux action handlers to tree nodes
+     - Frame activation: `editorActions.set_active_id(frameId)`
+     - File opening: `projectActions.open_file({ path })`
+     - Page switching: `projectActions.set_active_tab(pageId)` with project switching if needed
+     - Account navigation: `window.location.href = "/account/path"`
+
+4. **Hotkey Detector** (`detector.tsx`)
+   - `GlobalHotkeyDetector`: Detects configured hotkey (Shift+Shift, Alt+Shift+H, Alt+Shift+Space)
+   - `useShiftShiftDetector()`: Detects double Shift within configurable threshold (default 300ms)
+   - `useAltShiftHDetector()`: Alt+Shift+H / Cmd+Shift+H detection
+   - `useAltShiftSpaceDetector()`: Alt+Shift+Space / Cmd+Shift+Space detection
+   - `useCustomHotkeyDetector()`: Unified hook for all hotkey types
+   - Respects `blockShiftShiftHotkey` flag to prevent triggering when disabled
+
+5. **User Preferences** (`hotkey-selector.tsx`, `hotkey-delay-test.tsx`)
+   - Dropdown in Account → Appearance → User Interface
+   - Configure hotkey: Shift+Shift, Alt+Shift+H, Alt+Shift+Space, or Disabled
+   - Configurable delay for Shift+Shift (100-500ms, slider with marks)
+   - Test button to verify hotkey is working
+   - Labels only shown for Shift+Shift option (others are instant)
+
+### Search & Filtering
+
+**Multi-Term Partial Matching Algorithm**:
+
+1. Search terms separated by spaces
+2. ALL terms must appear in text (subset matching, not fuzzy)
+3. **Case sensitivity**: Automatic based on search input
+   - Contains uppercase letter → case-sensitive
+   - All lowercase → case-insensitive
+4. **Search scope**: Searches across file paths, page names, frame names, account pages
+5. **Tree filtering**: Non-matching branches removed; parent nodes expanded to show matches
+
+**Example**:
+
+- Search: `"foo bar"` matches paths like `/path/to/foo_file_bar.py`
+- Search: `"Foo"` searches case-sensitively
+- Search: `"foo"` searches case-insensitively
+
+**Visual Highlighting**:
+
+- Search terms wrapped in `<strong>` tags within matching items
+- All occurrences highlighted (non-overlapping)
+- Respects case sensitivity of search
+
+### Keyboard Interaction
+
+**Opening the Dialog**:
+
+```
+Hotkey (default Shift+Shift) → Dialog opens
+→ Search input auto-focused
+→ Ready to type immediately
+```
+
+**Navigation While Dialog is Open**:
+
+| Key              | Action                                                       |
+| ---------------- | ------------------------------------------------------------ |
+| Type text        | Filter results by multi-term matching                        |
+| **1-9**          | Jump directly to current frame (only when not searching)     |
+| **↑**            | Navigate to previous visible item                            |
+| **↓**            | Navigate to next visible item                                |
+| **Return**       | Activate selected item (open file, switch page, focus frame) |
+| **ESC**          | Close dialog and return focus to previous location           |
+| **Clear button** | Clear search text (X icon in input)                          |
+
+**Multi-Step Navigation**:
+
+1. User hits hotkey → Dialog opens with empty search
+2. First item auto-selected (current frame or first project)
+3. Type to filter → First matching item auto-selected
+4. Arrow keys to navigate → Parent nodes auto-expand as needed
+5. Return to activate → Dialog closes, action executes
+
+### Accessibility Features
+
+✅ **Focus Management**
+
+- Dialog captures focus via Modal component
+- Search input auto-focused with useRef and setTimeout for reliable focus
+- Clear search button provides quick way to reset
+- ESC key closes dialog
+
+✅ **Keyboard-Only Access**
+
+- No mouse required - complete keyboard navigation
+- Click support for mouse users (info.event detection)
+- All tree items keyboard-navigable via arrow keys
+
+✅ **ARIA Semantics**
+
+- Modal: `<Modal>` component provides role and focus management
+- Tree: `<Tree>` component from Ant Design provides semantic structure
+- Title: i18n-based FormattedMessage with message ID
+- Help text: "Type to search • Numbers 1–9 for current frames • ↑↓ navigate • Return to open • ESC to close"
+
+✅ **Internationalization**
+
+- Translation keys in `app.hotkey.dialog.*` namespace:
+  - `title`: "Hotkey Quick Navigation"
+  - `search_placeholder`: "Search frames, files, and pages..."
+  - `help_text`: Keyboard shortcut help
+- All labels and messages translatable via react-intl
+
+✅ **Visual Feedback**
+
+- Selected items: Pale blue background (ANTD_LINK_BLUE with transparency)
+- Search matches: Bold text via `<strong>` tags
+- Tree structure: Icons + text for visual context
+- Dialog: Fixed 80vh height prevents layout jump
+
+### Tree Structure
+
+The navigation tree prioritizes access:
+
+```
+[current]                          ← Active editor frames (1-9)
+├── Frame 1                        ← Numbered for quick jump
+├── Frame 2
+└── Frame 3
+
+Project "Current Project"          ← Prioritized (active project)
+├── Files
+│   ├── file.py [icon]
+│   │   ├── Frame 1 (Python REPL)
+│   │   └── Frame 2 (Build output)
+│   └── notebook.ipynb [icon]
+│       └── Frame 1 (Jupyter)
+├── Pages
+│   ├── Files [folder icon]
+│   ├── New [plus icon]
+│   ├── Search [search icon]
+│   ├── Log [history icon]
+│   ├── Settings [gear icon]
+│   ├── Info [microchip icon]
+│   ├── Users [users icon]
+│   ├── Servers [server icon]
+│   └── Upgrades [gift icon]
+
+Project "Other Project"            ← Other open projects
+├── Files
+│   └── script.sh [icon]
+└── Pages
+    └── Files [folder icon]
+
+Account                            ← Account pages (mirrors account page left nav)
+├── Settings [settings icon]
+├── Profile [user icon]
+├── Preferences [sliders icon]
+│   ├── Appearance [eye icon]
+│   ├── Editor [edit icon]
+│   ├── Keyboard [keyboard icon]
+│   ├── AI [brain icon]
+│   ├── Communication [comments icon]
+│   ├── SSH and API Keys [key icon]
+│   └── Other [sliders icon]
+├── Subscriptions [calendar icon]
+├── Licenses [key icon]
+├── Pay as you Go [line-chart icon]
+├── Upgrades [arrow-circle-up icon]
+├── Purchases [money-check icon]
+├── Payments [credit-card icon]
+├── Payment Methods [credit-card icon]
+├── Statements [calendar-week icon]
+├── Cloud Filesystems [cloud icon]
+├── Public Paths [share-square icon]
+└── Support [question-circle icon]
+```
+
+**Key Design Decisions**:
+
+1. **Open Projects Only**: Only shows projects in top navigation bar (performance + relevance)
+2. **Current Project First**: Reduces navigation distance for files in active project
+3. **Files by Project**: Groups related files together logically
+4. **Page Icons**: Visual indicators match project UI
+5. **Frame Numbers**: 1-9 for direct jump (keyboard shortcut)
+6. **Account Always Visible**: Quick access to settings
+
+### Implementation Details
+
+**State Management** (dialog.tsx):
+
+- `searchValue`: Current search text (cleared on open)
+- `expandedKeys`: Which tree nodes are expanded
+- `autoExpandParent`: Automatically expand parent nodes when searching
+- `selectedKey`: Currently selected item (keyboard navigation)
+
+**Search Logic**:
+
+```tsx
+// Split search by spaces, filter empty strings
+const terms = searchValue.split(/\s+/).filter((t) => t.length > 0);
+
+// Case sensitivity: true if ANY uppercase letter
+const caseSensitive = /[A-Z]/.test(searchValue);
+
+// All terms must appear in text (subset matching)
+const matches = terms.every((term) => {
+  const regex = new RegExp(escapeRegex(term), caseSensitive ? "" : "i");
+  return regex.test(text);
+});
+```
+
+**Visual Highlighting**:
+
+```tsx
+// Create regex matching any of the terms
+const pattern = terms.map((term) => escapeRegex(term)).join("|");
+const regex = new RegExp(`(${pattern})`, caseSensitive ? "g" : "gi");
+
+// Split text by matches and wrap in <strong>
+const parts = text.split(regex);
+return parts.map((part, idx) =>
+  isMatch(part) ? (
+    <strong key={idx}>{part}</strong>
+  ) : (
+    <span key={idx}>{part}</span>
+  ),
+);
+```
+
+**Click vs Keyboard Detection**:
+
+Ant Design's Tree `onSelect` callback receives `info.event`:
+
+- **Click**: `info.event` is present → activate immediately
+- **Keyboard**: `info.event` is undefined → select only, let Return key activate
+
+```tsx
+onSelect={(keys, info) => {
+  const newKey = keys[0];
+  setSelectedKey(newKey);
+
+  // If clicked (info.event present), activate
+  if (info.event && newKey) {
+    const node = searchList.find((item) => item.key === newKey);
+    if (node?.node.navigationData) {
+      node.node.navigationData.action();
+      onClose();
+    }
+  }
+}}
+```
+
+### Integration Points
+
+**1. Account Preferences** (`account-preferences-appearance.tsx`)
+
+- New section in "User Interface" settings
+- Hotkey selector dropdown
+- Delay slider (100-500ms for Shift+Shift)
+- Test button with visual feedback
+
+**2. App Shell** (`app/page.tsx`)
+
+- Renders `GlobalHotkeyDetector` component
+- Renders `QuickNavigationDialog` component
+- Passes `quick_nav_visible` state and tree data
+- Respects `blockShiftShiftHotkey` flag for disabled state
+
+**3. Redux State**
+
+- Account store: `quick_nav_hotkey` preference, `quick_nav_hotkey_delay`
+- Page store: `blockShiftShiftHotkey` flag for disabling hotkey when modal/dialog is open
+
+### Testing Scenarios
+
+**Scenario 1: Basic Search**
+
+1. Open dialog (hotkey)
+2. Type "python" → Shows Python files
+3. Select file → Opens in editor
+4. Verify file is now active
+
+**Scenario 2: Frame Navigation**
+
+1. Open file with split editor (multiple frames)
+2. Open dialog
+3. Press "1" → Focuses first frame
+4. Press "2" → Focuses second frame
+5. Verify frames become active
+
+**Scenario 3: Project Switching**
+
+1. Have multiple open projects
+2. Open dialog
+3. Search for file in non-current project
+4. Return → Project switches, file opens
+5. Verify project is now active
+
+**Scenario 4: Case Sensitivity**
+
+1. Open dialog
+2. Type "Settings" → Shows only capital S matches
+3. Type "settings" → Shows all case-insensitive matches
+4. Verify correct filtering
+
+**Scenario 5: Account Navigation**
+
+1. Open dialog
+2. Type "billing" → Shows Billing in Account section
+3. Return → Navigates to /account/billing
+4. Verify page loads
+
+### Account Navigation Implementation
+
+The Account section in the hotkey dialog mirrors the exact structure of the account page's left side navigation, including all icons and nested organization.
+
+**Account Navigation Structure**:
+
+1. **Settings** (index) - Overview page with all account statistics
+2. **Profile** - User profile information
+3. **Preferences** (expandable submenu):
+   - Appearance - Visual theme and UI preferences
+   - Editor - Code editor settings
+   - Keyboard - Keyboard shortcuts and bindings
+   - AI - AI assistant configuration
+   - Communication - Notification preferences
+   - SSH and API Keys - Security credentials
+   - Other - Miscellaneous settings
+4. **Subscriptions** - Active subscriptions and renewals
+5. **Licenses** - License management
+6. **Pay as you Go** - Usage tracking and billing
+7. **Upgrades** - (Deprecated but maintained for legacy users)
+8. **Purchases** - Purchased products and add-ons
+9. **Payments** - Payment history and transactions
+10. **Payment Methods** - Credit cards and payment options
+11. **Statements** - Billing statements and invoices
+12. **Cloud Filesystems** - Cloud storage integration
+13. **Public Paths** - Published files and sharing
+14. **Support** - Support tickets and help
+
+**Icon Assignment** (matching `account-page.tsx`):
+
+- Settings → settings icon
+- Profile → user icon
+- Preferences → sliders icon (container)
+  - Appearance → eye icon
+  - Editor → edit icon
+  - Keyboard → keyboard icon
+  - AI → AIAvatar component (special animated avatar)
+  - Communication → comments icon
+  - SSH and API Keys → key icon
+  - Other → sliders icon
+- Subscriptions → calendar icon
+- Licenses → key icon
+- Pay as you Go → line-chart icon
+- Upgrades → arrow-circle-up icon
+- Purchases → money-check icon
+- Payments → credit-card icon
+- Payment Methods → credit-card icon
+- Statements → calendar-week icon
+- Cloud Filesystems → cloud icon
+- Public Paths → share-square icon
+- Support → question-circle icon
+
+**Navigation Handlers** (in `useEnhancedNavigationTreeData`):
+
+The account handler differentiates between three types of navigation:
+
+```tsx
+// 1. Settings index (special case)
+if (navData.id === "index") {
+  accountActions.setState({
+    active_page: "index",
+    active_sub_tab: undefined,
+  });
+  accountActions.push_state(`/settings/index`);
+}
+
+// 2. Profile (standalone page)
+if (navData.id === "profile") {
+  accountActions.setState({
+    active_page: "profile",
+    active_sub_tab: undefined,
+  });
+  accountActions.push_state(`/profile`);
+}
+
+// 3. Preferences sub-tabs (nested navigation)
+if (navData.id.startsWith("preferences-")) {
+  const subTab = navData.id.replace("preferences-", "");
+  accountActions.setState({
+    active_sub_tab: `preferences-${subTab}`,
+    active_page: "preferences",
+  });
+  accountActions.push_state(`/preferences/${subTab}`);
+}
+
+// 4. Other account pages (standard tabs)
+accountActions.set_active_tab(navData.id);
+accountActions.push_state(`/${navData.id}`);
+```
+
+### Known Limitations
+
+1. **File Listing**: Only shows files currently open in each project
+   - Future: Async fetching via conat for full directory listing
+   - Marked as TODO in use-navigation-data.ts
+
+2. **Search Scope**: Doesn't search file contents, only paths/names
+   - Future: Could add content search integration
+
+3. **Hotkey Conflicts**: Might conflict with other applications' hotkeys
+   - Mitigation: Alt+Shift+H/Space options avoid common conflicts
+   - Shift+Shift is easy to accidentally trigger (design decision: useful vs annoying)
+
+### Files Modified Summary
+
+**Core Implementation**:
+
+- `packages/frontend/app/hotkey/dialog.tsx` (850 lines) - Modal with search, tree, keyboard handling
+- `packages/frontend/app/hotkey/build-tree.tsx` (450 lines) - Converts Redux state to navigation tree with full account structure
+- `packages/frontend/app/hotkey/use-navigation-data.ts` (330 lines) - Redux hooks and account navigation handlers
+- `packages/frontend/app/hotkey/detector.tsx` (280 lines) - Hotkey detection for Shift+Shift, Alt+Shift+H/Space
+- `packages/frontend/app/hotkey/index.tsx` (exports) - Module exports
+
+**Integration**:
+
+- `packages/frontend/app/page.tsx` (GlobalHotkeyDetector + QuickNavigationDialog integration)
+- `packages/frontend/account/account-preferences-appearance.tsx` (Hotkey settings UI)
+
+**Total Lines of Code**: ~2,150 (all TypeScript/TSX with proper typing and icons)
+
+### Account Navigation Details
+
+The account section implementation includes:
+
+- ✅ Full account page structure mirroring (14 top-level items + 7 preferences sub-items)
+- ✅ All icons matching account-page.tsx (with special AIAvatar for AI preferences)
+- ✅ Proper Redux action handling for 4 different navigation types:
+  - Settings index (special case)
+  - Profile (standalone page)
+  - Preferences sub-tabs (nested)
+  - Other account pages (standard tabs)
+- ✅ Nested tree structure with proper parent expansion
+- ✅ Full search support across all account items
+
+## Phase 25b: Frame Tree Navigation Dialog Enhancements ⏳ IN PROGRESS (Nov 7, 2025)
+
+**Priority: HIGH** - Improved frame discovery and navigation
+
+### Problem Addressed
+
+Frame navigation in split editors was difficult to discover and use:
+
+- Frames were shown in a collapsed "[current]" section
+- No visual indication of frame editor types
+- Technical internal names instead of user-friendly labels
+- No color differentiation between frame types
+
+### Solution Implemented
+
+Enhanced the hotkey dialog's frame section with better visibility, colors, naming, and structure:
+
+#### 1. Frame Tree Structure Display ✅
+
+**File**: `packages/frontend/app/hotkey/build-tree.tsx`, `packages/frontend/app/hotkey/use-navigation-data.ts`
+
+- Added frame tree structure extraction showing binary split nodes
+- Splits labeled as "Horizontal" or "Vertical" based on direction
+- Leaf frames (numbered 1-9) appear as children of their parent split containers
+- All split nodes have `defaultExpanded: true` so structure is always visible
+
+**Example tree**:
+
+```
+filename.ext
+└── Horizontal
+    ├── Vertical
+    │   ├── <Tag>1</Tag> Python REPL
+    │   └── <Tag>2</Tag> Jupyter
+    └── <Tag>3</Tag> Build Output
+```
+
+#### 2. Auto-Expanded Current File and Splits ✅
+
+**File**: `packages/frontend/app/hotkey/build-tree.tsx`
+
+- Current file node has `defaultExpanded: true`
+- All split nodes have `defaultExpanded: true`
+- Users can collapse manually but starts fully expanded
+- Preference persists in localStorage
+
+#### 3. Colored Frame Tags by Editor Type ✅
+
+**File**: `packages/frontend/app/hotkey/use-navigation-data.ts`
+
+- Import `getRandomColor` from `@cocalc/util/misc`
+- Generate consistent colors based on editor type (e.g., all "cm" editors get same color)
+- Pass `color={frame.color}` to Ant Design Tag component
+- Same type = same color across all frames
+
+#### 4. User-Friendly Frame Names ✅
+
+**File**: `packages/frontend/app/hotkey/use-navigation-data.ts`
+
+- Use `spec.short` as primary display name
+- Fallback order: `spec.short` → `spec.name` → `nodeType` → "Unknown"
+- Shows user-friendly names like "Python REPL", "Jupyter", etc. instead of "cm", "jupyter"
+- **Note**: Currently showing technical names; need to verify `editor_spec` is accessible via `component.editor_spec`
+
+#### 5. Dialog Enhancement ✅
+
+**File**: `packages/frontend/app/hotkey/dialog.tsx`
+
+- Added `defaultExpanded?: boolean` property to NavigationTreeNode interface
+- Updated `loadExpandedKeys()` function to:
+  - Collect all nodes with `defaultExpanded: true`
+  - Merge with stored localStorage keys
+  - Return union of both (users can still collapse)
+
+### Known Issues & Debugging
+
+#### Issue 1: Frame Names Not Showing User-Friendly Labels ⏳
+
+**Status**: Investigating
+
+**Symptom**: Frame names in navigation dialog still show "cm", "terminal", etc. instead of "Python REPL"
+
+**Expected**: Frames should show `spec.short` property with user-friendly names
+
+**Root Cause**: Need to verify `editor_spec` is accessible from `component.editor_spec`
+
+**Debug Info**: Added detailed console logging to frame action handler (when DEBUG=true):
+
+- Frame ID, project ID, editor path
+- Whether editor actions object was found
+- set_active_id call confirmation
+
+#### Issue 2: Frame Focus Not Working ⏳
+
+**Status**: Debugging
+
+**Symptom**: Clicking frame numbers or pressing 1-9 doesn't focus the frame in the editor
+
+**Expected**: Clicking a frame should call `set_active_id(frameId)` and focus changes in editor
+
+**Root Cause**: Unknown - need console logs to determine if:
+
+1. Action is being called at all
+2. Project ID/editor path are correct
+3. Editor actions object is being found
+4. `set_active_id` is being invoked
+
+**Debug Strategy**: Check browser console logs when clicking a frame:
+
+- "Frame action called: ..." - shows frame ID, project ID, editor path
+- "EditorActions: ..." - shows if actions object found
+- "Called set_active_id with: ..." - confirms method was invoked
+
+**Next Steps**: User should run with DEBUG enabled and share console output when clicking a frame number
+
+### Implementation Details
+
+**NavigationTreeNode Interface** (enhanced):
+
+```tsx
+export interface NavigationTreeNode extends TreeDataNode {
+  key: string;
+  title: React.ReactNode;
+  children?: NavigationTreeNode[];
+  defaultExpanded?: boolean; // ← New property
+  navigationData?: { ... };
+}
+```
+
+**Frame Info Structure** (extended):
+
+```tsx
+export interface FrameInfo {
+  id: string;
+  shortName: string;
+  frameName: string;
+  filePath?: string;
+  editorType?: string; // ← New: type of editor (cm, markdown, etc)
+  color?: string; // ← New: color from getRandomColor(editorType)
+}
+```
+
+**Frame Tree Structure**:
+
+```tsx
+interface FrameTreeNode {
+  type: "frame" | "split";
+  id: string;
+  direction?: "row" | "col"; // For split nodes
+  frame?: FrameInfo; // For frame nodes
+  children?: FrameTreeNode[]; // For split nodes
+}
+```
+
+**Frame Section in Tree**:
+
+```
+filename.ext                           ← Always expanded
+└── Horizontal                         ← Split node (expanded)
+    ├── Vertical                       ← Nested split node (expanded)
+    │   ├── <Tag color="blue">1</Tag> Python REPL
+    │   └── <Tag color="green">2</Tag> Jupyter
+    └── <Tag color="purple">3</Tag> Build Output
+```
+
+### Files Modified
+
+- `packages/frontend/app/hotkey/build-tree.tsx` - Frame section rendering with tree structure and colors
+- `packages/frontend/app/hotkey/use-navigation-data.ts` - Frame extraction with tree structure, colors, and debug logging
+- `packages/frontend/app/hotkey/dialog.tsx` - NavigationTreeNode interface + loadExpandedKeys logic
+
+### Benefits (Completed & Expected)
+
+✅ **Better Discoverability**: Current file always visible and expanded
+✅ **Frame Tree Visible**: Shows actual split structure (Horizontal/Vertical nodes)
+✅ **Visual Differentiation**: Colors help identify frame types at a glance
+✅ **Consistent Coloring**: Same frame type always gets same color
+✅ **User Control**: Can collapse if desired, preference persists
+✅ **Keyboard Shortcuts**: Numbers 1-9 still work to jump to frames
+
+⏳ **Clearer Labels**: User-friendly names (pending verification of editor_spec access)
+⏳ **Working Frame Focus**: Clicking frames should focus them (pending debug output)
+
+### Testing Scenarios
+
+1. **Open file with split editor** → Current file expanded, split structure visible with all frames numbered
+2. **Search for "python"** → Shows matching files, frame structure visible with colors
+3. **Press "1"** → ⏳ Should jump to first frame (debug needed)
+4. **Click frame number** → ⏳ Should focus that frame (debug needed)
+5. **Expand/collapse splits** → User action persists in localStorage
+6. **Reload page** → Current file and splits stay expanded, user's collapse state restored
+
+---
diff --git a/src/packages/frontend/account/account-page.tsx b/src/packages/frontend/account/account-page.tsx
index 82681a6b702..a609b285e1c 100644
--- a/src/packages/frontend/account/account-page.tsx
+++ b/src/packages/frontend/account/account-page.tsx
@@ -555,8 +555,14 @@ export const AccountPage: React.FC = () => {
     }
 
     return (
-      <div className="smc-vfill" style={{ flexDirection: "row" }}>
-        <div
+      <main
+        className="smc-vfill"
+        style={{ flexDirection: "row" }}
+        role="main"
+        aria-label="Account settings"
+      >
+        <nav
+          aria-label="Account settings menu"
           style={{
             background: "#00000005",
             borderRight: "1px solid rgba(5, 5, 5, 0.06)",
@@ -598,6 +604,7 @@ export const AccountPage: React.FC = () => {
               color: COLORS.GRAY_M,
             }}
             onClick={handleHideToggle}
+            aria-label={hidden ? "Expand menu" : "Collapse menu"}
             icon={
               <Icon
                 name={
@@ -608,9 +615,15 @@ export const AccountPage: React.FC = () => {
           >
             {hidden ? "" : "Hide"}
           </Button>
-        </div>
+        </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",
@@ -627,12 +640,12 @@ export const AccountPage: React.FC = () => {
             : children[active_page]}
           <Footer />
         </div>
-      </div>
+      </main>
     );
   }
 
   return (
-    <div className="smc-vfill">
+    <div className="smc-vfill" role="main" aria-label="Account page">
       {is_logged_in && !get_api_key ? (
         render_logged_in_view()
       ) : (
diff --git a/src/packages/frontend/account/account-preferences-ai.tsx b/src/packages/frontend/account/account-preferences-ai.tsx
index 9bce036e695..17939336359 100644
--- a/src/packages/frontend/account/account-preferences-ai.tsx
+++ b/src/packages/frontend/account/account-preferences-ai.tsx
@@ -12,13 +12,15 @@ export function AccountPreferencesAI() {
   const kucalc = useTypedRedux("customize", "kucalc");
 
   return (
-    <OtherSettings
-      other_settings={other_settings}
-      is_stripe_customer={
-        !!stripe_customer?.getIn(["subscriptions", "total_count"])
-      }
-      kucalc={kucalc}
-      mode="ai"
-    />
+    <div role="region" aria-label="AI settings">
+      <OtherSettings
+        other_settings={other_settings}
+        is_stripe_customer={
+          !!stripe_customer?.getIn(["subscriptions", "total_count"])
+        }
+        kucalc={kucalc}
+        mode="ai"
+      />
+    </div>
   );
 }
diff --git a/src/packages/frontend/account/account-preferences-appearance.tsx b/src/packages/frontend/account/account-preferences-appearance.tsx
index 1794ceada22..fcdffa811da 100644
--- a/src/packages/frontend/account/account-preferences-appearance.tsx
+++ b/src/packages/frontend/account/account-preferences-appearance.tsx
@@ -27,6 +27,8 @@ import {
   get_dark_mode_config,
 } from "./dark-mode";
 import { EditorSettingsColorScheme } from "./editor-settings/color-schemes";
+import { HotkeyDelayTest } from "./hotkey-delay-test";
+import { HotkeySelector } from "./hotkey-selector";
 import { I18NSelector, I18N_MESSAGE, I18N_TITLE } from "./i18n-selector";
 import { OtherSettings } from "./other-settings";
 import { TerminalSettings } from "./terminal-settings";
@@ -113,6 +115,8 @@ export function AccountPreferencesAppearance() {
     return (
       <Panel
         size="small"
+        role="region"
+        aria-label="Dark mode settings"
         header={
           <>
             <Icon unicode={DARK_MODE_ICON} /> Dark Mode
@@ -212,6 +216,8 @@ export function AccountPreferencesAppearance() {
     return (
       <Panel
         size="small"
+        role="region"
+        aria-label="User interface settings"
         header={
           <>
             <Icon name="desktop" />{" "}
@@ -237,6 +243,88 @@ export function AccountPreferencesAppearance() {
             </HelpIcon>
           </div>
         </LabeledRow>
+        <LabeledRow
+          label={
+            <>
+              <Icon name="flash" /> Quick Navigation Hotkey
+            </>
+          }
+        >
+          <HotkeySelector
+            value={other_settings.get("quick_nav_hotkey") ?? "shift+shift"}
+            onChange={(value) => on_change("quick_nav_hotkey", value)}
+            style={{ width: 200 }}
+          />
+        </LabeledRow>
+        {(other_settings.get("quick_nav_hotkey") ?? "shift+shift") ===
+          "shift+shift" && (
+          <LabeledRow
+            label={
+              <>
+                <Icon name="clock" /> Hotkey Delay (milliseconds)
+              </>
+            }
+          >
+            <div style={{ display: "flex", gap: 16, alignItems: "stretch" }}>
+              <div
+                style={{
+                  flex: "1 1 auto",
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <Slider
+                  min={100}
+                  max={800}
+                  step={100}
+                  value={other_settings.get("quick_nav_hotkey_delay") ?? 300}
+                  onChange={(value) =>
+                    on_change("quick_nav_hotkey_delay", value)
+                  }
+                  style={{ flex: 1 }}
+                  marks={Object.fromEntries(
+                    Array.from({ length: 8 }, (_, i) => (i + 1) * 100).map(
+                      (ms) => [ms, `${ms}ms`],
+                    ),
+                  )}
+                />
+                <span
+                  style={{
+                    minWidth: 60,
+                    textAlign: "right",
+                    fontWeight: 500,
+                    color: COLORS.GRAY_M,
+                    marginLeft: 12,
+                  }}
+                >
+                  {other_settings.get("quick_nav_hotkey_delay") ?? 300}ms
+                </span>
+              </div>
+              <div
+                style={{
+                  flex: "0 1 auto",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 8,
+                }}
+              >
+                <HotkeyDelayTest
+                  delayMs={other_settings.get("quick_nav_hotkey_delay") ?? 300}
+                />
+              </div>
+            </div>
+          </LabeledRow>
+        )}
+        <Switch
+          checked={!!other_settings.get("auto_focus")}
+          onChange={(e) => on_change("auto_focus", e.target.checked)}
+        >
+          <FormattedMessage
+            id="account.other-settings.auto_focus"
+            defaultMessage={`<strong>Auto Focus Text Input:</strong>
+            automatically focus text input fields when they appear (e.g., file explorer, projects, ...)`}
+          />
+        </Switch>
         <Switch
           checked={!!other_settings.get("hide_file_popovers")}
           onChange={(e) => on_change("hide_file_popovers", e.target.checked)}
@@ -292,7 +380,7 @@ export function AccountPreferencesAppearance() {
   }
 
   return (
-    <>
+    <div role="region" aria-label="Appearance settings">
       {renderUserInterfacePanel()}
       <OtherSettings
         other_settings={other_settings}
@@ -311,6 +399,6 @@ export function AccountPreferencesAppearance() {
         font_size={font_size}
       />
       <TerminalSettings />
-    </>
+    </div>
   );
 }
diff --git a/src/packages/frontend/account/account-preferences-communication.tsx b/src/packages/frontend/account/account-preferences-communication.tsx
index adbdb51c4b0..2ee25614010 100644
--- a/src/packages/frontend/account/account-preferences-communication.tsx
+++ b/src/packages/frontend/account/account-preferences-communication.tsx
@@ -114,18 +114,22 @@ export function AccountPreferencesCommunication(): React.JSX.Element {
   }
 
   return (
-    <Panel
-      size="small"
-      header={
-        <>
-          <Icon name={COMMUNICATION_ICON_NAME} />{" "}
-          {intl.formatMessage(labels.communication)}
-        </>
-      }
-    >
-      {render_global_banner()}
-      {render_no_free_warnings()}
-      {render_no_email_new_messages()}
-    </Panel>
+    <div role="region" aria-label="Communication settings">
+      <Panel
+        size="small"
+        role="region"
+        aria-label="Notification settings"
+        header={
+          <>
+            <Icon name={COMMUNICATION_ICON_NAME} />{" "}
+            {intl.formatMessage(labels.communication)}
+          </>
+        }
+      >
+        {render_global_banner()}
+        {render_no_free_warnings()}
+        {render_no_email_new_messages()}
+      </Panel>
+    </div>
   );
 }
diff --git a/src/packages/frontend/account/account-preferences-config.ts b/src/packages/frontend/account/account-preferences-config.ts
new file mode 100644
index 00000000000..343cda435cc
--- /dev/null
+++ b/src/packages/frontend/account/account-preferences-config.ts
@@ -0,0 +1,158 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+/**
+ * Shared configuration for account menu items and preferences sub-tabs
+ * Used by both account-page.tsx and hotkey quick navigation
+ */
+
+export interface AccountMenuItem {
+  id: string; // Menu item ID (e.g., "subscriptions", "preferences-appearance")
+  key: string; // Tree node key (e.g., "account-subscriptions")
+  label: string; // Display name
+  icon?: string; // Icon name (or undefined for special components like AIAvatar)
+  useAIAvatar?: boolean; // Special case for AI preferences
+  isPreferencesSubTab?: boolean; // True if this is a sub-tab under Preferences
+}
+
+/**
+ * Preferences sub-tabs (nested under "Preferences")
+ */
+export const PREFERENCES_SUB_TABS: AccountMenuItem[] = [
+  {
+    id: "preferences-appearance",
+    key: "account-preferences-appearance",
+    label: "Appearance",
+    icon: "eye",
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-editor",
+    key: "account-preferences-editor",
+    label: "Editor",
+    icon: "edit",
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-keyboard",
+    key: "account-preferences-keyboard",
+    label: "Keyboard",
+    icon: "keyboard",
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-ai",
+    key: "account-preferences-ai",
+    label: "AI",
+    useAIAvatar: true,
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-communication",
+    key: "account-preferences-communication",
+    label: "Communication",
+    icon: "comments",
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-keys",
+    key: "account-preferences-keys",
+    label: "SSH and API Keys",
+    icon: "key",
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-other",
+    key: "account-preferences-other",
+    label: "Other",
+    icon: "sliders",
+    isPreferencesSubTab: true,
+  },
+];
+
+/**
+ * Main account menu items (top-level, excluding preferences which are nested)
+ */
+export const ACCOUNT_MAIN_MENU_ITEMS: AccountMenuItem[] = [
+  {
+    id: "index",
+    key: "account-index",
+    label: "Settings",
+    icon: "settings",
+  },
+  {
+    id: "profile",
+    key: "account-profile",
+    label: "Profile",
+    icon: "user",
+  },
+  // Preferences is handled separately as it has sub-items
+  {
+    id: "subscriptions",
+    key: "account-subscriptions",
+    label: "Subscriptions",
+    icon: "calendar",
+  },
+  {
+    id: "licenses",
+    key: "account-licenses",
+    label: "Licenses",
+    icon: "key",
+  },
+  {
+    id: "payg",
+    key: "account-payg",
+    label: "Pay as you Go",
+    icon: "line-chart",
+  },
+  {
+    id: "upgrades",
+    key: "account-upgrades",
+    label: "Upgrades",
+    icon: "arrow-circle-up",
+  },
+  {
+    id: "purchases",
+    key: "account-purchases",
+    label: "Purchases",
+    icon: "money-check",
+  },
+  {
+    id: "payments",
+    key: "account-payments",
+    label: "Payments",
+    icon: "credit-card",
+  },
+  {
+    id: "payment-methods",
+    key: "account-payment-methods",
+    label: "Payment Methods",
+    icon: "credit-card",
+  },
+  {
+    id: "statements",
+    key: "account-statements",
+    label: "Statements",
+    icon: "calendar-week",
+  },
+  {
+    id: "cloud-filesystems",
+    key: "account-cloud-filesystems",
+    label: "Cloud Filesystems",
+    icon: "cloud",
+  },
+  {
+    id: "public-paths",
+    key: "account-public-paths",
+    label: "Public Paths",
+    icon: "share-square",
+  },
+  {
+    id: "support",
+    key: "account-support",
+    label: "Support",
+    icon: "question-circle",
+  },
+];
diff --git a/src/packages/frontend/account/account-preferences-editor.tsx b/src/packages/frontend/account/account-preferences-editor.tsx
index 82f0189e77c..169bb7ea70e 100644
--- a/src/packages/frontend/account/account-preferences-editor.tsx
+++ b/src/packages/frontend/account/account-preferences-editor.tsx
@@ -11,5 +11,9 @@ import { EditorSettings } from "./editor-settings/editor-settings";
 export const EDITOR_ICON_NAME: IconName = "edit";
 
 export function AccountPreferencesEditor() {
-  return <EditorSettings />;
+  return (
+    <div role="region" aria-label="Editor settings">
+      <EditorSettings />
+    </div>
+  );
 }
diff --git a/src/packages/frontend/account/account-preferences-keyboard.tsx b/src/packages/frontend/account/account-preferences-keyboard.tsx
index 93e003b9301..9f1d46fe144 100644
--- a/src/packages/frontend/account/account-preferences-keyboard.tsx
+++ b/src/packages/frontend/account/account-preferences-keyboard.tsx
@@ -11,5 +11,9 @@ import { KeyboardSettings } from "./keyboard-settings";
 export const KEYBOARD_ICON_NAME: IconName = "keyboard";
 
 export function AccountPreferencesKeyboard() {
-  return <KeyboardSettings />;
+  return (
+    <div role="region" aria-label="Keyboard settings">
+      <KeyboardSettings />
+    </div>
+  );
 }
diff --git a/src/packages/frontend/account/account-preferences-other.tsx b/src/packages/frontend/account/account-preferences-other.tsx
index 74cbfdd57f4..6e1453d90a4 100644
--- a/src/packages/frontend/account/account-preferences-other.tsx
+++ b/src/packages/frontend/account/account-preferences-other.tsx
@@ -15,13 +15,15 @@ export function AccountPreferencesOther() {
   const kucalc = useTypedRedux("customize", "kucalc");
 
   return (
-    <OtherSettings
-      other_settings={other_settings}
-      is_stripe_customer={
-        !!stripe_customer?.getIn(["subscriptions", "total_count"])
-      }
-      kucalc={kucalc}
-      mode="other"
-    />
+    <div role="region" aria-label="Other settings">
+      <OtherSettings
+        other_settings={other_settings}
+        is_stripe_customer={
+          !!stripe_customer?.getIn(["subscriptions", "total_count"])
+        }
+        kucalc={kucalc}
+        mode="other"
+      />
+    </div>
   );
 }
diff --git a/src/packages/frontend/account/account-preferences-profile.tsx b/src/packages/frontend/account/account-preferences-profile.tsx
index 7e7493699ae..059fb4b5091 100644
--- a/src/packages/frontend/account/account-preferences-profile.tsx
+++ b/src/packages/frontend/account/account-preferences-profile.tsx
@@ -36,7 +36,7 @@ export function AccountPreferencesProfile() {
   const verify_emails = useTypedRedux("customize", "verify_emails");
 
   return (
-    <>
+    <div role="region" aria-label="Profile settings">
       <AccountSettings
         account_id={account_id}
         first_name={first_name}
@@ -55,6 +55,6 @@ export function AccountPreferencesProfile() {
         unlisted={unlisted}
       />
       <ProfileSettings email_address={email_address} />
-    </>
+    </div>
   );
 }
diff --git a/src/packages/frontend/account/account-preferences-security.tsx b/src/packages/frontend/account/account-preferences-security.tsx
index aa93d74e9f3..4520bc9a674 100644
--- a/src/packages/frontend/account/account-preferences-security.tsx
+++ b/src/packages/frontend/account/account-preferences-security.tsx
@@ -20,9 +20,9 @@ export function AccountPreferencesSecurity() {
   const ssh_gateway = useTypedRedux("customize", "ssh_gateway");
 
   return (
-    <>
+    <div role="region" aria-label="API & SSH Keys">
       {(ssh_gateway || kucalc === KUCALC_COCALC_COM) && <GlobalSSHKeys />}
       {!is_anonymous && <ApiKeys />}
-    </>
+    </div>
   );
 }
diff --git a/src/packages/frontend/account/account-preferences.tsx b/src/packages/frontend/account/account-preferences.tsx
index 8060579178b..47e2fd13474 100644
--- a/src/packages/frontend/account/account-preferences.tsx
+++ b/src/packages/frontend/account/account-preferences.tsx
@@ -30,7 +30,7 @@ export const AccountPreferences: React.FC = () => {
   const verify_emails = useTypedRedux("customize", "verify_emails");
 
   return (
-    <div>
+    <div role="region" aria-label="Account preferences">
       <TableError />
       <AccountSettings
         account_id={account_id}
diff --git a/src/packages/frontend/account/editor-settings/checkboxes.tsx b/src/packages/frontend/account/editor-settings/checkboxes.tsx
index 1e835da4213..dbe63f64622 100644
--- a/src/packages/frontend/account/editor-settings/checkboxes.tsx
+++ b/src/packages/frontend/account/editor-settings/checkboxes.tsx
@@ -223,9 +223,12 @@ export function EditorSettingsCheckboxes(props: Props) {
     icon: IconName,
     settingNames: readonly CheckboxKey[],
   ) {
+    // Convert header to lowercase aria-label
     return (
       <Panel
         size="small"
+        role="region"
+        aria-label={header}
         header={
           <>
             <Icon name={icon} /> {header}
diff --git a/src/packages/frontend/account/editor-settings/color-schemes.tsx b/src/packages/frontend/account/editor-settings/color-schemes.tsx
index 1e713cf6e88..c8b3e92b762 100644
--- a/src/packages/frontend/account/editor-settings/color-schemes.tsx
+++ b/src/packages/frontend/account/editor-settings/color-schemes.tsx
@@ -38,6 +38,8 @@ export function EditorSettingsColorScheme(props: Props): React.JSX.Element {
   return (
     <Panel
       size={props.size}
+      role="region"
+      aria-label="Editor color scheme settings"
       header={
         <>
           <Icon name="file-alt" /> {title}
diff --git a/src/packages/frontend/account/editor-settings/editor-settings.tsx b/src/packages/frontend/account/editor-settings/editor-settings.tsx
index d653f08b76c..7e9bdbdf792 100644
--- a/src/packages/frontend/account/editor-settings/editor-settings.tsx
+++ b/src/packages/frontend/account/editor-settings/editor-settings.tsx
@@ -76,6 +76,8 @@ export function EditorSettings({}) {
     <>
       <Panel
         size="small"
+        role="region"
+        aria-label="Basic editor settings"
         header={
           <>
             <Icon name="font" />{" "}
@@ -103,6 +105,8 @@ export function EditorSettings({}) {
       />
       <Panel
         size="small"
+        role="region"
+        aria-label="Keyboard settings"
         header={
           <>
             <Icon name="keyboard" />{" "}
diff --git a/src/packages/frontend/account/hotkey-delay-test.tsx b/src/packages/frontend/account/hotkey-delay-test.tsx
new file mode 100644
index 00000000000..66ed86c9f9b
--- /dev/null
+++ b/src/packages/frontend/account/hotkey-delay-test.tsx
@@ -0,0 +1,162 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+import { Button } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import { COLORS } from "@cocalc/util/theme";
+import { useAppContext } from "@cocalc/frontend/app/context";
+
+interface HotkeyDelayTestProps {
+  delayMs: number;
+}
+
+/**
+ * Test component for double-Shift hotkey detection
+ *
+ * Allows users to verify that their hotkey delay setting works correctly.
+ * When focused, it listens to Shift presses and indicates when a double-Shift
+ * is detected within the configured delay.
+ */
+export const HotkeyDelayTest: React.FC<HotkeyDelayTestProps> = ({
+  delayMs,
+}) => {
+  const { setBlockShiftShiftHotkey } = useAppContext();
+  const [isActive, setIsActive] = useState(false);
+  const [testResult, setTestResult] = useState<
+    "waiting" | "detected" | "failed"
+  >("waiting");
+  const lastShiftTimeRef = useRef<number>(0);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    // Set block flag when test becomes active, unblock when inactive
+    setBlockShiftShiftHotkey?.(isActive);
+
+    if (!isActive) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only listen for Shift key
+      if (e.key !== "Shift") {
+        return;
+      }
+
+      const now = Date.now();
+      const timeSinceLastShift = now - lastShiftTimeRef.current;
+
+      // Check if this Shift is within delayMs of the last one
+      if (timeSinceLastShift <= delayMs && timeSinceLastShift > 0) {
+        // Double Shift detected! Prevent it from bubbling to the global detector
+        e.preventDefault();
+        e.stopPropagation();
+
+        setTestResult("detected");
+        lastShiftTimeRef.current = 0;
+
+        // Reset after 1 second to show success state
+        const timer = setTimeout(() => {
+          setTestResult("waiting");
+        }, 1000);
+
+        return () => clearTimeout(timer);
+      }
+
+      // Record this Shift press
+      lastShiftTimeRef.current = now;
+
+      // Reset counter after delayMs * 2
+      const resetTimer = setTimeout(() => {
+        lastShiftTimeRef.current = 0;
+      }, delayMs * 2);
+
+      return () => clearTimeout(resetTimer);
+    };
+
+    // Use capture phase to catch Shift key early
+    window.addEventListener("keydown", handleKeyDown, true);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+      // Ensure we unblock when component unmounts or isActive becomes false
+      setBlockShiftShiftHotkey?.(false);
+    };
+  }, [isActive, delayMs, setBlockShiftShiftHotkey]);
+
+  const getButtonStyle = (): React.CSSProperties => {
+    const baseStyle: React.CSSProperties = {
+      fontWeight: 500,
+      minWidth: 100,
+    };
+
+    switch (testResult) {
+      case "waiting":
+        return {
+          ...baseStyle,
+          backgroundColor: isActive ? COLORS.ANTD_BLUE : COLORS.GRAY_LL,
+          color: isActive ? "white" : COLORS.GRAY_M,
+          borderColor: isActive ? COLORS.ANTD_BLUE : COLORS.GRAY_L,
+        };
+      case "detected":
+        return {
+          ...baseStyle,
+          backgroundColor: COLORS.ANTD_SUCCESS_GREEN,
+          color: "white",
+          borderColor: COLORS.ANTD_SUCCESS_GREEN,
+        };
+      case "failed":
+        return {
+          ...baseStyle,
+          backgroundColor: COLORS.ANTD_ERROR_RED,
+          color: "white",
+          borderColor: COLORS.ANTD_ERROR_RED,
+        };
+    }
+  };
+
+  const getButtonLabel = (): string => {
+    if (!isActive) {
+      return "Test Hotkey";
+    }
+    switch (testResult) {
+      case "waiting":
+        return "Press Shift Twice";
+      case "detected":
+        return "✓ Detected!";
+      case "failed":
+        return "✗ Try Again";
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        alignItems: "flex-start",
+      }}
+    >
+      <Button
+        ref={buttonRef}
+        style={getButtonStyle()}
+        onClick={() => {
+          setIsActive(!isActive);
+          setTestResult("waiting");
+          lastShiftTimeRef.current = 0;
+        }}
+      >
+        {getButtonLabel()}
+      </Button>
+      <span style={{ color: COLORS.GRAY_M, fontSize: 12 }}>
+        {isActive
+          ? `Press Shift twice within ${delayMs}ms`
+          : "Click to test hotkey detection"}
+      </span>
+    </div>
+  );
+};
+
+export default HotkeyDelayTest;
diff --git a/src/packages/frontend/account/hotkey-selector.tsx b/src/packages/frontend/account/hotkey-selector.tsx
new file mode 100644
index 00000000000..62ed2e18f9b
--- /dev/null
+++ b/src/packages/frontend/account/hotkey-selector.tsx
@@ -0,0 +1,61 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+import { Select, SelectProps } from "antd";
+import { IS_MACOS } from "@cocalc/frontend/feature";
+
+export type HotkeyOption =
+  | "shift+shift"
+  | "alt+shift+h"
+  | "alt+shift+space"
+  | "disabled";
+
+interface HotkeySelectorProps
+  extends Omit<SelectProps, "options" | "onChange"> {
+  value?: HotkeyOption;
+  onChange?: (hotkey: HotkeyOption) => void;
+}
+
+/**
+ * A selector for choosing the global hotkey to open quick navigation dialog
+ */
+export function HotkeySelector({
+  value,
+  onChange,
+  ...props
+}: HotkeySelectorProps) {
+  const altShiftH = IS_MACOS ? "Cmd+Shift+H" : "Alt+Shift+H";
+  const altShiftSpace = IS_MACOS ? "Cmd+Shift+Space" : "Alt+Shift+Space";
+
+  const options = [
+    {
+      value: "shift+shift" as HotkeyOption,
+      label: "Shift, Shift (double tap)",
+    },
+    {
+      value: "alt+shift+h" as HotkeyOption,
+      label: `${altShiftH}`,
+    },
+    {
+      value: "alt+shift+space" as HotkeyOption,
+      label: `${altShiftSpace}`,
+    },
+    {
+      value: "disabled" as HotkeyOption,
+      label: "<disabled>",
+    },
+  ];
+
+  return (
+    <Select
+      value={value ?? "shift+shift"}
+      onChange={onChange}
+      options={options}
+      placeholder="Select hotkey..."
+      popupMatchSelectWidth={false}
+      {...props}
+    />
+  );
+}
diff --git a/src/packages/frontend/account/index.ts b/src/packages/frontend/account/index.ts
index a7ebd70c118..4563ce88115 100644
--- a/src/packages/frontend/account/index.ts
+++ b/src/packages/frontend/account/index.ts
@@ -11,3 +11,5 @@ export { init } from "./init";
 export { show_announce_start, show_announce_end } from "./dates";
 
 export { default_filename } from "./default-file-name-generator";
+
+export { useAutoFocusPreference } from "./use-auto-focus-preference";
diff --git a/src/packages/frontend/account/keyboard-settings.tsx b/src/packages/frontend/account/keyboard-settings.tsx
index 7f4da3fddc8..0c17842ca87 100644
--- a/src/packages/frontend/account/keyboard-settings.tsx
+++ b/src/packages/frontend/account/keyboard-settings.tsx
@@ -85,6 +85,8 @@ export const KeyboardSettings: React.FC = () => {
 
   return (
     <Panel
+      role="region"
+      aria-label="Keyboard shortcuts"
       header={
         <>
           <Icon name={KEYBOARD_ICON_NAME} />{" "}
diff --git a/src/packages/frontend/account/other-settings.tsx b/src/packages/frontend/account/other-settings.tsx
index 49f5d27681e..63ab0554ddf 100644
--- a/src/packages/frontend/account/other-settings.tsx
+++ b/src/packages/frontend/account/other-settings.tsx
@@ -377,6 +377,8 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
     if (!anyLLMenabled) return <></>;
     return (
       <Panel
+        role="region"
+        aria-label="AI settings"
         header={
           <>
             <AIAvatar size={18} />{" "}
@@ -409,6 +411,8 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
     return (
       <Panel
         size="small"
+        role="region"
+        aria-label="Theme settings"
         header={
           <>
             <Icon name={THEME_ICON_NAME} /> {intl.formatMessage(labels.theme)}
@@ -425,6 +429,8 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
       <>
         <Panel
           size="small"
+          role="region"
+          aria-label="Browser settings"
           header={
             <>
               <Icon name="desktop" /> {intl.formatMessage(labels.browser)}
@@ -437,6 +443,8 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
 
         <Panel
           size="small"
+          role="region"
+          aria-label="File explorer settings"
           header={
             <>
               <Icon name="folder-open" />{" "}
@@ -453,6 +461,8 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
         {/* Projects */}
         <Panel
           size="small"
+          role="region"
+          aria-label="Projects settings"
           header={
             <>
               <Icon name="edit" /> {intl.formatMessage(labels.projects)}
diff --git a/src/packages/frontend/account/profile-settings.tsx b/src/packages/frontend/account/profile-settings.tsx
index a807479303f..2d0f389a6f2 100644
--- a/src/packages/frontend/account/profile-settings.tsx
+++ b/src/packages/frontend/account/profile-settings.tsx
@@ -49,7 +49,7 @@ export function ProfileSettings({ email_address }: Props) {
   }
 
   return (
-    <Panel header={render_header()}>
+    <Panel header={render_header()} role="region" aria-label="Avatar settings">
       <LabeledRow label={intl.formatMessage(labels.color)}>
         <ColorPicker
           color={profile?.get("color")}
diff --git a/src/packages/frontend/account/settings/account-settings.tsx b/src/packages/frontend/account/settings/account-settings.tsx
index 480e7cd6b66..741fe673b6e 100644
--- a/src/packages/frontend/account/settings/account-settings.tsx
+++ b/src/packages/frontend/account/settings/account-settings.tsx
@@ -475,7 +475,8 @@ export function AccountSettings(props: Readonly<Props>) {
     } else {
       return (
         <>
-          <Icon name={ACCOUNT_PROFILE_ICON_NAME} /> {intl.formatMessage(labels.account)}
+          <Icon name={ACCOUNT_PROFILE_ICON_NAME} />{" "}
+          {intl.formatMessage(labels.account)}
         </>
       );
     }
@@ -620,7 +621,7 @@ will no longer work (automatic redirects are not implemented), so change with ca
   }
 
   return (
-    <Panel header={render_header()}>
+    <Panel header={render_header()} role="region" aria-label="Account settings">
       {render_anonymous_warning()}
       {render_terms_of_service()}
       {render_name()}
diff --git a/src/packages/frontend/account/settings/api-keys.tsx b/src/packages/frontend/account/settings/api-keys.tsx
index 508d14cedfa..0461bcbc95c 100644
--- a/src/packages/frontend/account/settings/api-keys.tsx
+++ b/src/packages/frontend/account/settings/api-keys.tsx
@@ -20,7 +20,7 @@ export default function ApiKeys() {
   });
 
   return (
-    <SettingBox title={title} icon={"api"}>
+    <SettingBox title={title} icon={"api"} role="region" aria-label="API keys">
       <ApiKeysTables manage={manage} />
       <Paragraph>
         <FormattedMessage
diff --git a/src/packages/frontend/account/ssh-keys/global-ssh-keys.tsx b/src/packages/frontend/account/ssh-keys/global-ssh-keys.tsx
index bf2e14d0523..f096a8f6909 100644
--- a/src/packages/frontend/account/ssh-keys/global-ssh-keys.tsx
+++ b/src/packages/frontend/account/ssh-keys/global-ssh-keys.tsx
@@ -15,7 +15,7 @@ export default function GlobalSSHKeys() {
   const ssh_keys = useRedux("account", "ssh_keys");
 
   return (
-    <div style={{ marginTop: "1em" }}>
+    <div role="region" aria-label="SSH keys" style={{ marginTop: "1em" }}>
       <SSHKeyList
         help={
           <Paragraph>
diff --git a/src/packages/frontend/account/terminal-settings.tsx b/src/packages/frontend/account/terminal-settings.tsx
index 3f10be89216..c96c6d55734 100644
--- a/src/packages/frontend/account/terminal-settings.tsx
+++ b/src/packages/frontend/account/terminal-settings.tsx
@@ -45,6 +45,8 @@ export function TerminalSettings() {
   return (
     <Panel
       size="small"
+      role="region"
+      aria-label="Terminal settings"
       header={
         <>
           <Icon name="terminal" /> Terminal Settings
diff --git a/src/packages/frontend/account/tours.tsx b/src/packages/frontend/account/tours.tsx
index 8de96cc5d19..330557e093b 100644
--- a/src/packages/frontend/account/tours.tsx
+++ b/src/packages/frontend/account/tours.tsx
@@ -41,6 +41,8 @@ export default function Tours() {
   return (
     <Panel
       size={"small"}
+      role="region"
+      aria-label="Completed tours"
       header={
         <span>
           <Icon name="map" /> Completed Tours
diff --git a/src/packages/frontend/account/use-auto-focus-preference.ts b/src/packages/frontend/account/use-auto-focus-preference.ts
new file mode 100644
index 00000000000..4e7e33829ba
--- /dev/null
+++ b/src/packages/frontend/account/use-auto-focus-preference.ts
@@ -0,0 +1,15 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+import { useTypedRedux } from "@cocalc/frontend/app-framework";
+
+/**
+ * Hook to get the user's auto focus preference for text input fields.
+ * Returns false by default (auto focus disabled).
+ */
+export function useAutoFocusPreference(): boolean {
+  const other_settings = useTypedRedux("account", "other_settings");
+  return other_settings?.get("auto_focus") ?? false;
+}
diff --git a/src/packages/frontend/admin/site-settings/render-row.tsx b/src/packages/frontend/admin/site-settings/render-row.tsx
index f9d87b4b09f..a7c6ea4d50f 100644
--- a/src/packages/frontend/admin/site-settings/render-row.tsx
+++ b/src/packages/frontend/admin/site-settings/render-row.tsx
@@ -4,7 +4,7 @@
  */
 
 import { Alert, Button, Popover } from "antd";
-import { CSSProperties } from "react";
+
 import { Icon, LabeledRow, Markdown } from "@cocalc/frontend/components";
 import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
 import { Config, RowType, Tag } from "@cocalc/util/db-schema/site-defaults";
@@ -12,6 +12,7 @@ import { COLORS } from "@cocalc/util/theme";
 import { Data, IsReadonly } from "./types";
 import { RowEntry } from "./row-entry";
 import { RefreshImagesButton } from "@cocalc/frontend/compute/select-version";
+import { CSS } from "@cocalc/frontend/app-framework";
 
 interface RenderRowProps {
   name: string;
@@ -99,7 +100,7 @@ export function RenderRow({
 
   const hint = <RowHint conf={conf} rawValue={rawValue} />;
 
-  let style = { marginTop: "15px", paddingLeft: "10px" } as CSSProperties;
+  let style: CSS = { marginTop: "15px", paddingLeft: "10px" };
   // indent optional fields
   if (typeof conf.show == "function" && rowType == "setting") {
     style = {
@@ -107,7 +108,7 @@ export function RenderRow({
       borderLeft: `2px solid ${COLORS.GRAY}`,
       marginLeft: "0px",
       marginTop: "0px",
-    } as CSSProperties;
+    };
   }
 
   function renderRowExtra() {
diff --git a/src/packages/frontend/admin/site-settings/row-entry-inner.tsx b/src/packages/frontend/admin/site-settings/row-entry-inner.tsx
index 83c9ad8e4d2..5de1011aa32 100644
--- a/src/packages/frontend/admin/site-settings/row-entry-inner.tsx
+++ b/src/packages/frontend/admin/site-settings/row-entry-inner.tsx
@@ -156,11 +156,11 @@ export function RowEntryInner({
       }
     } else {
       if (multiline != null) {
-        const style = {
+        const style: CSSProperties = {
           ...rowEntryStyle(value, valid),
           fontFamily: "monospace",
           fontSize: "80%",
-        } as CSSProperties;
+        } as const;
         return (
           <Input.TextArea
             autoComplete="off"
diff --git a/src/packages/frontend/antd-bootstrap.tsx b/src/packages/frontend/antd-bootstrap.tsx
index 1bf7e016748..6e6181ccfea 100644
--- a/src/packages/frontend/antd-bootstrap.tsx
+++ b/src/packages/frontend/antd-bootstrap.tsx
@@ -86,7 +86,7 @@ function parse_bsStyle(props: {
   let type =
     props.bsStyle == null
       ? "default"
-      : BS_STYLE_TO_TYPE[props.bsStyle] ?? "default";
+      : (BS_STYLE_TO_TYPE[props.bsStyle] ?? "default");
 
   let style: React.CSSProperties | undefined = undefined;
   // antd has no analogue of "success" & "warning", it's not clear to me what
@@ -384,6 +384,9 @@ interface TabsProps {
   tabPosition?: "left" | "top" | "right" | "bottom";
   size?: "small";
   items: AntdTabItem[]; // This is mandatory: Tabs.TabPane (was in "Tab") is deprecated.
+  // ARIA attributes for accessibility
+  role?: string;
+  "aria-label"?: string;
 }
 
 export function Tabs(props: Readonly<TabsProps>) {
@@ -397,6 +400,8 @@ export function Tabs(props: Readonly<TabsProps>) {
       tabPosition={props.tabPosition}
       size={props.size}
       items={props.items}
+      role={props.role}
+      aria-label={props["aria-label"]}
     />
   );
 }
@@ -495,6 +500,8 @@ export function Panel(props: {
   children?: any;
   onClick?;
   size?: "small";
+  role?: string;
+  "aria-label"?: string;
 }) {
   const style: CSS = { ...{ marginBottom: "20px" }, ...props.style };
 
@@ -510,6 +517,8 @@ export function Panel(props: {
       styles={styles}
       onClick={props.onClick}
       size={props.size}
+      role={props.role}
+      aria-label={props["aria-label"]}
     >
       {props.children}
     </AntdCard>
diff --git a/src/packages/frontend/app/active-content.tsx b/src/packages/frontend/app/active-content.tsx
index 69641c58a76..f078b0ffc99 100644
--- a/src/packages/frontend/app/active-content.tsx
+++ b/src/packages/frontend/app/active-content.tsx
@@ -54,6 +54,7 @@ export const ActiveContent: React.FC = React.memo(() => {
   }, [is_logged_in, notSignedIn]);
 
   const v: React.JSX.Element[] = [];
+
   open_projects?.forEach((project_id: string) => {
     const is_active = project_id === active_top_tab;
     const x = <ProjectPage project_id={project_id} is_active={is_active} />;
@@ -64,7 +65,7 @@ export const ActiveContent: React.FC = React.memo(() => {
     v.push(
       <div key={project_id} className={cls}>
         {x}
-      </div>
+      </div>,
     );
   });
 
@@ -100,7 +101,7 @@ export const ActiveContent: React.FC = React.memo(() => {
             </A>
             .
           </Alert>
-        </div>
+        </div>,
       );
     }
   }
diff --git a/src/packages/frontend/app/aria.tsx b/src/packages/frontend/app/aria.tsx
new file mode 100644
index 00000000000..bda33111825
--- /dev/null
+++ b/src/packages/frontend/app/aria.tsx
@@ -0,0 +1,71 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details.
+ */
+
+/**
+ * ARIA Keyboard Activation Handler
+ *
+ * This module provides utilities for making custom interactive elements
+ * (divs, spans, etc. with role="button" or role="tab") fully accessible
+ * to keyboard users.
+ *
+ * Why this is needed:
+ * - Native HTML <button> elements work with Enter and Space keys automatically
+ * - When using <div role="button"> (common with styled frameworks), keyboard
+ *   support must be manually implemented
+ * - This handler provides the standard keyboard behavior expected by assistive
+ *   technology users and keyboard navigators
+ *
+ * Usage:
+ *   <div
+ *     role="button"
+ *     tabIndex={0}
+ *     onClick={handleClick}
+ *     onKeyDown={(e) => ariaKeyDown(e, handleClick)}
+ *   >
+ *     Click me or press Enter/Space
+ *   </div>
+ *
+ * Benefits:
+ * - Consistent keyboard behavior across custom interactive components
+ * - Works with Enter key (standard for buttons) and Space (acceptable alternative)
+ * - Prevents default browser behavior (e.g., page scroll on Space)
+ * - Single source of truth for this common accessibility pattern
+ *
+ * @param handler - The click handler to invoke (typically your onClick function)
+ * @param stopPropagation - Whether to prevent event bubbling (default: true)
+ * @returns A keyboard event handler function
+ *
+ * @example
+ * // In your component:
+ * <div
+ *   role="button"
+ *   tabIndex={0}
+ *   onClick={handleDelete}
+ *   onKeyDown={ariaKeyDown(handleDelete)}
+ * >
+ *   Delete
+ * </div>
+ */
+export function ariaKeyDown(
+  handler: (e?: React.KeyboardEvent | React.MouseEvent) => void,
+  stopPropagation: boolean = true,
+): (e: React.KeyboardEvent) => void {
+  return (e: React.KeyboardEvent) => {
+    // Activate on Enter (standard button behavior) or Space (accessible alternative)
+    if (e.key === "Enter" || e.key === " ") {
+      // Prevent default browser behavior:
+      // - Enter: prevents form submission or other default actions
+      // - Space: prevents page scroll
+      e.preventDefault();
+      // Stop event bubbling to parent elements (default: true)
+      // This prevents parent handlers from also triggering
+      if (stopPropagation) {
+        e.stopPropagation();
+      }
+      // Call the handler (usually onClick)
+      handler(e);
+    }
+  };
+}
diff --git a/src/packages/frontend/app/connection-indicator.tsx b/src/packages/frontend/app/connection-indicator.tsx
index 4a7fb96cfad..ca445b19713 100644
--- a/src/packages/frontend/app/connection-indicator.tsx
+++ b/src/packages/frontend/app/connection-indicator.tsx
@@ -15,6 +15,7 @@ import { Icon } from "@cocalc/frontend/components";
 import { labels } from "@cocalc/frontend/i18n";
 import track from "@cocalc/frontend/user-tracking";
 import { COLORS } from "@cocalc/util/theme";
+import { ariaKeyDown } from "./aria";
 import {
   FONT_SIZE_ICONS_NORMAL,
   PageStyle,
@@ -68,6 +69,19 @@ export const ConnectionIndicator: React.FC<Props> = React.memo(
         : {}),
     } as const;
 
+    function getConnectionLabel() {
+      switch (connection_status) {
+        case "connected":
+          return intl.formatMessage(labels.connected);
+        case "connecting":
+          return intl.formatMessage(labels.connecting);
+        case "disconnected":
+          return intl.formatMessage(labels.disconnected);
+        default:
+          return "Connection status unknown";
+      }
+    }
+
     function render_connection_status() {
       if (connection_status === "connected") {
         return (
@@ -103,12 +117,17 @@ export const ConnectionIndicator: React.FC<Props> = React.memo(
     return (
       <div
         className={TOP_BAR_ELEMENT_CLASS}
+        role="status"
+        aria-label={getConnectionLabel()}
+        aria-live="polite"
+        aria-busy={connection_status === "connecting"}
         style={outer_style}
         onClick={connection_click}
+        onKeyDown={ariaKeyDown(connection_click)}
+        tabIndex={0}
       >
         {render_connection_status()}
       </div>
     );
   },
 );
-
diff --git a/src/packages/frontend/app/context.tsx b/src/packages/frontend/app/context.tsx
index 6dfe63670a2..b7cf1f9b4d8 100644
--- a/src/packages/frontend/app/context.tsx
+++ b/src/packages/frontend/app/context.tsx
@@ -26,6 +26,9 @@ export function useAppContextProvider(): AppState {
 
   const [narrow, setNarrow] = useState<boolean>(isNarrow());
 
+  const [blockShiftShiftHotkey, setBlockShiftShiftHotkey] =
+    useState<boolean>(false);
+
   function update() {
     setNarrow(isNarrow());
     if (window.innerWidth != pageWidthPx) {
@@ -74,6 +77,8 @@ export function useAppContextProvider(): AppState {
     pageWidthPx,
     pageStyle,
     showActBarLabels,
+    blockShiftShiftHotkey,
+    setBlockShiftShiftHotkey,
   };
 }
 
diff --git a/src/packages/frontend/app/hotkey/build-tree.tsx b/src/packages/frontend/app/hotkey/build-tree.tsx
new file mode 100644
index 00000000000..e4188e6afe5
--- /dev/null
+++ b/src/packages/frontend/app/hotkey/build-tree.tsx
@@ -0,0 +1,463 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+import { Tag } from "antd";
+import React from "react";
+
+import {
+  ACCOUNT_MAIN_MENU_ITEMS,
+  PREFERENCES_SUB_TABS,
+} from "@cocalc/frontend/account/account-preferences-config";
+import AIAvatar from "@cocalc/frontend/components/ai-avatar";
+import { Icon, IconName } from "@cocalc/frontend/components";
+import { filenameIcon } from "@cocalc/frontend/file-associations";
+import { FIXED_PROJECT_TABS } from "@cocalc/frontend/project/page/file-tab";
+import type { FixedTab } from "@cocalc/frontend/project/page/file-tab";
+import { COLORS } from "@cocalc/util/theme";
+import { trunc_middle } from "@cocalc/util/misc";
+import type { NavigationTreeNode } from "./dialog";
+
+/**
+ * Frame information from active editor
+ */
+export interface FrameInfo {
+  id: string;
+  shortName: string;
+  frameName: string; // Full name (e.g., "Jupyter Notebook")
+  filePath?: string; // If frame is for a file
+  editorType?: string; // Type of editor (e.g., "cm", "markdown") for coloring
+  color?: string; // Color for the tag
+}
+
+/**
+ * File with its frames
+ */
+export interface FileInfo {
+  path: string;
+  name: string;
+  frames: FrameInfo[];
+}
+
+/**
+ * Fixed tab/page in a project (must be a valid FixedTab from ProjectActions)
+ */
+export interface PageInfo {
+  id: FixedTab;
+  name: string;
+  icon?: IconName;
+}
+
+/**
+ * Project data
+ */
+export interface ProjectInfo {
+  id: string;
+  title: string;
+  files: FileInfo[];
+  pages: PageInfo[];
+  starredFiles?: string[]; // Paths to starred files in this project
+}
+
+/**
+ * Account page
+ */
+export interface AccountPageInfo {
+  id: string;
+  name: string;
+  href?: string;
+}
+
+/**
+ * Build the navigation tree from application state
+ *
+ * Structure:
+ * - [current] - Current editor frames (if editing) with frame tree structure
+ * - Project [title] - Current project (prioritized)
+ * - Project [title] - Other projects
+ * - Projects (bookmarked) - Bookmarked projects not already open
+ * - Account - Account pages
+ */
+export function buildNavigationTree(
+  activeFrames: FrameInfo[],
+  currentProject: ProjectInfo | null,
+  allProjects: ProjectInfo[],
+  accountPages: AccountPageInfo[],
+  bookmarkedProjects: ProjectInfo[] = [],
+  activeFileName?: string,
+  frameTreeStructure?: any,
+): NavigationTreeNode[] {
+  const tree: NavigationTreeNode[] = [];
+
+  // Build a map of frame IDs to their indices for quick lookup
+  const frameIndexMap = new Map<string, number>();
+  activeFrames.forEach((frame, index) => {
+    frameIndexMap.set(frame.id, index + 1);
+  });
+
+  /**
+   * Recursively build tree nodes from frame tree structure
+   * Splits show as "Horizontal" or "Vertical" with frame children
+   */
+  function buildFrameTreeNodes(
+    node: any,
+    path: string = "tree",
+  ): NavigationTreeNode | null {
+    if (!node) return null;
+
+    if (node.type === "frame" && node.frame) {
+      const frameIndex = frameIndexMap.get(node.frame.id) ?? 1;
+      return {
+        key: `frame-${node.frame.id}`,
+        title: React.createElement(
+          "span",
+          null,
+          React.createElement(Tag, {
+            color: node.frame.color,
+            children: frameIndex,
+          }),
+          " ",
+          node.frame.shortName,
+        ),
+        navigationData: {
+          type: "frame",
+          id: node.frame.id,
+          shortcutNumber: frameIndex,
+          action: () => {
+            // Will be set by caller with actual actions
+          },
+        },
+      };
+    }
+
+    if (node.type === "split") {
+      const isVertical = node.direction === "row"; // "row" means vertical divider (frames stacked vertically)
+      const directionLabel = isVertical ? "Vertical" : "Horizontal";
+
+      return {
+        key: `split-${path}`,
+        title: directionLabel,
+        defaultExpanded: true, // Always expand split nodes to show the frame structure
+        children: (node.children || [])
+          .map((child: any, i: number) =>
+            buildFrameTreeNodes(child, `${path}-${i}`),
+          )
+          .filter((n): n is NavigationTreeNode => n !== null),
+      };
+    }
+
+    return null;
+  }
+
+  // 1. Current file with frames section (if editor is open)
+  if (activeFrames.length > 0 && activeFileName) {
+    const children: NavigationTreeNode[] = [];
+
+    // If we have a frame tree structure, render it; otherwise show flat list
+    if (frameTreeStructure) {
+      const structureNode = buildFrameTreeNodes(frameTreeStructure);
+      if (structureNode) {
+        children.push(structureNode);
+      }
+    } else {
+      // Fallback to flat list if no structure is available
+      children.push(
+        ...activeFrames.map((frame, index) => ({
+          key: `frame-${frame.id}`,
+          title: React.createElement(
+            "span",
+            null,
+            React.createElement(Tag, {
+              color: frame.color,
+              children: index + 1,
+            }),
+            " ",
+            frame.shortName,
+          ),
+          navigationData: {
+            type: "frame" as const,
+            id: frame.id,
+            shortcutNumber: index + 1,
+            action: () => {
+              // Will be set by caller with actual actions
+            },
+          },
+        })),
+      );
+    }
+
+    tree.push({
+      key: "current-file",
+      title: trunc_middle(activeFileName, 50),
+      defaultExpanded: true, // Always expand the current file
+      children,
+    });
+  }
+
+  // 2. Current project (prioritized if in a project)
+  if (currentProject) {
+    tree.push(buildProjectNode(currentProject));
+  }
+
+  // 3. Other projects
+  allProjects
+    .filter((p) => p.id !== currentProject?.id)
+    .forEach((project) => {
+      tree.push(buildProjectNode(project));
+    });
+
+  // 4. Bookmarked projects (filtered to exclude already open projects)
+  const openProjectIds = new Set(allProjects.map((p) => p.id));
+  if (currentProject) {
+    openProjectIds.add(currentProject.id);
+  }
+  const bookmarkedProjectsNotOpen = bookmarkedProjects.filter(
+    (p) => !openProjectIds.has(p.id),
+  );
+  if (bookmarkedProjectsNotOpen.length > 0) {
+    const bookmarkedChildren: NavigationTreeNode[] =
+      bookmarkedProjectsNotOpen.map((project) => ({
+        key: `bookmarked-project-${project.id}`,
+        title: project.title,
+        navigationData: {
+          type: "bookmarked-project",
+          projectId: project.id,
+          action: () => {
+            // Will be set by caller with actual actions
+          },
+        },
+      }));
+
+    tree.push({
+      key: "bookmarked-projects",
+      title: (
+        <>
+          <Icon name="star-filled" style={{ color: COLORS.STAR }} /> Projects
+        </>
+      ),
+      children: bookmarkedChildren,
+    });
+  }
+
+  // 5. Account pages (with nested structure matching account page left navigation)
+  if (accountPages && accountPages.length > 0) {
+    const accountChildren: NavigationTreeNode[] = [];
+
+    // Generate main menu items from config
+    ACCOUNT_MAIN_MENU_ITEMS.forEach((item) => {
+      accountChildren.push({
+        key: item.key,
+        title: (
+          <>
+            <Icon name={item.icon as IconName} /> {item.label}
+          </>
+        ),
+        navigationData: {
+          type: "account",
+          id: item.id,
+          action: () => {},
+        },
+      });
+    });
+
+    // Insert Preferences (nested submenu) after Profile
+    const preferencesChildren: NavigationTreeNode[] = PREFERENCES_SUB_TABS.map(
+      (tab) => ({
+        key: tab.key,
+        title: tab.useAIAvatar ? (
+          <>
+            <AIAvatar size={16} style={{ top: "-5px" }} /> {tab.label}
+          </>
+        ) : (
+          <>
+            <Icon name={tab.icon as IconName} /> {tab.label}
+          </>
+        ),
+        navigationData: {
+          type: "account",
+          id: tab.id,
+          action: () => {},
+        },
+      }),
+    );
+
+    // Insert Preferences after Profile (at index 2: after Settings and Profile)
+    accountChildren.splice(2, 0, {
+      key: "account-preferences",
+      title: (
+        <>
+          <Icon name="sliders" /> Preferences
+        </>
+      ),
+      children: preferencesChildren,
+    });
+
+    tree.push({
+      key: "account",
+      title: "Account",
+      children: accountChildren,
+    });
+  }
+
+  return tree;
+}
+
+/**
+ * Build a project node with files, frames, and pages
+ * Structure: Project -> [Files, Pages] -> [files, pages]
+ * (Prioritization is handled by insertion order in buildNavigationTree)
+ */
+function buildProjectNode(project: ProjectInfo): NavigationTreeNode {
+  const children: NavigationTreeNode[] = [];
+
+  // 1. Files section with nested file list
+  if (project.files.length > 0) {
+    const fileChildren: NavigationTreeNode[] = [];
+
+    project.files.forEach((file) => {
+      const fileIcon = filenameIcon(file.path);
+      const fileNode: NavigationTreeNode = {
+        key: `file-${file.path}`,
+        title: trunc_middle(file.name, 30),
+        icon: <Icon name={fileIcon} />,
+        navigationData: {
+          type: "file",
+          id: file.path,
+          projectId: project.id,
+          action: () => {
+            // Will be set by caller with actual actions
+          },
+        },
+        children: file.frames.map((frame) => ({
+          key: `file-frame-${file.path}-${frame.id}`,
+          title: frame.shortName,
+          navigationData: {
+            type: "frame",
+            id: frame.id,
+            projectId: project.id,
+            action: () => {
+              // Will be set by caller with actual actions
+            },
+          },
+        })),
+      };
+      fileChildren.push(fileNode);
+    });
+
+    children.push({
+      key: `project-${project.id}-files`,
+      title: "Files",
+      icon: <Icon name="folder" />,
+      children: fileChildren,
+    });
+  }
+
+  // 2. Starred files section (if any)
+  if (project.starredFiles && project.starredFiles.length > 0) {
+    const starredFileChildren: NavigationTreeNode[] = project.starredFiles.map(
+      (filePath) => {
+        const fileName = filePath.split("/").pop() || filePath;
+        const fileIcon = filenameIcon(filePath);
+        return {
+          key: `starred-file-${filePath}`,
+          title: trunc_middle(fileName, 30),
+          icon: <Icon name={fileIcon} />,
+          navigationData: {
+            type: "file",
+            id: filePath,
+            projectId: project.id,
+            action: () => {
+              // Will be set by caller with actual actions
+            },
+          },
+        };
+      },
+    );
+
+    children.push({
+      key: `project-${project.id}-starred-files`,
+      title: (
+        <>
+          <Icon name="star-filled" style={{ color: COLORS.STAR }} /> Files
+        </>
+      ),
+      children: starredFileChildren,
+    });
+  }
+
+  // 3. Pages section with nested pages list
+  if (project.pages.length > 0) {
+    const pageChildren: NavigationTreeNode[] = [];
+
+    project.pages.forEach((page) => {
+      const pageTab = FIXED_PROJECT_TABS[page.id as FixedTab];
+      const pageIcon = pageTab?.icon ?? "question";
+      pageChildren.push({
+        key: `page-${project.id}-${page.id}`,
+        title: page.name,
+        icon: <Icon name={pageIcon} />,
+        navigationData: {
+          type: "page",
+          id: page.id,
+          projectId: project.id,
+          action: () => {
+            // Will be set by caller with actual actions
+          },
+        },
+      });
+    });
+
+    children.push({
+      key: `project-${project.id}-pages`,
+      title: "Pages",
+      icon: <Icon name="list" />,
+      children: pageChildren,
+    });
+  }
+
+  return {
+    key: `project-${project.id}`,
+    title: `${project.title || project.id}`,
+    children,
+  };
+}
+
+/**
+ * Create a flat list of all navigation items with their breadcrumb paths
+ * Useful for search and matching
+ */
+export interface NavigationItem {
+  key: string;
+  textContent: string;
+  breadcrumb: string[];
+  node: NavigationTreeNode;
+}
+
+export function flattenTreeForSearch(
+  tree: NavigationTreeNode[],
+): NavigationItem[] {
+  const items: NavigationItem[] = [];
+
+  const traverse = (nodes: NavigationTreeNode[], breadcrumb: string[] = []) => {
+    nodes.forEach((node) => {
+      const nodeTitle =
+        typeof node.title === "string" ? node.title : String(node.title);
+      const currentBreadcrumb = [...breadcrumb, nodeTitle];
+
+      items.push({
+        key: String(node.key),
+        textContent: nodeTitle,
+        breadcrumb: currentBreadcrumb,
+        node,
+      });
+
+      if (node.children) {
+        traverse(node.children, currentBreadcrumb);
+      }
+    });
+  };
+
+  traverse(tree);
+  return items;
+}
diff --git a/src/packages/frontend/app/hotkey/detector.tsx b/src/packages/frontend/app/hotkey/detector.tsx
new file mode 100644
index 00000000000..184516b9dcc
--- /dev/null
+++ b/src/packages/frontend/app/hotkey/detector.tsx
@@ -0,0 +1,189 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+import { IS_MACOS } from "@cocalc/frontend/feature";
+import { useEffect, useRef } from "react";
+
+export type HotkeyType = "shift+shift" | "alt+shift+h" | "alt+shift+space";
+
+/**
+ * Hook to detect double-Shift key press (two Shift keys within delayMs)
+ * Calls onDoubleShift when detected
+ *
+ * Usage:
+ *   useShiftShiftDetector(() => {
+ *     // Open quick navigation dialog
+ *   }, enabled, 300, false); // 300ms delay, not blocked
+ */
+export function useShiftShiftDetector(
+  onDoubleShift: () => void,
+  enabled: boolean = true,
+  delayMs: number = 300,
+  blocked: boolean = false,
+): void {
+  const lastShiftTimeRef = useRef<number>(0);
+  const shiftCountRef = useRef<number>(0);
+  const resetTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  function handleKeyDown(e: KeyboardEvent) {
+    // Only listen for Shift key
+    if (e.key !== "Shift") {
+      // Reset counter on any other key
+      shiftCountRef.current = 0;
+      return;
+    }
+
+    // If another listener (like test detector) has already handled this, skip it
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    // Clear any pending reset timer
+    if (resetTimerRef.current) {
+      clearTimeout(resetTimerRef.current);
+    }
+
+    // Use performance.now() for higher precision timing (microseconds vs milliseconds)
+    const now = performance.now();
+    const timeSinceLastShift = now - lastShiftTimeRef.current;
+
+    // Check if this Shift is within delayMs of the last one
+    if (timeSinceLastShift <= delayMs && timeSinceLastShift > 0) {
+      // Double Shift detected!
+      if (!blocked) {
+        onDoubleShift();
+      }
+      // Reset to prepare for next double-Shift detection
+      shiftCountRef.current = 0;
+      lastShiftTimeRef.current = now; // Keep current timestamp so next Shift is measured against it
+      return;
+    }
+
+    // Update timestamp for this Shift key
+    lastShiftTimeRef.current = now;
+    shiftCountRef.current += 1;
+
+    // Reset counter after (delayMs * 2) of no activity to prepare for next double-Shift
+    resetTimerRef.current = setTimeout(() => {
+      shiftCountRef.current = 0;
+      lastShiftTimeRef.current = 0; // Only reset to 0 if no activity for a while
+      resetTimerRef.current = null;
+    }, delayMs * 2);
+  }
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    // Add event listener with capture phase to catch key events early
+    window.addEventListener("keydown", handleKeyDown, true);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+      // Clean up any pending reset timer
+      if (resetTimerRef.current) {
+        clearTimeout(resetTimerRef.current);
+        resetTimerRef.current = null;
+      }
+    };
+  }, [onDoubleShift, enabled, delayMs, blocked]);
+}
+
+/**
+ * Hook to detect Alt+Shift+<key> (or Cmd+Shift+<key> on Mac)
+ * Matches exact key or key.toLowerCase() if caseInsensitive is true
+ */
+function useAltShiftKeyDetector(
+  onTriggered: () => void,
+  targetKey: string,
+  caseInsensitive: boolean = false,
+  enabled: boolean = true,
+): void {
+  function handleKeyDown(e: KeyboardEvent) {
+    const altKey = IS_MACOS ? e.metaKey : e.altKey;
+    const keyMatches = caseInsensitive
+      ? e.key.toLowerCase() === targetKey.toLowerCase()
+      : e.key === targetKey;
+
+    if (altKey && e.shiftKey && keyMatches) {
+      e.preventDefault();
+      e.stopPropagation();
+      onTriggered();
+    }
+  }
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    window.addEventListener("keydown", handleKeyDown, true);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [onTriggered, enabled, targetKey, caseInsensitive]);
+}
+
+/**
+ * Hook to detect Alt+Shift+H (or Cmd+Shift+H on Mac)
+ */
+export function useAltShiftHDetector(
+  onTriggered: () => void,
+  enabled: boolean = true,
+): void {
+  useAltShiftKeyDetector(onTriggered, "h", true, enabled);
+}
+
+/**
+ * Hook to detect Alt+Shift+Space (or Cmd+Shift+Space on Mac)
+ */
+export function useAltShiftSpaceDetector(
+  onTriggered: () => void,
+  enabled: boolean = true,
+): void {
+  useAltShiftKeyDetector(onTriggered, " ", false, enabled);
+}
+
+/**
+ * Global hotkey detector component
+ * Place this at app shell level to detect hotkey anywhere
+ *
+ * Props:
+ *   hotkey: Which hotkey to detect ("shift+shift", "alt+shift+h", or "disabled")
+ *   onTriggered: Callback when hotkey is detected
+ *   delayMs: Delay threshold in milliseconds for shift+shift (default: 50ms)
+ *   blocked: Temporarily block the hotkey from triggering (e.g., during testing)
+ */
+export function GlobalHotkeyDetector({
+  hotkey = "shift+shift",
+  onTriggered,
+  delayMs = 50,
+  blocked = false,
+}: {
+  hotkey?: HotkeyType | "disabled";
+  onTriggered: () => void;
+  delayMs?: number;
+  blocked?: boolean;
+}): null {
+  const isEnabled = hotkey !== "disabled";
+
+  useShiftShiftDetector(
+    onTriggered,
+    isEnabled && hotkey === "shift+shift",
+    delayMs,
+    blocked,
+  );
+  useAltShiftHDetector(onTriggered, isEnabled && hotkey === "alt+shift+h");
+  useAltShiftSpaceDetector(
+    onTriggered,
+    isEnabled && hotkey === "alt+shift+space",
+  );
+
+  return null;
+}
+
+export default GlobalHotkeyDetector;
diff --git a/src/packages/frontend/app/hotkey/dialog.tsx b/src/packages/frontend/app/hotkey/dialog.tsx
new file mode 100644
index 00000000000..e6280ae4dbf
--- /dev/null
+++ b/src/packages/frontend/app/hotkey/dialog.tsx
@@ -0,0 +1,680 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+import type { TreeDataNode } from "antd";
+import { Input, Modal, Tree } from "antd";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { Icon, Paragraph } from "@cocalc/frontend/components";
+import {
+  get_local_storage,
+  set_local_storage,
+} from "@cocalc/frontend/misc/local-storage";
+
+// Extended TreeDataNode with navigation data
+export interface NavigationTreeNode extends TreeDataNode {
+  key: string;
+  title: React.ReactNode;
+  children?: NavigationTreeNode[];
+  defaultExpanded?: boolean; // Always expand this node by default
+  navigationData?: {
+    type: "frame" | "file" | "page" | "account" | "bookmarked-project";
+    id?: string;
+    projectId?: string;
+    shortcutNumber?: number; // 1-9 for frame shortcuts
+    action: () => void; // Focus/navigate action
+  };
+}
+
+interface QuickNavigationDialogProps {
+  visible: boolean;
+  onClose: () => void;
+  treeData: NavigationTreeNode[];
+}
+
+/**
+ * Extract plain text from a title that might be JSX
+ * Used for search matching and comparison
+ */
+function extractTextFromTitle(title: React.ReactNode): string {
+  if (typeof title === "string") {
+    return title;
+  }
+  if (typeof title === "number") {
+    return String(title);
+  }
+  if (React.isValidElement(title)) {
+    // For span/div elements, concatenate children text
+    const props = title.props as Record<string, unknown>;
+    if (Array.isArray(props.children)) {
+      return (props.children as React.ReactNode[])
+        .map((child: React.ReactNode) => extractTextFromTitle(child))
+        .join("");
+    }
+    if (props.children != null) {
+      return extractTextFromTitle(props.children as React.ReactNode);
+    }
+  }
+  return "";
+}
+
+/**
+ * Escape special regex characters in a string
+ */
+function escapeRegex(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/**
+ * Determine if search should be case-sensitive based on presence of uppercase
+ */
+function isCaseSensitive(searchValue: string): boolean {
+  return /[A-Z]/.test(searchValue);
+}
+
+/**
+ * Check if text matches all search terms (partial matching)
+ * All terms must appear in the text (case sensitivity based on searchValue)
+ */
+function matchesAllTerms(text: string, searchValue: string): boolean {
+  const terms = searchValue.split(/\s+/).filter((t) => t.length > 0);
+  const caseSensitive = isCaseSensitive(searchValue);
+
+  return terms.every((term) => {
+    const regex = new RegExp(escapeRegex(term), caseSensitive ? "" : "i");
+    return regex.test(text);
+  });
+}
+
+/**
+ * Highlight all occurrences of search terms in text
+ *
+ * Logic:
+ * - Split searchValue by spaces to get individual terms
+ * - For each term, find all non-overlapping occurrences in text
+ * - Wrap matches in <strong> tags
+ * - Case sensitivity determined by presence of uppercase in searchValue
+ *
+ * Example:
+ * - text: "/path/to/foo_file_bar.py"
+ * - searchValue: "foo bar"
+ * - output: <>/path/to/<strong>foo</strong>_file_<strong>bar</strong>.py</>
+ */
+function highlightSearchMatches(
+  text: string,
+  searchValue: string,
+): React.ReactNode {
+  if (!searchValue.trim()) {
+    return text;
+  }
+
+  const terms = searchValue.split(/\s+/).filter((t) => t.length > 0);
+  const caseSensitive = isCaseSensitive(searchValue);
+
+  // Create regex that matches any of the terms
+  const pattern = terms.map((term) => escapeRegex(term)).join("|");
+  const regex = new RegExp(`(${pattern})`, caseSensitive ? "g" : "gi");
+
+  const parts = text.split(regex);
+
+  return (
+    <>
+      {parts.map((part, idx) => {
+        // Check if this part is one of our search terms (it will match the regex)
+        const isMatch =
+          part &&
+          new RegExp(`^(${pattern})$`, caseSensitive ? "" : "i").test(part);
+        return isMatch ? (
+          <strong key={idx}>{part}</strong>
+        ) : (
+          <span key={idx}>{part}</span>
+        );
+      })}
+    </>
+  );
+}
+
+/**
+ * Quick Navigation Dialog - Allows keyboard-based navigation to any frame/page
+ *
+ * Interaction modes:
+ * 1. Number shortcuts (1-9) - Jump to current editor frames
+ * 2. Search - Type to filter all content
+ * 3. Arrow navigation - Up/Down to navigate filtered results, Return to open
+ *
+ * Features:
+ * - First match auto-selected when searching
+ * - Visual highlight (outline + ">") for selected item
+ * - Design system colors for consistency
+ * - Keyboard-only interaction (no mouse required)
+ */
+const EXPANDED_KEYS_STORAGE_KEY = "hotkey-nav-expanded";
+
+/**
+ * Get all expandable node keys (parent nodes with children) from the tree
+ */
+function getExpandableNodeKeys(nodes: NavigationTreeNode[]): Set<React.Key> {
+  const keys = new Set<React.Key>();
+  const traverse = (nodeList: NavigationTreeNode[]) => {
+    nodeList.forEach((node) => {
+      // Only include nodes that have children (can be expanded)
+      if (node.children && node.children.length > 0) {
+        keys.add(node.key);
+        traverse(node.children);
+      }
+    });
+  };
+  traverse(nodes);
+  return keys;
+}
+
+/**
+ * Load persisted expanded keys from localStorage via wrapper functions
+ * Filters to only include expandable nodes that are still in the tree
+ */
+function loadExpandedKeys(treeData: NavigationTreeNode[]): React.Key[] {
+  // Start with nodes marked as defaultExpanded
+  const defaultExpandedKeys: React.Key[] = [];
+  const traverseForDefaults = (nodes: NavigationTreeNode[]) => {
+    nodes.forEach((node) => {
+      if (node.defaultExpanded) {
+        defaultExpandedKeys.push(node.key);
+      }
+      if (node.children) {
+        traverseForDefaults(node.children);
+      }
+    });
+  };
+  traverseForDefaults(treeData);
+
+  try {
+    const stored = get_local_storage(EXPANDED_KEYS_STORAGE_KEY);
+    let keys: React.Key[] = [];
+
+    if (stored && typeof stored === "string") {
+      keys = JSON.parse(stored);
+    } else if (Array.isArray(stored)) {
+      keys = stored;
+    }
+
+    // Merge stored keys with default expanded keys
+    const mergedKeys = [...new Set([...defaultExpandedKeys, ...keys])];
+
+    // Validate that keys are still expandable in the tree
+    if (mergedKeys.length > 0) {
+      const expandableKeys = getExpandableNodeKeys(treeData);
+      return mergedKeys.filter((key) => expandableKeys.has(key));
+    }
+  } catch {
+    // Ignore errors reading localStorage
+  }
+  return defaultExpandedKeys;
+}
+
+/**
+ * Save expanded keys to localStorage via wrapper functions
+ * Only stores expandable (parent) nodes that are currently expanded
+ */
+function saveExpandedKeys(
+  keys: React.Key[],
+  treeData: NavigationTreeNode[],
+): void {
+  try {
+    const expandableKeys = getExpandableNodeKeys(treeData);
+    // Only save keys that are actually expandable
+    const filteredKeys = keys.filter((key) => expandableKeys.has(key));
+    set_local_storage(EXPANDED_KEYS_STORAGE_KEY, JSON.stringify(filteredKeys));
+  } catch {
+    // Ignore errors writing to localStorage
+  }
+}
+
+export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
+  visible,
+  onClose,
+  treeData,
+}) => {
+  const intl = useIntl();
+  const searchInputRef = useRef<any>(null);
+  const [searchValue, setSearchValue] = useState("");
+  const [expandedKeys, setExpandedKeysState] = useState<React.Key[]>([]);
+  const [autoExpandParent, setAutoExpandParent] = useState(false);
+  const [selectedKey, setSelectedKey] = useState<React.Key | null>(null);
+
+  // Update expanded keys WITHOUT persisting to localStorage (for search auto-expand)
+  const setExpandedKeysTransient = (
+    keys: React.Key[] | ((prev: React.Key[]) => React.Key[]),
+  ) => {
+    setExpandedKeysState((prev) => {
+      const newKeys = typeof keys === "function" ? keys(prev) : keys;
+      return newKeys;
+    });
+  };
+
+  // Wrapper for setExpandedKeys that persists to localStorage (for user explicit expand/collapse)
+  const setExpandedKeys = (
+    keys: React.Key[] | ((prev: React.Key[]) => React.Key[]),
+  ) => {
+    setExpandedKeysState((prev) => {
+      const newKeys = typeof keys === "function" ? keys(prev) : keys;
+      saveExpandedKeys(newKeys, treeData);
+      return newKeys;
+    });
+  };
+
+  // Focus the search input and clear search when the dialog opens
+  useEffect(() => {
+    if (visible) {
+      // Clear search text and reset state
+      setSearchValue("");
+      // Load persisted expanded keys instead of resetting to ["current"]
+      const persistedKeys = loadExpandedKeys(treeData);
+      setExpandedKeysState(persistedKeys);
+      setAutoExpandParent(false);
+      setSelectedKey(null);
+
+      if (searchInputRef.current) {
+        // Use a small timeout to ensure the modal is fully rendered
+        const timer = setTimeout(() => {
+          // Access the native input element from Ant Design's Input component
+          searchInputRef.current?.input?.focus();
+        }, 0);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [visible, treeData]);
+
+  /**
+   * Check if a node is a leaf (has no children or empty children)
+   */
+  const isLeafNode = (node: NavigationTreeNode): boolean => {
+    return !node.children || node.children.length === 0;
+  };
+
+  // Flatten tree for search matching - only include leaf nodes
+  const searchList = useMemo(() => {
+    const list: {
+      key: React.Key;
+      title: string;
+      node: NavigationTreeNode;
+    }[] = [];
+
+    const traverse = (nodes: NavigationTreeNode[]) => {
+      nodes.forEach((node) => {
+        // Only include leaf nodes in search
+        if (isLeafNode(node)) {
+          // Extract text from title (handle JSX, strings, etc.)
+          const titleText = extractTextFromTitle(node.title);
+          list.push({ key: node.key, title: titleText, node });
+        }
+        if (node.children) {
+          traverse(node.children);
+        }
+      });
+    };
+
+    traverse(treeData);
+    return list;
+  }, [treeData]);
+
+  // Filter searchList based on current search value
+  const filteredSearchList = useMemo(() => {
+    if (!searchValue) {
+      return searchList;
+    }
+    return searchList.filter((item) =>
+      matchesAllTerms(item.title, searchValue),
+    );
+  }, [searchList, searchValue]);
+
+  // Find parent key for search expansion
+  const getParentKey = (key: React.Key): React.Key | null => {
+    for (const node of treeData) {
+      const found = findInTree(key, node);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  const findInTree = (
+    key: React.Key,
+    node: NavigationTreeNode,
+  ): React.Key | null => {
+    if (node.children?.some((item) => item.key === key)) {
+      return node.key;
+    }
+    if (node.children) {
+      for (const child of node.children) {
+        const found = findInTree(key, child);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+
+  // Search handler
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    setSearchValue(value);
+
+    if (!value) {
+      // No search - restore persisted expanded keys
+      const persistedKeys = loadExpandedKeys(treeData);
+      setExpandedKeysState(persistedKeys);
+      setAutoExpandParent(false);
+      setSelectedKey(null);
+      return;
+    }
+
+    // Expand all parent nodes of matching items, preserving previously expanded keys
+    const newExpandedKeys = new Set<React.Key>(expandedKeys);
+
+    // Add all parent keys for matching items
+    searchList.forEach((item) => {
+      if (matchesAllTerms(item.title, value)) {
+        // Add the item itself (so parent expands to show it)
+        const parentKey = getParentKey(item.key);
+        if (parentKey !== null) {
+          newExpandedKeys.add(parentKey);
+        }
+        // Also add the item if it's a container
+        newExpandedKeys.add(item.key);
+      }
+    });
+
+    // Use transient update (don't persist to localStorage during search)
+    setExpandedKeysTransient([...newExpandedKeys]);
+    setAutoExpandParent(true);
+
+    // Auto-select first match
+    const firstMatch = searchList.find((item) =>
+      matchesAllTerms(item.title, value),
+    );
+    if (firstMatch) {
+      setSelectedKey(firstMatch.key);
+    }
+  };
+
+  // Filter tree to show only matching items (removes non-matching branches)
+  const filterTree = (nodes: NavigationTreeNode[]): NavigationTreeNode[] => {
+    if (!searchValue) {
+      return nodes;
+    }
+
+    const filtered = nodes
+      .map((node): NavigationTreeNode | null => {
+        const titleText = extractTextFromTitle(node.title);
+        const matches = matchesAllTerms(titleText, searchValue);
+        const isParent = node.children && node.children.length > 0;
+
+        // Recursively filter children
+        const filteredChildren = node.children ? filterTree(node.children) : [];
+
+        // Include node if:
+        // 1. It matches the search, OR
+        // 2. It has matching children (parent containers should always show if they have matches)
+        if (matches || filteredChildren.length > 0) {
+          return {
+            ...node,
+            children:
+              filteredChildren.length > 0 ? filteredChildren : node.children,
+          };
+        }
+
+        // Keep parent nodes even if they don't match, to preserve tree structure
+        // (they will be filtered out by children anyway if children don't match)
+        if (isParent) {
+          return {
+            ...node,
+            children: filteredChildren.length > 0 ? filteredChildren : [],
+          };
+        }
+
+        return null;
+      })
+      .filter((node): node is NavigationTreeNode => node !== null);
+
+    return filtered;
+  };
+
+  // Keyboard handler - handle number shortcuts and navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // Number shortcuts (1-9) - only in non-search mode
+    if (!searchValue) {
+      const num = parseInt(e.key);
+      if (num >= 1 && num <= 9) {
+        const frameNode = searchList.find(
+          (item) => item.node.navigationData?.shortcutNumber === num,
+        );
+        if (frameNode?.node.navigationData) {
+          frameNode.node.navigationData.action();
+          onClose();
+          e.preventDefault();
+          return;
+        }
+      }
+    }
+
+    // Arrow keys and Return - navigate through filtered leaf nodes only
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      // filteredSearchList contains only leaf nodes matching the search (if any)
+      const currentIndex = filteredSearchList.findIndex(
+        (item) => item.key === selectedKey,
+      );
+      let nextIndex = currentIndex;
+
+      if (e.key === "ArrowUp") {
+        nextIndex = Math.max(0, currentIndex - 1);
+      } else {
+        nextIndex = Math.min(filteredSearchList.length - 1, currentIndex + 1);
+      }
+
+      if (filteredSearchList[nextIndex]) {
+        const nextKey = filteredSearchList[nextIndex].key;
+        setSelectedKey(nextKey);
+
+        // Auto-expand parent nodes to make selected node visible
+        const parentKey = getParentKey(nextKey);
+        if (parentKey !== null) {
+          // Use transient update (don't persist during keyboard navigation)
+          setExpandedKeysTransient((prev) => {
+            const newKeys = new Set(prev);
+            newKeys.add(parentKey);
+            return Array.from(newKeys);
+          });
+        }
+      }
+      e.preventDefault();
+    } else if (e.key === "Enter") {
+      // Activate selected node
+      const node = filteredSearchList.find((item) => item.key === selectedKey);
+      if (node?.node.navigationData) {
+        node.node.navigationData.action();
+        onClose();
+      }
+      e.preventDefault();
+    } else if (e.key === "Escape") {
+      onClose();
+      e.preventDefault();
+    }
+  };
+
+  // Transform tree data to add visual highlighting and apply filtering
+  const transformedTreeData = useMemo(() => {
+    // First, filter the tree to show only matching items
+    const filteredData = filterTree(treeData);
+
+    // Then, transform for visual highlighting
+    const transform = (nodes: NavigationTreeNode[]): NavigationTreeNode[] => {
+      return nodes.map((node) => {
+        const isSelected = node.key === selectedKey;
+        const titleText = extractTextFromTitle(node.title);
+        const isLeaf = !node.children || node.children.length === 0;
+
+        let title = node.title;
+
+        // Apply search term highlighting only to leaf nodes (files, not container labels)
+        if (searchValue && titleText.length > 0 && isLeaf) {
+          const highlighted = highlightSearchMatches(titleText, searchValue);
+          title = <span>{highlighted}</span>;
+        }
+
+        // Apply selection styling with pale blue background (not bold to preserve search highlighting)
+        if (isSelected) {
+          title = (
+            <span
+              style={{
+                backgroundColor: "rgba(13, 110, 253, 0.15)",
+                padding: "0 2px",
+                borderRadius: "2px",
+              }}
+            >
+              {title}
+            </span>
+          );
+        }
+
+        return {
+          ...node,
+          title,
+          children: node.children ? transform(node.children) : undefined,
+        };
+      });
+    };
+
+    return transform(filteredData);
+  }, [treeData, selectedKey, searchValue]);
+
+  return (
+    <Modal
+      title={
+        <>
+          <Icon name="flash" />{" "}
+          {intl.formatMessage({
+            id: "app.hotkey.dialog.title",
+            defaultMessage: "Quick Navigation",
+            description:
+              "Title of the quick navigation dialog opened by hotkey",
+          })}
+        </>
+      }
+      open={visible}
+      onCancel={onClose}
+      footer={null}
+      width={600}
+      maskClosable={true}
+      zIndex={10000}
+      transitionName=""
+      maskTransitionName=""
+      styles={{
+        body: {
+          padding: "16px",
+          display: "flex",
+          flexDirection: "column",
+          height: "80vh",
+          width: "100%",
+          boxSizing: "border-box",
+          overflow: "hidden",
+        },
+      }}
+    >
+      <div
+        onKeyDown={handleKeyDown}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          width: "100%",
+          minWidth: 0,
+        }}
+      >
+        <Input.Search
+          ref={searchInputRef}
+          placeholder={intl.formatMessage({
+            id: "app.hotkey.dialog.search_placeholder",
+            defaultMessage: "Search frames, files, and pages...",
+            description:
+              "Placeholder text for the search input in quick navigation",
+          })}
+          onChange={handleSearch}
+          value={searchValue}
+          autoFocus
+          onKeyDown={handleKeyDown}
+          allowClear
+          style={{ marginBottom: 16 }}
+        />
+
+        <div
+          style={{
+            flex: 1,
+            overflow: "auto",
+            minHeight: 0,
+            minWidth: 0,
+            // Suppress Ant Design Tree's default selection styling (border/background)
+            // We only use bold text for selection
+          }}
+          className="quick-nav-tree"
+        >
+          <style>{`
+            .quick-nav-tree .ant-tree-node-selected {
+              background-color: transparent !important;
+            }
+            .quick-nav-tree .ant-tree-node-selected > span[class*="content"] {
+              outline: none !important;
+            }
+          `}</style>
+          <Tree
+            treeData={transformedTreeData}
+            expandedKeys={expandedKeys}
+            autoExpandParent={autoExpandParent}
+            onExpand={setExpandedKeys}
+            selectedKeys={selectedKey ? [selectedKey] : []}
+            showLine={true}
+            showIcon={true}
+            blockNode={true}
+            onSelect={(keys, info) => {
+              const newKey = keys[0] || null;
+              const targetNode = searchList.find((item) => item.key === newKey);
+
+              // Check if this is a leaf node (no children)
+              const isLeaf =
+                !targetNode?.node.children ||
+                targetNode.node.children.length === 0;
+
+              // Only select/focus on leaf nodes
+              if (isLeaf) {
+                setSelectedKey(newKey);
+              }
+
+              // If selected via mouse click on a leaf node, activate it immediately
+              // The info.event object is only present when user clicks
+              if (info.event && newKey && isLeaf) {
+                if (targetNode?.node.navigationData) {
+                  targetNode.node.navigationData.action();
+                  onClose();
+                }
+              }
+
+              // If it's a parent node (has children), just toggle expansion without selecting
+              if (!isLeaf && info.event) {
+                // The expand/collapse is handled by Ant Design's Tree component automatically
+                // when clicking on the expand icon, so we don't need to do anything here
+              }
+            }}
+          />
+        </div>
+
+        <Paragraph type="secondary" style={{ marginTop: 16, marginBottom: 0 }}>
+          <FormattedMessage
+            id="app.hotkey.dialog.help_text"
+            defaultMessage="Type to search • Numbers 1–9 for current frames • ↑↓ navigate • Return to open • ESC to close"
+            description="Help text showing keyboard shortcuts in the quick navigation dialog"
+          />
+        </Paragraph>
+      </div>
+    </Modal>
+  );
+};
diff --git a/src/packages/frontend/app/hotkey/index.ts b/src/packages/frontend/app/hotkey/index.ts
new file mode 100644
index 00000000000..820ae91b41c
--- /dev/null
+++ b/src/packages/frontend/app/hotkey/index.ts
@@ -0,0 +1,22 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+export {
+  buildNavigationTree,
+  flattenTreeForSearch,
+  type AccountPageInfo,
+  type FileInfo,
+  type FrameInfo,
+  type NavigationItem,
+  type PageInfo,
+  type ProjectInfo,
+} from "./build-tree";
+export { GlobalHotkeyDetector, useShiftShiftDetector } from "./detector";
+export { QuickNavigationDialog } from "./dialog";
+export type { NavigationTreeNode } from "./dialog";
+export {
+  useEnhancedNavigationTreeData,
+  useNavigationTreeData,
+} from "./use-navigation-data";
diff --git a/src/packages/frontend/app/hotkey/use-navigation-data.ts b/src/packages/frontend/app/hotkey/use-navigation-data.ts
new file mode 100644
index 00000000000..0530ffad4af
--- /dev/null
+++ b/src/packages/frontend/app/hotkey/use-navigation-data.ts
@@ -0,0 +1,726 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+declare var DEBUG: boolean;
+
+import { useMemo } from "react";
+
+import {
+  redux,
+  useActions,
+  useTypedRedux,
+} from "@cocalc/frontend/app-framework";
+import { useBookmarkedProjects } from "@cocalc/frontend/projects/use-bookmarked-projects";
+import {
+  path_to_tab,
+  trunc_middle,
+  unreachable,
+  getRandomColor,
+} from "@cocalc/util/misc";
+
+import {
+  buildNavigationTree,
+  PageInfo,
+  type AccountPageInfo,
+  type FileInfo,
+  type FrameInfo,
+  type ProjectInfo,
+} from "./build-tree";
+import type { NavigationTreeNode } from "./dialog";
+
+/**
+ * Extract frame information from a frame tree structure
+ *
+ * The frame tree is a binary tree where leaves are editor instances,
+ * and internal nodes are split panels. We do a depth-first traversal
+ * to get frames in left-to-right order.
+ *
+ * @param frameTree - The binary frame tree from editor local_view_state
+ * @param editor_spec - The editor spec mapping type -> EditorDescription with short names
+ * @param includeStructure - If true, return both flat list and tree structure
+ */
+function extractFramesFromTree(frameTree: any, editor_spec?: any): FrameInfo[];
+function extractFramesFromTree(
+  frameTree: any,
+  editor_spec: any,
+  includeStructure: true,
+): { frames: FrameInfo[]; treeStructure: any };
+function extractFramesFromTree(
+  frameTree: any,
+  editor_spec?: any,
+  includeStructure: boolean = false,
+): FrameInfo[] | { frames: FrameInfo[]; treeStructure: any } {
+  if (!frameTree) {
+    const result = { frames: [], treeStructure: null };
+    return includeStructure ? result : result.frames;
+  }
+
+  const frames: FrameInfo[] = [];
+  let frameIndex = 0;
+
+  const traverse = (node: any) => {
+    if (!node) return;
+
+    // If this is a leaf node (has type and spec or is a frame type)
+    const nodeType = node.get?.("type");
+    const id = node.get?.("id");
+
+    // Check if this is a leaf editor node (type like "cm", "markdown", etc)
+    if (nodeType && nodeType !== "node" && id) {
+      // Look up the editor spec for this type to get user-friendly names
+      const typeSpec = editor_spec?.[nodeType];
+      const shortName =
+        typeSpec?.short || typeSpec?.name || nodeType || "Unknown";
+      const frameName = typeSpec?.name || nodeType || "Unknown";
+
+      frames.push({
+        id,
+        shortName,
+        frameName,
+        filePath: typeSpec?.path,
+        editorType: nodeType,
+        color: getRandomColor(nodeType),
+      });
+      frameIndex++;
+      return;
+    }
+
+    // If this is an internal node (has children), traverse left then right
+    const first = node.get?.("first");
+    const second = node.get?.("second");
+
+    if (first) traverse(first);
+    if (second) traverse(second);
+  };
+
+  traverse(frameTree);
+
+  // If structure is not requested, return just the flat list
+  if (!includeStructure) {
+    return frames;
+  }
+
+  // Build the tree structure for rendering
+  const buildTreeStructure = (node: any): any => {
+    if (!node) return null;
+
+    const nodeType = node.get?.("type");
+    const id = node.get?.("id");
+
+    // Leaf node (editor frame)
+    if (nodeType && nodeType !== "node" && id) {
+      const frameInfo = frames.find((f) => f.id === id);
+      return {
+        type: "frame",
+        id,
+        frame: frameInfo,
+      };
+    }
+
+    // Internal node (split)
+    const direction = node.get?.("direction"); // "col" or "row"
+    const first = node.get?.("first");
+    const second = node.get?.("second");
+
+    return {
+      type: "split",
+      direction,
+      id,
+      children: [buildTreeStructure(first), buildTreeStructure(second)].filter(
+        (n) => n !== null,
+      ),
+    };
+  };
+
+  const treeStructure = buildTreeStructure(frameTree);
+
+  return { frames, treeStructure };
+}
+
+/**
+ * Hook that combines Redux state into navigation tree data
+ *
+ * Handles:
+ * - Current editor frames (if in editor mode)
+ * - Current project (prioritized)
+ * - All other projects
+ * - Account pages (hardcoded, always available)
+ */
+export function useNavigationTreeData(): NavigationTreeNode[] {
+  // Get current active tab - when viewing a project, this is the project_id
+  const active_top_tab = useTypedRedux("page", "active_top_tab");
+
+  // Only use project_id if we're actually viewing a project (not notifications, file use, etc.)
+  // Project IDs are UUIDs, so we can check if it's a valid project_id
+  const isProjectView =
+    typeof active_top_tab === "string" && active_top_tab.length === 36;
+  const project_id: string | undefined = isProjectView
+    ? (active_top_tab as string)
+    : undefined;
+
+  // Get project data
+  const project_map = useTypedRedux("projects", "project_map");
+  // Only include projects that are actually open (visible in UI top nav bar)
+  const open_projects = useTypedRedux("projects", "open_projects");
+
+  // Get current file/editor state - always call hooks but may return undefined
+  // We use a dummy string for project_id when not in project view to avoid conditional hook calls
+  const open_files = useTypedRedux(
+    { project_id: project_id ?? "" },
+    "open_files",
+  );
+  const open_files_order = useTypedRedux(
+    { project_id: project_id ?? "" },
+    "open_files_order",
+  );
+  const active_project_tab_raw = useTypedRedux(
+    { project_id: project_id ?? "" },
+    "active_project_tab",
+  );
+  const starred_files_raw = useTypedRedux(
+    { project_id: project_id ?? "" },
+    "starred_files",
+  );
+
+  // Only use these if we're in a project view
+  const active_project_tab = isProjectView ? active_project_tab_raw : undefined;
+  const starred_files = isProjectView ? starred_files_raw : undefined;
+
+  // Extract active frames from current editor
+  const { activeFrames, activeFileName, frameTreeStructure } = useMemo(() => {
+    if (!active_project_tab || !active_project_tab.startsWith("editor-")) {
+      return {
+        activeFrames: [],
+        activeFileName: undefined,
+        frameTreeStructure: null,
+      }; // Not in editor mode
+    }
+
+    // Find the file corresponding to the active tab
+    const activeFile = open_files_order?.find((path: string) => {
+      return !!(path && path_to_tab(path) === active_project_tab);
+    });
+
+    if (!activeFile) {
+      return {
+        activeFrames: [],
+        activeFileName: undefined,
+        frameTreeStructure: null,
+      };
+    }
+
+    // Get file state from project store
+    const fileState = open_files?.get(activeFile);
+    if (!fileState) {
+      return {
+        activeFrames: [],
+        activeFileName: undefined,
+        frameTreeStructure: null,
+      };
+    }
+
+    // Frame tree is stored in a separate Redux store for the editor
+    // Access it via the redux_name from the component
+    const component = fileState?.get("component");
+    const editorReduxName = component?.redux_name;
+    const editor_spec = component?.editor_spec;
+
+    if (!editorReduxName) {
+      return {
+        activeFrames: [],
+        activeFileName: undefined,
+        frameTreeStructure: null,
+      };
+    }
+
+    // Get the editor's local_view_state from its own Redux store
+    const editorStore = redux.getStore(editorReduxName);
+    const editorLocalViewState = editorStore?.get("local_view_state") as any;
+
+    if (!editorLocalViewState) {
+      return {
+        activeFrames: [],
+        activeFileName: undefined,
+        frameTreeStructure: null,
+      };
+    }
+
+    const frameTree = editorLocalViewState.get("frame_tree");
+    if (!frameTree) {
+      return {
+        activeFrames: [],
+        activeFileName: undefined,
+        frameTreeStructure: null,
+      };
+    }
+
+    const extractResult = extractFramesFromTree(frameTree, editor_spec, true);
+    const result =
+      extractResult && "frames" in extractResult
+        ? (extractResult as { frames: FrameInfo[]; treeStructure: any })
+        : { frames: extractResult as FrameInfo[], treeStructure: null };
+
+    return {
+      activeFrames: result.frames,
+      activeFileName: activeFile,
+      frameTreeStructure: result.treeStructure,
+    };
+  }, [open_files, open_files_order, active_project_tab]);
+
+  // Build project info for only open projects
+  // TODO (ARIA.md): In the future, also include closed projects with their starred files
+  // This would improve navigation for frequently-used files across all projects,
+  // following accessibility best practices for quick navigation dialogs
+  const projectsData = useMemo(() => {
+    // if (DEBUG) {
+    //   console.log("useNavigationTreeData - Building projectsData:", {
+    //     openProjectsLength: open_projects?.size,
+    //     projectMapSize: project_map?.size,
+    //     hasProjectMap: !!project_map,
+    //     isProjectView,
+    //     project_id,
+    //   });
+    // }
+    if (!project_map || !open_projects || open_projects.size === 0) {
+      return [];
+    }
+
+    return (open_projects.toArray() as string[])
+      .map((projectId: string) => {
+        const proj = project_map?.get(projectId);
+        if (!proj) {
+          return null;
+        }
+
+        const isCurrentProject = projectId === project_id;
+
+        // Build file list for ALL open projects
+        // For the current project, we have data loaded in Redux
+        // For other projects, we try to get open_files from their project stores if available
+        let files: FileInfo[] = [];
+
+        if (isCurrentProject && open_files && open_files_order) {
+          // Current project: use already-loaded editor state
+          files = (open_files_order || [])
+            .filter((path: string) => !!path)
+            .map((path: string) => {
+              const fileState = open_files.get(path);
+              const frameTree = fileState?.get("frames");
+              // Truncate long file paths in the middle for display
+              const displayName = trunc_middle(path, 50);
+              return {
+                path,
+                name: displayName,
+                frames: frameTree ? extractFramesFromTree(frameTree) : [],
+              };
+            })
+            .toArray();
+        } else if (!isCurrentProject) {
+          // Other projects: try to get files from their project stores if loaded
+          // Note: This only works if the project store has been accessed
+          // For full directory listing, we would need to fetch via conat
+          const otherProjectStore = redux.getProjectStore(projectId);
+          if (otherProjectStore) {
+            const otherOpenFiles = otherProjectStore.get("open_files");
+            const otherOpenFilesOrder =
+              otherProjectStore.get("open_files_order");
+            if (otherOpenFiles && otherOpenFilesOrder) {
+              files = (otherOpenFilesOrder || [])
+                .filter((path: string) => !!path)
+                .map((path: string) => {
+                  const fileState = otherOpenFiles.get(path);
+                  const frameTree = fileState?.get("frames");
+                  const displayName = trunc_middle(path, 50);
+                  return {
+                    path,
+                    name: displayName,
+                    frames: frameTree ? extractFramesFromTree(frameTree) : [],
+                  };
+                })
+                .toArray();
+            }
+          }
+        }
+
+        // Get starred files for this project (excluding already-open files)
+        let starredFiles: string[] = [];
+        const openFilePaths = new Set(files.map((f) => f.path));
+        if (isCurrentProject) {
+          // Current project: get from Redux state (starred_files is a top-level project store property)
+          if (starred_files) {
+            const allStarred = Array.isArray(starred_files)
+              ? starred_files
+              : (starred_files.toArray?.() ?? []);
+            starredFiles = allStarred.filter(
+              (path) => !openFilePaths.has(path),
+            );
+          }
+        } else {
+          // Other projects: get from their project store if available
+          const otherProjectStore = redux.getProjectStore(projectId);
+          if (otherProjectStore) {
+            const otherStarredFiles = otherProjectStore.get("starred_files");
+            if (otherStarredFiles) {
+              const allStarred = Array.isArray(otherStarredFiles)
+                ? otherStarredFiles
+                : (otherStarredFiles.toArray?.() ?? []);
+              starredFiles = allStarred.filter(
+                (path) => !openFilePaths.has(path),
+              );
+            }
+          }
+        }
+
+        // Project pages (fixed tabs) - use actual FixedTab types from ProjectActions
+        const pages: PageInfo[] = [
+          { id: "files", name: "Files", icon: "folder" },
+          { id: "new", name: "New", icon: "plus" },
+          { id: "search", name: "Search", icon: "search" },
+          { id: "log", name: "Recent Files", icon: "history" },
+          { id: "settings", name: "Settings", icon: "gear" },
+          { id: "info", name: "Info", icon: "microchip" },
+          { id: "users", name: "Users", icon: "users" },
+          { id: "servers", name: "Servers", icon: "server" },
+          { id: "upgrades", name: "Upgrades", icon: "gift" },
+        ];
+
+        return {
+          id: projectId,
+          title: proj.get("title") || projectId,
+          files,
+          pages,
+          starredFiles,
+        } as ProjectInfo;
+      })
+      .filter((p): p is ProjectInfo => p !== null);
+  }, [
+    project_map,
+    open_projects,
+    project_id,
+    open_files,
+    open_files_order,
+    starred_files,
+  ]);
+
+  // Get bookmarked projects
+  const {
+    bookmarkedProjects: bookmarkedProjectIds,
+    isInitialized: bookmarksInitialized,
+  } = useBookmarkedProjects();
+
+  // Build ProjectInfo for bookmarked projects (excluding open projects)
+  const bookmarkedProjectsData = useMemo(() => {
+    if (!bookmarksInitialized || !project_map) {
+      return [];
+    }
+
+    return bookmarkedProjectIds
+      .map((projectId) => {
+        const proj = project_map?.get(projectId);
+        if (!proj) {
+          return null;
+        }
+        // Get starred files for bookmarked project
+        let starredFiles: string[] = [];
+        const projectStore = redux.getProjectStore(projectId);
+        if (projectStore) {
+          const starredFilesList = projectStore.get("starred_files");
+          if (starredFilesList && starredFilesList.toArray) {
+            starredFiles = starredFilesList.toArray();
+          }
+        }
+
+        // For bookmarked projects, we don't need open files or pages, just basic info and starred files
+        return {
+          id: projectId,
+          title: proj.get("title") || projectId,
+          files: [],
+          pages: [],
+          starredFiles,
+        } as ProjectInfo;
+      })
+      .filter((p): p is ProjectInfo => p !== null);
+  }, [bookmarkedProjectIds, project_map, bookmarksInitialized]);
+
+  // Account pages - mirrors the account page left navigation structure
+  // These are not used directly; they're just for documentation
+  // The actual account section is built in buildNavigationTree() instead
+  const accountPages: AccountPageInfo[] = useMemo(
+    () => [
+      { id: "index", name: "Settings" },
+      { id: "profile", name: "Profile" },
+      // Preferences (nested)
+      { id: "preferences-appearance", name: "Appearance" },
+      { id: "preferences-editor", name: "Editor" },
+      { id: "preferences-keyboard", name: "Keyboard" },
+      { id: "preferences-ai", name: "AI" },
+      { id: "preferences-communication", name: "Communication" },
+      { id: "preferences-keys", name: "SSH and API Keys" },
+      { id: "preferences-other", name: "Other" },
+      // Subscriptions & Purchases
+      { id: "subscriptions", name: "Subscriptions" },
+      { id: "licenses", name: "Licenses" },
+      { id: "payg", name: "Pay as you Go" },
+      { id: "upgrades", name: "Upgrades" },
+      { id: "purchases", name: "Purchases" },
+      { id: "payments", name: "Payments" },
+      { id: "payment-methods", name: "Payment Methods" },
+      { id: "statements", name: "Statements" },
+      // Other
+      { id: "cloud-filesystems", name: "Cloud Filesystems" },
+      { id: "public-paths", name: "Public Paths" },
+      { id: "support", name: "Support" },
+    ],
+    [],
+  );
+
+  // Build the complete navigation tree
+  const treeData = useMemo(() => {
+    // if (DEBUG) {
+    //   console.log("useNavigationTreeData - Building tree:", {
+    //     activeFrames,
+    //     projectsDataLength: projectsData.length,
+    //     project_id,
+    //     accountPagesLength: accountPages.length,
+    //     bookmarkedProjectsDataLength: bookmarkedProjectsData.length,
+    //     isProjectView,
+    //   });
+    // }
+    const currentProject =
+      projectsData.find((p) => p.id === project_id) || null;
+    const otherProjects = projectsData.filter((p) => p.id !== project_id);
+
+    return buildNavigationTree(
+      activeFrames,
+      currentProject,
+      otherProjects,
+      accountPages,
+      bookmarkedProjectsData,
+      activeFileName,
+      frameTreeStructure,
+    );
+  }, [
+    activeFrames,
+    activeFileName,
+    frameTreeStructure,
+    projectsData,
+    project_id,
+    accountPages,
+    bookmarkedProjectsData,
+  ]);
+
+  return treeData;
+}
+
+/**
+ * Hook that adds action handlers to tree nodes
+ * Ties navigation to Redux actions and routing
+ */
+export function useEnhancedNavigationTreeData(): NavigationTreeNode[] {
+  const treeData = useNavigationTreeData();
+  const active_top_tab = useTypedRedux("page", "active_top_tab");
+
+  // Get project_id from active_top_tab (same logic as useNavigationTreeData)
+  const project_id =
+    typeof active_top_tab === "string" && active_top_tab.length === 36
+      ? active_top_tab
+      : undefined;
+
+  const page_actions = useActions("page");
+
+  // Enhance tree nodes with action handlers
+  const enhancedTreeData = useMemo(() => {
+    const enhanceNode = (node: NavigationTreeNode): NavigationTreeNode => {
+      if (node.navigationData) {
+        const navData = node.navigationData;
+
+        switch (navData.type) {
+          case "frame":
+            // Focus frame in current editor
+            // Store the project_id and frame id for use when action is called
+            navData.action = () => {
+              if (navData.id && project_id && typeof project_id === "string") {
+                const currentProjectId = project_id;
+                const frameId = navData.id;
+
+                // Get the currently active editor path from active_top_tab
+                // active_top_tab is like "editor-path/to/file.py"
+                let editorPath = "";
+                const activeTopTab = redux
+                  .getStore("page")
+                  ?.get("active_top_tab");
+                if (
+                  typeof activeTopTab === "string" &&
+                  activeTopTab.startsWith("editor-")
+                ) {
+                  editorPath = activeTopTab.slice("editor-".length);
+                }
+
+                if (DEBUG) {
+                  console.log("Frame action called:", {
+                    frameId,
+                    currentProjectId,
+                    editorPath,
+                    activeTopTab,
+                  });
+                }
+
+                // Get the actions from Redux at call time
+                const editorActions = redux.getEditorActions(
+                  currentProjectId,
+                  editorPath,
+                );
+                if (DEBUG) {
+                  console.log("EditorActions:", {
+                    hasActions: !!editorActions,
+                    actionsMethods: editorActions
+                      ? Object.getOwnPropertyNames(
+                          Object.getPrototypeOf(editorActions),
+                        ).slice(0, 10)
+                      : "no actions",
+                  });
+                }
+                if (editorActions) {
+                  editorActions.set_active_id(frameId, false);
+                  if (DEBUG) {
+                    console.log("Called set_active_id with:", {
+                      frameId,
+                      ignoreIfMissing: false,
+                    });
+                  }
+                } else if (DEBUG) {
+                  console.log("No editorActions found!");
+                }
+              } else if (DEBUG) {
+                console.log("Frame action missing required params:", {
+                  hasId: !!navData.id,
+                  hasProjectId: !!project_id,
+                });
+              }
+            };
+            break;
+
+          case "page":
+            // Switch to project page (fixed tab)
+            navData.action = () => {
+              if (navData.id && navData.projectId) {
+                // If switching to a different project, activate it first
+                if (navData.projectId !== project_id) {
+                  page_actions?.set_active_tab(navData.projectId);
+                }
+                // Then switch to the desired tab within the project
+                const projectActions = redux.getProjectActions(
+                  navData.projectId,
+                );
+                if (projectActions) {
+                  projectActions.set_active_tab(navData.id);
+                }
+              }
+            };
+            break;
+
+          case "file":
+            // Open file in editor
+            // open_file automatically handles switching to the file tab and setting active project
+            navData.action = () => {
+              if (navData.id && navData.projectId) {
+                const filePath = navData.id;
+                const projectId = navData.projectId;
+
+                // If switching to a different project, activate it first
+                if (projectId !== project_id) {
+                  page_actions?.set_active_tab(projectId);
+                }
+
+                // Open the file (automatically sets active tab and project)
+                const projectActions = redux.getProjectActions(projectId);
+                if (projectActions) {
+                  projectActions.open_file({ path: filePath });
+                }
+              }
+            };
+            break;
+
+          case "account":
+            // Navigate to account page via Redux actions (mirrors account-page.tsx structure)
+            navData.action = () => {
+              if (navData.id) {
+                const accountActions = redux.getActions("account");
+
+                // Handle settings overview (index)
+                if (navData.id === "index") {
+                  accountActions.set_active_tab("index");
+                  accountActions.setState({
+                    active_page: "index",
+                    active_sub_tab: undefined,
+                  });
+                  accountActions.push_state(`/settings/index`);
+                  return;
+                }
+
+                // Handle profile as standalone page
+                if (navData.id === "profile") {
+                  accountActions.set_active_tab("profile");
+                  accountActions.setState({
+                    active_page: "profile",
+                    active_sub_tab: undefined,
+                  });
+                  accountActions.push_state(`/profile`);
+                  return;
+                }
+
+                // Handle preferences sub-tabs
+                if (navData.id.startsWith("preferences-")) {
+                  const subTab = navData.id.replace("preferences-", "");
+                  const subTabKey = `preferences-${subTab}` as any;
+                  // Use set_active_tab to ensure proper page navigation
+                  accountActions.set_active_tab("preferences");
+                  accountActions.setState({
+                    active_sub_tab: subTabKey,
+                    active_page: "preferences",
+                  });
+                  accountActions.push_state(`/preferences/${subTab}`);
+                  return;
+                }
+
+                // Handle all other account pages (subscriptions, licenses, payg, etc.)
+                // These use set_active_tab which is the standard account page action
+                accountActions.set_active_tab(navData.id);
+                accountActions.push_state(`/${navData.id}`);
+              }
+            };
+            break;
+
+          case "bookmarked-project":
+            // Open a bookmarked project (not currently open)
+            navData.action = () => {
+              if (navData.projectId) {
+                const projectsActions = redux.getActions("projects");
+                projectsActions.open_project({
+                  project_id: navData.projectId,
+                  switch_to: true,
+                });
+              }
+            };
+            break;
+
+          default:
+            unreachable(navData.type);
+        }
+      }
+
+      // Recursively enhance children
+      if (node.children) {
+        node.children = node.children.map(enhanceNode);
+      }
+
+      return node;
+    };
+
+    return treeData.map(enhanceNode);
+  }, [treeData, project_id, page_actions]);
+
+  return enhancedTreeData;
+}
diff --git a/src/packages/frontend/app/i18n-banner.tsx b/src/packages/frontend/app/i18n-banner.tsx
index 9776c1bd9d4..3acab95a39d 100644
--- a/src/packages/frontend/app/i18n-banner.tsx
+++ b/src/packages/frontend/app/i18n-banner.tsx
@@ -87,7 +87,12 @@ export const I18NBanner: React.FC<{}> = () => {
   if (!loaded) return;
 
   return (
-    <div style={I18N_BANNER_STYLE}>
+    <div
+      role="region"
+      aria-label="Language selection"
+      aria-live="polite"
+      style={I18N_BANNER_STYLE}
+    >
       <Text strong>
         <Icon name={"translation-outlined"} /> Use <SiteName /> in a different
         language:
diff --git a/src/packages/frontend/app/insecure-test-mode-banner.tsx b/src/packages/frontend/app/insecure-test-mode-banner.tsx
index c563bcc77d5..2670fc2ee89 100644
--- a/src/packages/frontend/app/insecure-test-mode-banner.tsx
+++ b/src/packages/frontend/app/insecure-test-mode-banner.tsx
@@ -7,6 +7,9 @@ export default function InsecureTestModeBanner() {
       banner
       type="warning"
       showIcon
+      role="region"
+      aria-label="Test mode warning"
+      aria-live="assertive"
       style={{ background: "darkred", color: "white" }}
       message={
         <div style={{ textAlign: "center" }}>
diff --git a/src/packages/frontend/app/nav-tab.tsx b/src/packages/frontend/app/nav-tab.tsx
index e5696af7166..a7ca6d8de52 100644
--- a/src/packages/frontend/app/nav-tab.tsx
+++ b/src/packages/frontend/app/nav-tab.tsx
@@ -9,6 +9,7 @@ import { CSS, React, useActions } from "@cocalc/frontend/app-framework";
 import { Icon, IconName } from "@cocalc/frontend/components";
 import track from "@cocalc/frontend/user-tracking";
 import { COLORS } from "@cocalc/util/theme";
+import { ariaKeyDown } from "./aria";
 import { TOP_BAR_ELEMENT_CLASS } from "./top-nav-consts";
 
 const ACTIVE_BG_COLOR = COLORS.TOP_BAR.ACTIVE;
@@ -27,6 +28,9 @@ interface Props {
   on_click?: () => void;
   style?: CSS;
   tooltip?: string;
+  // ARIA attributes for tab semantics
+  role?: string;
+  "aria-label"?: string;
 }
 
 export const NavTab: React.FC<Props> = React.memo((props: Props) => {
@@ -140,6 +144,10 @@ export const NavTab: React.FC<Props> = React.memo((props: Props) => {
   return (
     <div
       onClick={onClick}
+      onKeyDown={ariaKeyDown(onClick)}
+      role={props.role ?? "button"}
+      aria-label={props["aria-label"]}
+      tabIndex={0}
       style={outer_style}
       className={TOP_BAR_ELEMENT_CLASS}
     >
diff --git a/src/packages/frontend/app/notifications.tsx b/src/packages/frontend/app/notifications.tsx
index e0de6e552c7..d28ba0925af 100644
--- a/src/packages/frontend/app/notifications.tsx
+++ b/src/packages/frontend/app/notifications.tsx
@@ -16,6 +16,7 @@ import { Icon } from "@cocalc/frontend/components";
 import { unreachable } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import track from "@cocalc/frontend/user-tracking";
+import { ariaKeyDown } from "./aria";
 import { PageStyle, TOP_BAR_ELEMENT_CLASS } from "./top-nav-consts";
 import { blur_active_element } from "./util";
 import { useEffect, useMemo } from "react";
@@ -148,8 +149,29 @@ export const Notification: React.FC<Props> = React.memo((props: Props) => {
 
   const className = TOP_BAR_ELEMENT_CLASS + (active ? " active" : "");
 
+  const getAriaLabel = (): string => {
+    switch (type) {
+      case "bell":
+        return `File use notifications: ${count} new`;
+      case "notifications":
+        return `Messages and mentions: ${unread_message_count} unread messages, ${count} mentions, ${news_unread} news items`;
+      default:
+        unreachable(type);
+        return "";
+    }
+  };
+
   return (
-    <div style={outer_style} onClick={onClick} className={className}>
+    <div
+      role="button"
+      aria-label={getAriaLabel()}
+      aria-live="polite"
+      tabIndex={0}
+      style={outer_style}
+      onClick={onClick}
+      onKeyDown={ariaKeyDown(onClick)}
+      className={className}
+    >
       <div style={inner_style}>{renderBadge()}</div>
     </div>
   );
diff --git a/src/packages/frontend/app/page.tsx b/src/packages/frontend/app/page.tsx
index fb8d2881e66..039e46d8a3c 100644
--- a/src/packages/frontend/app/page.tsx
+++ b/src/packages/frontend/app/page.tsx
@@ -8,8 +8,6 @@ This defines the entire **desktop** Cocalc page layout and brings in
 everything on *desktop*, once the user has signed in.
 */
 
-declare var DEBUG: boolean;
-
 import type { IconName } from "@cocalc/frontend/components/icon";
 
 import { Spin } from "antd";
@@ -28,6 +26,11 @@ import {
 } from "@cocalc/frontend/app-framework";
 import { ClientContext } from "@cocalc/frontend/client/context";
 import { Icon } from "@cocalc/frontend/components/icon";
+import {
+  GlobalHotkeyDetector,
+  QuickNavigationDialog,
+  useEnhancedNavigationTreeData,
+} from "@cocalc/frontend/app/hotkey";
 import Next from "@cocalc/frontend/components/next";
 import { FileUsePage } from "@cocalc/frontend/file-use/page";
 import { labels } from "@cocalc/frontend/i18n";
@@ -81,7 +84,7 @@ const PAGE_STYLE: CSS = {
 export const Page: React.FC = () => {
   const page_actions = useActions("page");
 
-  const { pageStyle } = useAppContext();
+  const { pageStyle, blockShiftShiftHotkey } = useAppContext();
   const { isNarrow, fileUseStyle, topBarStyle, projectsNavStyle } = pageStyle;
 
   const intl = useIntl();
@@ -114,6 +117,24 @@ export const Page: React.FC = () => {
   const local_storage_warning = useTypedRedux("page", "local_storage_warning");
   const cookie_warning = useTypedRedux("page", "cookie_warning");
 
+  // Quick Navigation (hotkey navigation)
+  const other_settings = useTypedRedux("account", "other_settings");
+  const quick_nav_hotkey:
+    | "shift+shift"
+    | "alt+shift+h"
+    | "alt+shift+space"
+    | "disabled" =
+    (other_settings?.get("quick_nav_hotkey") as unknown as
+      | "shift+shift"
+      | "alt+shift+h"
+      | "alt+shift+space"
+      | "disabled"
+      | null) ?? "shift+shift"; // Default: shift+shift
+  const quick_nav_hotkey_delay =
+    other_settings?.get("quick_nav_hotkey_delay") ?? 300; // Default: 300ms
+  const [quick_nav_visible, setQuickNavVisible] = useState<boolean>(false);
+  const quick_nav_tree_data = useEnhancedNavigationTreeData();
+
   const accountIsReady = useTypedRedux("account", "is_ready");
   const account_id = useTypedRedux("account", "account_id");
   const is_logged_in = useTypedRedux("account", "is_logged_in");
@@ -289,6 +310,8 @@ export const Page: React.FC = () => {
     return (
       <div
         className="smc-right-tabs-fixed"
+        role="region"
+        aria-label="Top navigation controls"
         style={{
           display: "flex",
           flex: "0 0 auto",
@@ -341,9 +364,6 @@ export const Page: React.FC = () => {
   // TEST: make sure that usual drag'n'drop activities
   // like rearranging tabs and reordering tasks work
   function drop(e) {
-    if (DEBUG) {
-      e.persist();
-    }
     //console.log "react desktop_app.drop", e
     e.preventDefault();
     e.stopPropagation();
@@ -359,6 +379,7 @@ export const Page: React.FC = () => {
 
   // Children must define their own padding from navbar and screen borders
   // Note that the parent is a flex container
+  // ARIA: content container (main landmarks are defined at the page level below)
   const body = (
     <div
       style={PAGE_STYLE}
@@ -378,7 +399,11 @@ export const Page: React.FC = () => {
       {show_i18n && <I18NBanner />}
       <VerifyEmail />
       {!fullscreen && (
-        <nav className="smc-top-bar" style={topBarStyle}>
+        <nav
+          className="smc-top-bar"
+          style={topBarStyle}
+          aria-label="Main navigation"
+        >
           <AppLogo size={pageStyle.height} />
           {is_logged_in && render_project_nav_button()}
           {!isNarrow ? (
@@ -398,10 +423,25 @@ export const Page: React.FC = () => {
       <PayAsYouGoModal />
       <PopconfirmModal />
       <SettingsModal />
+      <QuickNavigationDialog
+        visible={quick_nav_visible}
+        onClose={() => setQuickNavVisible(false)}
+        treeData={quick_nav_tree_data}
+      />
     </div>
   );
   return (
     <ClientContext.Provider value={{ client: webapp_client }}>
+      {is_logged_in && (
+        <GlobalHotkeyDetector
+          hotkey={quick_nav_hotkey}
+          onTriggered={() => {
+            setQuickNavVisible(true);
+          }}
+          delayMs={quick_nav_hotkey_delay}
+          blocked={blockShiftShiftHotkey ?? false}
+        />
+      )}
       {body}
     </ClientContext.Provider>
   );
diff --git a/src/packages/frontend/app/use-context.ts b/src/packages/frontend/app/use-context.ts
index 0d17e4161bd..d24c1008703 100644
--- a/src/packages/frontend/app/use-context.ts
+++ b/src/packages/frontend/app/use-context.ts
@@ -30,9 +30,11 @@ export interface AppState {
   timeAgoAbsolute?: boolean;
   setTimeAgoAbsolute?: (boolean) => void;
   showActBarLabels?: boolean; // whether to show labels on the vertical fixed bar
+  blockShiftShiftHotkey: boolean; // temporarily block shift+shift hotkey (e.g., during testing)
+  setBlockShiftShiftHotkey?: (block: boolean) => void;
 }
 
-export const DEFAULT_CONTEXT = {
+export const DEFAULT_CONTEXT: AppState = {
   pageWidthPx: 1000, // gets updated
   pageStyle: calcStyle(false), // gets updated
   formatIntl: () => "Loading…",
@@ -44,6 +46,7 @@ export const DEFAULT_CONTEXT = {
     return label;
   },
   showActBarLabels: ACTIVITY_BAR_LABELS_DEFAULT,
+  blockShiftShiftHotkey: false,
 };
 
 export const AppContext = createContext<AppState>(DEFAULT_CONTEXT);
diff --git a/src/packages/frontend/app/verify-email-banner.tsx b/src/packages/frontend/app/verify-email-banner.tsx
index 17c04162212..67701884627 100644
--- a/src/packages/frontend/app/verify-email-banner.tsx
+++ b/src/packages/frontend/app/verify-email-banner.tsx
@@ -168,6 +168,7 @@ function VerifyEmailModal({
       open={true}
       onCancel={() => doDismiss()}
       footer={renderFooter()}
+      aria-label="Email verification required"
     >
       {renderBanner()}
     </Modal>
diff --git a/src/packages/frontend/app/version-warning.tsx b/src/packages/frontend/app/version-warning.tsx
index 350423285b8..ba653092d51 100644
--- a/src/packages/frontend/app/version-warning.tsx
+++ b/src/packages/frontend/app/version-warning.tsx
@@ -9,7 +9,7 @@ import { type CSSProperties, useEffect, useState } from "react";
 import { version } from "@cocalc/util/smc-version";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
 
-const VERSION_WARNING_STYLE = {
+const VERSION_WARNING_STYLE: CSSProperties = {
   fontSize: "12pt",
   position: "fixed",
   left: 12,
@@ -22,7 +22,7 @@ const VERSION_WARNING_STYLE = {
   boxShadow: "8px 8px 4px #888",
   width: "70%",
   marginTop: "1em",
-} as CSSProperties;
+} as const;
 
 export default function VersionWarning() {
   const [closed, setClosed] = useState<boolean>(false);
@@ -34,7 +34,7 @@ export default function VersionWarning() {
 
   useEffect(() => {
     if (minVersion > version) {
-      // immediately and permenantly disconnect user from conat
+      // immediately and permanently disconnect user from conat
       webapp_client.conat_client.permanentlyDisconnect();
     }
   }, [minVersion]);
@@ -112,7 +112,12 @@ export default function VersionWarning() {
   }
 
   return (
-    <div style={style}>
+    <div
+      role="region"
+      aria-label="Version warning"
+      aria-live={version < minVersion ? "assertive" : "polite"}
+      style={style}
+    >
       {render_suggested()}
       {render_critical()}
     </div>
diff --git a/src/packages/frontend/app/warnings.tsx b/src/packages/frontend/app/warnings.tsx
index c11a7cbc44e..ff38875da12 100644
--- a/src/packages/frontend/app/warnings.tsx
+++ b/src/packages/frontend/app/warnings.tsx
@@ -25,7 +25,12 @@ const WARNING_STYLE = {
 
 export function CookieWarning() {
   return (
-    <div style={WARNING_STYLE}>
+    <div
+      role="region"
+      aria-label="Cookie warning"
+      aria-live="assertive"
+      style={WARNING_STYLE}
+    >
       <Icon name="warning" /> You <em>must</em> enable cookies to use{" "}
       <SiteName />.
     </div>
@@ -39,7 +44,12 @@ const STORAGE_WARNING_STYLE = {
 
 export function LocalStorageWarning() {
   return (
-    <div style={STORAGE_WARNING_STYLE}>
+    <div
+      role="region"
+      aria-label="Local storage warning"
+      aria-live="assertive"
+      style={STORAGE_WARNING_STYLE}
+    >
       <Icon name="warning" /> You <em>must</em> enable local storage to use{" "}
       <SiteName />
       {get_browser() === "safari"
diff --git a/src/packages/frontend/components/activity-display.tsx b/src/packages/frontend/components/activity-display.tsx
index d105bf9e3b8..399e6abf8a4 100644
--- a/src/packages/frontend/components/activity-display.tsx
+++ b/src/packages/frontend/components/activity-display.tsx
@@ -3,12 +3,16 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { CSS, React } from "../app-framework";
-import { is_different_array, len, trunc as trunc_string } from "@cocalc/util/misc";
+import { CSS, React } from "@cocalc/frontend/app-framework";
+import {
+  is_different_array,
+  len,
+  trunc as trunc_string,
+} from "@cocalc/util/misc";
 import { Icon } from "./icon";
 import { CloseX } from "./close-x";
 
-const ACTIVITY_STYLE = {
+const ACTIVITY_STYLE: CSS = {
   float: "right",
   backgroundColor: "white",
   position: "absolute",
@@ -19,13 +23,13 @@ const ACTIVITY_STYLE = {
   zIndex: 10,
   borderRadius: "5px",
   boxShadow: "3px 3px 3px #ccc",
-} as CSS;
+} as const;
 
-const ACTIVITY_ITEM_STYLE = {
+const ACTIVITY_ITEM_STYLE: CSS = {
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis",
-} as CSS;
+} as const;
 
 interface Props {
   activity: string[]; // only changing this causes re-render
@@ -62,5 +66,5 @@ export const ActivityDisplay: React.FC<Props> = React.memo(
       return <></>;
     }
   },
-  (prev, next) => !is_different_array(prev.activity, next.activity)
+  (prev, next) => !is_different_array(prev.activity, next.activity),
 );
diff --git a/src/packages/frontend/components/close-x.tsx b/src/packages/frontend/components/close-x.tsx
index ced37faf9a3..1151cdcc755 100644
--- a/src/packages/frontend/components/close-x.tsx
+++ b/src/packages/frontend/components/close-x.tsx
@@ -9,6 +9,10 @@ import { Icon } from "./icon";
 const closex_style: React.CSSProperties = {
   float: "right",
   marginLeft: "5px",
+  border: "none",
+  background: "transparent",
+  padding: 0,
+  cursor: "pointer",
 } as const;
 
 interface Props {
@@ -25,8 +29,13 @@ export const CloseX: React.FC<Props> = (props: Props) => {
   }
 
   return (
-    <a href="" style={{ ...closex_style, ...style }} onClick={onClick}>
+    <button
+      type="button"
+      style={{ ...closex_style, ...style }}
+      onClick={onClick}
+      aria-label="Close"
+    >
       <Icon name="times" />
-    </a>
+    </button>
   );
 };
diff --git a/src/packages/frontend/components/close-x2.tsx b/src/packages/frontend/components/close-x2.tsx
index 81351e4a4ac..f8df9a6d50d 100644
--- a/src/packages/frontend/components/close-x2.tsx
+++ b/src/packages/frontend/components/close-x2.tsx
@@ -15,6 +15,9 @@ interface Props {
 const DEFAULT_STYLE: CSS = {
   cursor: "pointer",
   fontSize: "13pt",
+  border: "none",
+  background: "transparent",
+  padding: 0,
 };
 
 function isSame(prev, next) {
@@ -31,9 +34,15 @@ export const CloseX2: React.FC<Props> = React.memo((props: Props) => {
     return null;
   } else {
     return (
-      <div className={"pull-right lighten"} style={style} onClick={close}>
+      <button
+        type="button"
+        className={"pull-right lighten"}
+        style={style}
+        onClick={close}
+        aria-label="Close"
+      >
         <Icon name={"times"} />
-      </div>
+      </button>
     );
   }
 }, isSame);
diff --git a/src/packages/frontend/components/copy-button.tsx b/src/packages/frontend/components/copy-button.tsx
index 26d7abd38cf..2a9919d9926 100644
--- a/src/packages/frontend/components/copy-button.tsx
+++ b/src/packages/frontend/components/copy-button.tsx
@@ -31,6 +31,8 @@ export default function CopyButton({
         type="text"
         style={style}
         onClick={(e) => e.stopPropagation()}
+        aria-label={copied ? "Copied" : "Copy to clipboard"}
+        aria-live="polite"
       >
         <Icon name={copied ? "check" : "copy"} />
         {noText ? undefined : copied ? "Copied" : "Copy"}
diff --git a/src/packages/frontend/components/date-time-picker.tsx b/src/packages/frontend/components/date-time-picker.tsx
index 53f2f91c86b..2a1230c5fa2 100644
--- a/src/packages/frontend/components/date-time-picker.tsx
+++ b/src/packages/frontend/components/date-time-picker.tsx
@@ -45,6 +45,8 @@ export function DateTimePicker(props: Props) {
     placeholder,
     onChange: onChange,
     style,
+    "aria-label": placeholder ?? "Select date and time",
+    "aria-describedby": "date-format-help",
   };
 
   if (open != null) {
diff --git a/src/packages/frontend/components/dropdown-menu.tsx b/src/packages/frontend/components/dropdown-menu.tsx
index 82836420b8b..23cfedc8e71 100644
--- a/src/packages/frontend/components/dropdown-menu.tsx
+++ b/src/packages/frontend/components/dropdown-menu.tsx
@@ -77,6 +77,9 @@ export function DropdownMenu({
       id={id}
       size={size}
       type={button ? undefined : "text"}
+      aria-label={
+        typeof title === "string" ? `${title} menu` : title ? `menu` : "menu"
+      }
     >
       {title ? (
         <>
@@ -94,6 +97,10 @@ export function DropdownMenu({
   }
 
   const handleMenuClick: MenuProps["onClick"] = (e) => {
+    // Prevent event bubbling from menu clicks
+    e?.domEvent?.stopPropagation?.();
+    e?.domEvent?.preventDefault?.();
+
     if (e.key?.includes(STAY_OPEN_ON_CLICK)) {
       setOpen(true);
     } else {
diff --git a/src/packages/frontend/components/icon.tsx b/src/packages/frontend/components/icon.tsx
index c627c3193ac..76ab883d3b5 100644
--- a/src/packages/frontend/components/icon.tsx
+++ b/src/packages/frontend/components/icon.tsx
@@ -729,6 +729,15 @@ interface Props {
   onMouseOut?: () => void;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  // ARIA attributes for accessibility
+  role?: string;
+  "aria-label"?: string;
+  "aria-expanded"?: boolean;
+  "aria-pressed"?: boolean;
+  "aria-live"?: "polite" | "assertive" | "off";
+  "aria-atomic"?: boolean;
+  tabIndex?: number;
 }
 
 const UNICODE_STYLE = {
@@ -765,7 +774,22 @@ export const Icon: React.FC<Props> = (props: Props) => {
     }
 
     return (
-      <span style={style}>
+      <span
+        style={style}
+        role={props.role}
+        aria-label={props["aria-label"]}
+        aria-expanded={props["aria-expanded"]}
+        aria-pressed={props["aria-pressed"]}
+        aria-live={props["aria-live"]}
+        aria-atomic={props["aria-atomic"]}
+        tabIndex={props.tabIndex}
+        onClick={props.onClick}
+        onKeyDown={props.onKeyDown}
+        onMouseOver={props.onMouseOver}
+        onMouseOut={props.onMouseOut}
+        onMouseEnter={props.onMouseEnter}
+        onMouseLeave={props.onMouseLeave}
+      >
         {String.fromCharCode(props.unicode!)}
       </span>
     );
@@ -780,14 +804,31 @@ export const Icon: React.FC<Props> = (props: Props) => {
     C = IconSpec[name.slice(0, name.length - 2)];
   }
   if (C != null) {
+    const ariaProps = {
+      role: props.role,
+      "aria-label": props["aria-label"],
+      "aria-expanded": props["aria-expanded"],
+      "aria-pressed": props["aria-pressed"],
+      "aria-live": props["aria-live"],
+      "aria-atomic": props["aria-atomic"],
+      tabIndex: props.tabIndex,
+      onKeyDown: props.onKeyDown,
+    };
     if (typeof C.IconFont == "string") {
       // @ts-ignore
       if (IconFont == null) {
         return <span>(IconFonts not available)</span>;
       }
-      return <IconFont type={"icon-" + C.IconFont} {...props} alt={name} />;
+      return (
+        <IconFont
+          type={"icon-" + C.IconFont}
+          {...props}
+          {...ariaProps}
+          alt={name}
+        />
+      );
     }
-    return <C {...props} alt={name} />;
+    return <C {...props} {...ariaProps} alt={name} />;
   }
 
   // this is when the icon is broken.
diff --git a/src/packages/frontend/components/mark-all.tsx b/src/packages/frontend/components/mark-all.tsx
index 735ad812e28..ac3f510dc60 100644
--- a/src/packages/frontend/components/mark-all.tsx
+++ b/src/packages/frontend/components/mark-all.tsx
@@ -36,6 +36,7 @@ export function MarkAll({ how, onClick, size }: Props) {
         onClick(how);
       }}
       size={size}
+      aria-label={`Mark all items as ${capitalize(how)}`}
     >
       <>
         {icon()} Mark all {capitalize(how)}
diff --git a/src/packages/frontend/components/number-input.tsx b/src/packages/frontend/components/number-input.tsx
index 5a9739c3cc6..d9791cf3609 100644
--- a/src/packages/frontend/components/number-input.tsx
+++ b/src/packages/frontend/components/number-input.tsx
@@ -54,6 +54,12 @@ export function NumberInput(props: Props) {
             }
           }}
           disabled={props.disabled}
+          aria-label={`Enter number${props.unit ? ` in ${props.unit}` : ""}`}
+          aria-describedby={
+            props.min != null || props.max != null
+              ? "number-input-constraints"
+              : undefined
+          }
         />
       </Col>
       <Col xs={8} className="lighten">
diff --git a/src/packages/frontend/components/refresh.tsx b/src/packages/frontend/components/refresh.tsx
index 4ae3d7f2826..43b30ac0b05 100644
--- a/src/packages/frontend/components/refresh.tsx
+++ b/src/packages/frontend/components/refresh.tsx
@@ -59,6 +59,8 @@ function Controlled({ refresh, style, refreshing, setRefreshing }) {
           }
         }}
         style={style}
+        aria-label="Refresh"
+        aria-busy={refreshing}
       >
         <Icon name="refresh" spin={refreshing} /> Refresh
       </Button>
diff --git a/src/packages/frontend/components/search-input.tsx b/src/packages/frontend/components/search-input.tsx
index e3839ca547b..67be4de4dba 100644
--- a/src/packages/frontend/components/search-input.tsx
+++ b/src/packages/frontend/components/search-input.tsx
@@ -61,9 +61,9 @@ export const SearchInput: React.FC<Props> = React.memo((props) => {
   }, []);
 
   useEffect(() => {
-    if (focus == null) return;
+    if (props.focus == null) return;
     input_ref.current?.focus();
-  }, [focus]);
+  }, [props.focus]);
 
   function get_opts(): { ctrl_down: boolean; shift_down: boolean } {
     return { ctrl_down, shift_down };
@@ -149,6 +149,8 @@ export const SearchInput: React.FC<Props> = React.memo((props) => {
       disabled={props.disabled}
       enterButton={props.buttonAfter}
       status={props.status}
+      aria-label="Search"
+      aria-describedby="search-help"
     />
   );
 });
diff --git a/src/packages/frontend/components/setting-box.tsx b/src/packages/frontend/components/setting-box.tsx
index 396a5792f9e..3e2287aee9e 100644
--- a/src/packages/frontend/components/setting-box.tsx
+++ b/src/packages/frontend/components/setting-box.tsx
@@ -20,11 +20,13 @@ interface Props {
   children?: ReactNode;
   style?: CSSProperties;
   bodyStyle?: CSSProperties;
+  role?: string;
+  "aria-label"?: string;
 }
 
-const STYLE = {
+const STYLE: CSSProperties = {
   marginBottom: "20px",
-} as CSSProperties;
+} as const;
 
 export function SettingBox({
   icon,
@@ -35,6 +37,8 @@ export function SettingBox({
   children,
   style,
   bodyStyle,
+  role,
+  "aria-label": ariaLabel,
 }: Props) {
   return (
     // type inner for the gray background in the header
@@ -54,6 +58,8 @@ export function SettingBox({
       type="inner"
       style={{ ...STYLE, ...style }}
       styles={{ body: bodyStyle }}
+      role={role}
+      aria-label={ariaLabel}
     >
       {children}
     </Card>
diff --git a/src/packages/frontend/components/sortable-tabs.tsx b/src/packages/frontend/components/sortable-tabs.tsx
index 63eb733dab5..3723ba4cab7 100644
--- a/src/packages/frontend/components/sortable-tabs.tsx
+++ b/src/packages/frontend/components/sortable-tabs.tsx
@@ -30,6 +30,8 @@ import {
 } from "react";
 import useResizeObserver from "use-resize-observer";
 
+import { ariaKeyDown } from "@cocalc/frontend/app/aria";
+
 export { useSortable };
 
 interface Props {
@@ -130,9 +132,22 @@ export function SortableTabs(props: Props) {
   );
 }
 
-export function SortableTab({ children, id, style }) {
+interface SortableTabProps {
+  children: React.ReactNode;
+  id: string | number;
+  style?: CSSProperties;
+  onKeyReturn?: () => void;
+}
+
+export function SortableTab({
+  children,
+  id,
+  style,
+  onKeyReturn,
+}: SortableTabProps) {
   const { attributes, listeners, setNodeRef, transform, transition, active } =
     useSortable({ id });
+
   return (
     <div
       ref={setNodeRef}
@@ -146,6 +161,7 @@ export function SortableTab({ children, id, style }) {
       }}
       {...attributes}
       {...listeners}
+      onKeyDown={onKeyReturn ? ariaKeyDown(onKeyReturn, false) : undefined}
     >
       {children}
     </div>
diff --git a/src/packages/frontend/components/text-input.tsx b/src/packages/frontend/components/text-input.tsx
index bfae57c5c30..661fd60c13e 100644
--- a/src/packages/frontend/components/text-input.tsx
+++ b/src/packages/frontend/components/text-input.tsx
@@ -66,6 +66,7 @@ export const TextInput: React.FC<Props> = React.memo(
               type="primary"
               onClick={saveChange}
               size={size}
+              aria-label="Save changes"
             >
               <Icon name="save" /> Save
             </Button>
@@ -89,6 +90,7 @@ export const TextInput: React.FC<Props> = React.memo(
             onBlur={onBlur}
             disabled={disabled}
             size={size === "small" ? "small" : undefined}
+            aria-label={type === "textarea" ? "Text area" : "Text input"}
           />
         </Form.Item>
       );
diff --git a/src/packages/frontend/frame-editors/_style.sass b/src/packages/frontend/frame-editors/_style.sass
index 666de1427e1..bfc172c74d8 100644
--- a/src/packages/frontend/frame-editors/_style.sass
+++ b/src/packages/frontend/frame-editors/_style.sass
@@ -3,6 +3,8 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+@use '../colors'
+
 // make buttons and button-groups wrap with a larger vertical space (not 0 px)
 .cc-frame-tree-title-bar-buttons
 
@@ -64,3 +66,27 @@
     &:not(.ant-tabs-tabpane-hidden)
       display: flex
       flex-direction: column
+
+// Frame Editor Focus Styles
+// Provides visual feedback for ARIA keyboard navigation through frame editors
+// and the main content landmark.
+
+// Main content landmark focus indicator
+[role="main"][tabindex="0"]:focus-visible
+  outline: 2px solid colors.$COL_ANTD_LINK_BLUE
+  outline-offset: 2px
+
+// Frame editor focus when navigating with keyboard (Tab, Return)
+.smc-vfill:focus-visible
+  // Provide a subtle focus indicator without obscuring content
+  box-shadow: inset 0 0 0 2px colors.$COL_ANTD_LINK_BLUE
+
+// Frame editor active state (highlighted during keyboard navigation)
+.frame-editor-active:focus-visible
+  box-shadow: inset 0 0 0 2px colors.$COL_ANTD_LINK_BLUE
+  background-color: colors.$COL_ANTD_BG_BLUE_L
+
+// Content region while focused via landmark navigation
+div[role="main"]:focus
+  outline: 2px solid colors.$COL_ANTD_LINK_BLUE
+  outline-offset: 2px
diff --git a/src/packages/frontend/frame-editors/code-editor/codemirror-editor.tsx b/src/packages/frontend/frame-editors/code-editor/codemirror-editor.tsx
index ec777df6543..0fd3245159a 100644
--- a/src/packages/frontend/frame-editors/code-editor/codemirror-editor.tsx
+++ b/src/packages/frontend/frame-editors/code-editor/codemirror-editor.tsx
@@ -483,7 +483,12 @@ export const CodemirrorEditor: React.FC<Props> = React.memo((props: Props) => {
   }
 
   return (
-    <div className="smc-vfill cocalc-editor-div" ref={divRef}>
+    <div
+      className="smc-vfill cocalc-editor-div"
+      ref={divRef}
+      role="region"
+      aria-label={`Editor: ${props.path}`}
+    >
       <Path
         project_id={props.project_id}
         path={props.path}
diff --git a/src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx b/src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx
index 6f6b524bf22..cd889d4f289 100644
--- a/src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx
+++ b/src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx
@@ -10,6 +10,7 @@ import { debounce } from "lodash";
 import { useEffect, useRef } from "react";
 import { defineMessage, IntlShape, useIntl } from "react-intl";
 
+import { useAutoFocusPreference } from "@cocalc/frontend/account";
 import { set_account_table } from "@cocalc/frontend/account/util";
 import { redux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
@@ -1578,6 +1579,7 @@ function fileAction(action) {
 
 function SearchBox({ setHelpSearch, helpSearch }) {
   const intl = useIntl();
+  const shouldAutoFocus = useAutoFocusPreference();
   const didFocus = useRef<boolean>(false);
 
   useEffect(() => {
@@ -1591,7 +1593,7 @@ function SearchBox({ setHelpSearch, helpSearch }) {
 
   return (
     <Input.Search
-      autoFocus
+      autoFocus={shouldAutoFocus}
       placeholder={intl.formatMessage(labels.search)}
       allowClear
       value={helpSearch}
diff --git a/src/packages/frontend/frame-editors/frame-tree/commands/manage.tsx b/src/packages/frontend/frame-editors/frame-tree/commands/manage.tsx
index 5e100c58ed1..725424f14de 100644
--- a/src/packages/frontend/frame-editors/frame-tree/commands/manage.tsx
+++ b/src/packages/frontend/frame-editors/frame-tree/commands/manage.tsx
@@ -539,6 +539,10 @@ export class ManageCommands {
       );
     }
     const onClick = async (event) => {
+      // Prevent event bubbling from menu item clicks
+      event?.stopPropagation?.();
+      event?.preventDefault?.();
+
       let { popconfirm } = cmd;
       if (popconfirm != null) {
         if (typeof popconfirm === "function") {
diff --git a/src/packages/frontend/frame-editors/frame-tree/editor.tsx b/src/packages/frontend/frame-editors/frame-tree/editor.tsx
index 3cd75739f87..ee3df0ef711 100644
--- a/src/packages/frontend/frame-editors/frame-tree/editor.tsx
+++ b/src/packages/frontend/frame-editors/frame-tree/editor.tsx
@@ -200,7 +200,12 @@ const FrameTreeEditor: React.FC<FrameTreeEditorProps> = React.memo(
     }
 
     return (
-      <div className="smc-vfill cc-frame-tree-editor" ref={frameRootRef}>
+      <div
+        className="smc-vfill cc-frame-tree-editor"
+        ref={frameRootRef}
+        role="application"
+        aria-label={`${editor_spec.name || name} editor for ${path}`}
+      >
         {formatError && (
           <FormatError formatError={formatError} formatInput={formatInput} />
         )}
diff --git a/src/packages/frontend/frame-editors/frame-tree/frame-tree.tsx b/src/packages/frontend/frame-editors/frame-tree/frame-tree.tsx
index 5ec6cc9c032..24e85598e57 100644
--- a/src/packages/frontend/frame-editors/frame-tree/frame-tree.tsx
+++ b/src/packages/frontend/frame-editors/frame-tree/frame-tree.tsx
@@ -3,6 +3,8 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+// cSpell:ignore subframe
+
 /*
 FrameTree -- a binary tree of editor frames.
 
@@ -34,6 +36,7 @@ import React from "react";
 
 import { AccountState } from "@cocalc/frontend/account/types";
 import {
+  CSS,
   redux,
   Rendered,
   useEffect,
@@ -54,37 +57,37 @@ import * as tree_ops from "./tree-ops";
 import { EditorDescription, EditorSpec, EditorState, NodeDesc } from "./types";
 
 interface FrameTreeProps {
-  actions: Actions;
-  active_id: string;
-  available_features: AvailableFeatures;
-  complete: Map<string, any>;
-  cursors: Map<string, any>;
-  derived_file_types: Set<string>;
-  editor_settings: AccountState["editor_settings"];
-  editor_spec: EditorSpec;
+  actions: Actions; // The Actions object for dispatching state changes
+  active_id: string; // ID of the currently active frame
+  available_features: AvailableFeatures; // Which features are available based on project permissions
+  complete: Map<string, any>; // Completion data for autocomplete suggestions
+  cursors: Map<string, any>; // Other users' cursor positions for collaborative editing
+  derived_file_types: Set<string>; // Set of derived file types (related outputs)
+  editor_settings: AccountState["editor_settings"]; // Account-level editor preferences
+  editor_spec: EditorSpec; // Configuration/spec for the editor (defines capabilities, panels)
   editor_state: EditorState; // IMPORTANT: change does NOT cause re-render (uncontrolled); only used for full initial render, on purpose, i.e., setting scroll positions.
-  font_size: number;
-  frame_tree: Map<string, any>;
-  full_id: string;
-  has_uncommitted_changes: boolean;
-  has_unsaved_changes: boolean;
-  is_only: boolean;
-  is_public: boolean;
-  is_saving: boolean;
-  is_visible: boolean;
-  local_view_state: Map<string, any>;
-  misspelled_words: Set<string>;
+  font_size: number; // Current font size for the editor
+  frame_tree: Map<string, any>; // Binary tree structure defining frame splits and leaf nodes
+  full_id: string; // Unique identifier combining project and editor
+  has_uncommitted_changes: boolean; // File has changes not committed to database
+  has_unsaved_changes: boolean; // File has changes not saved to disk
+  is_only: boolean; // True if this is the only frame (no splits); use to show/hide split controls
+  is_public: boolean; // File is publicly accessible
+  is_saving: boolean; // Currently saving to disk
+  is_visible: boolean; // Editor tab is visible (not hidden)
+  local_view_state: Map<string, any>; // Local view state (scroll position, fold state, etc.)
+  misspelled_words: Set<string>; // Set of misspelled words for spellcheck
   name: string; // just so editors (leaf nodes) can plug into reduxProps if they need to.
   path: string; // assumed to never change -- all frames in same project
   project_id: string; // assumed to never change -- all frames in same project
   read_only: boolean; // if true, then whole document considered read only (individual frames can still be via desc)
-  reload: Map<string, number>;
+  reload: Map<string, number>; // Signals when frames should reload
   resize: number; // if changes, means that frames have been resized, so may need refreshing; passed to leaf.
-  settings: Map<string, any>;
-  status: string;
-  tab_is_visible: boolean;
+  settings: Map<string, any>; // Local editor-specific settings
+  status: string; // Editor status string (idle, syncing, etc.)
+  tab_is_visible: boolean; // Tab visibility state (same as is_visible)
   terminal?: Map<string, any>; // terminal settings from account
-  value?: string;
+  value?: string; // Document content
 }
 
 function shouldMemoize(prev, next) {
@@ -166,7 +169,7 @@ export const FrameTree: React.FC<FrameTreeProps> = React.memo(
       };
     }, []);
 
-    function render_frame_tree(desc) {
+    function render_frame_tree(desc: NodeDesc) {
       return (
         <FrameTree
           actions={actions}
@@ -390,25 +393,94 @@ export const FrameTree: React.FC<FrameTreeProps> = React.memo(
         reset_frame_tree();
         return <div>{mesg}</div>;
       }
+
+      function handleFrameKeyDown(e: React.KeyboardEvent) {
+        // Return/Enter: focus the editor content within this frame
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          const frameContainer = e.currentTarget as HTMLElement;
+
+          // Strategy 1: Look for active/focused contenteditable element (Jupyter cells, etc.)
+          let target = frameContainer.querySelector(
+            "[contenteditable='true']:not([contenteditable='false'])",
+          ) as HTMLElement;
+          if (target) {
+            target.focus();
+            return;
+          }
+
+          // Strategy 2: Look for CodeMirror editors (both v5 and v6)
+          target = frameContainer.querySelector(
+            ".cm-editor, .CodeMirror-code",
+          ) as HTMLElement;
+          if (target) {
+            target.focus();
+            return;
+          }
+
+          // Strategy 3: Look for input fields, textareas, or other interactive elements
+          // (excluding toolbar buttons by looking inside editor containers)
+          const editorContent = frameContainer.querySelector(
+            "[role='region'], .smc-vfill-container, .frame-content",
+          ) as HTMLElement;
+          if (editorContent) {
+            target = editorContent.querySelector(
+              "input, textarea, [tabindex]:not([tabindex='-1'])",
+            ) as HTMLElement;
+            if (target) {
+              target.focus();
+              return;
+            }
+          }
+
+          // Strategy 4: Focus any input/textarea in the frame
+          target = frameContainer.querySelector(
+            "input, textarea",
+          ) as HTMLElement;
+          if (target) {
+            target.focus();
+          }
+        }
+
+        // Tab/Shift+Tab: switch between frames
+        // This allows tabbing through split editors without using arrow keys
+        if (e.key === "Tab" && !e.ctrlKey && !e.metaKey) {
+          // Note: Tab behavior could be enhanced to move to next frame
+          // For now, we let native tab behavior work
+        }
+      }
+
+      const frameId = desc.get("id");
+      const isActive = active_id === frameId;
+
       return (
         <FrameContext.Provider
           value={{
-            id: desc.get("id"),
+            id: frameId,
             project_id,
             path,
             actions: editor_actions,
             desc,
             font_size: desc.get("font_size") ?? font_size,
-            isFocused: active_id == desc.get("id"),
+            isFocused: isActive,
             isVisible: tab_is_visible,
             redux,
           }}
         >
           <div
-            className={"smc-vfill"}
-            onClick={() => actions.set_active_id(desc.get("id"), true)}
-            onTouchStart={() => actions.set_active_id(desc.get("id"))}
-            style={spec != null ? spec.style : undefined}
+            className={`smc-vfill ${isActive ? "frame-editor-active" : ""}`}
+            onClick={() => actions.set_active_id(frameId, true)}
+            onTouchStart={() => actions.set_active_id(frameId)}
+            // Keyboard accessibility: all frames focusable via Tab/Shift+Tab navigation
+            // When a frame receives focus, it becomes the active frame
+            tabIndex={0}
+            onFocus={() => actions.set_active_id(frameId, false)}
+            onKeyDown={handleFrameKeyDown}
+            style={{
+              ...((spec != null ? spec.style : {}) as React.CSSProperties),
+              outline: "none", // Remove default outline; :focus-visible will handle it
+            }}
           >
             {render_titlebar(desc, spec, editor_actions)}
             {render_leaf(desc, component, spec, editor_actions)}
@@ -417,16 +489,20 @@ export const FrameTree: React.FC<FrameTreeProps> = React.memo(
       );
     }
 
-    function get_pos() {
-      let left;
-      let pos = (left = parseFloat(frame_tree.get("pos"))) != null ? left : 0.5;
-      if (isNaN(pos)) {
-        pos = 0.5;
-      }
-      return pos;
+    function get_pos(): number {
+      // Get the frame split position (0 to 1), defaulting to 0.5 (middle)
+      const pos = parseFloat(frame_tree.get("pos"));
+      return isNaN(pos) ? 0.5 : pos;
     }
 
-    function get_data(flex_direction) {
+    function get_data(flex_direction): {
+      pos: number;
+      first: NodeDesc;
+      style_first: CSS;
+      second: NodeDesc;
+      style_second: CSS;
+      outer_style: CSS;
+    } {
       const pos = get_pos();
       const data = {
         pos,
@@ -452,7 +528,13 @@ export const FrameTree: React.FC<FrameTreeProps> = React.memo(
     function render_cols() {
       const data = get_data("row");
       return (
-        <div ref={cols_container_ref} style={data.outer_style}>
+        // ARIA: region for vertical split editor frames
+        <div
+          ref={cols_container_ref}
+          style={data.outer_style}
+          role="region"
+          aria-label={`Vertical split: ${path}`}
+        >
           <div className={"smc-vfill"} style={data.style_first}>
             {render_one(data.first)}
           </div>
@@ -472,10 +554,13 @@ export const FrameTree: React.FC<FrameTreeProps> = React.memo(
     function render_rows() {
       const data = get_data("column");
       return (
+        // ARIA: region for horizontal split editor frames
         <div
           className={"smc-vfill"}
           ref={rows_container_ref}
           style={data.outer_style}
+          role="region"
+          aria-label={`Horizontal split: ${path}`}
         >
           <div className={"smc-vfill"} style={data.style_first}>
             {render_one(data.first)}
diff --git a/src/packages/frontend/frame-editors/frame-tree/status-bar.tsx b/src/packages/frontend/frame-editors/frame-tree/status-bar.tsx
index 94ff93bc16d..902a946e98b 100644
--- a/src/packages/frontend/frame-editors/frame-tree/status-bar.tsx
+++ b/src/packages/frontend/frame-editors/frame-tree/status-bar.tsx
@@ -13,9 +13,13 @@ This is basically used now as "ephemeral messages".
 */
 
 import { CSSProperties } from "react";
+
 import { Icon, Gap } from "@cocalc/frontend/components";
+import { ariaKeyDown } from "@cocalc/frontend/app/aria";
+
+type CSS = CSSProperties;
 
-const STYLE = {
+const STYLE: CSS = {
   opacity: 0.85,
   position: "fixed",
   bottom: "0px",
@@ -29,7 +33,7 @@ const STYLE = {
   fontSize: "9pt",
   background: "#fff",
   boxShadow: "-2px -2px 2px #ccc",
-} as CSSProperties;
+} as const;
 
 interface Props {
   status: string;
@@ -38,11 +42,21 @@ interface Props {
 
 export default function StatusBar({ status, onClear }: Props) {
   return (
-    <div style={STYLE}>
+    <div
+      style={STYLE}
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      aria-label={`Editor status: ${status}`}
+    >
       <Icon
         name="times"
         onClick={onClear}
         style={{ float: "right", marginTop: "2.5px" }}
+        role="button"
+        tabIndex={0}
+        aria-label="Clear status message"
+        onKeyDown={ariaKeyDown(onClear)}
       />
       {status}
       <Gap />
diff --git a/src/packages/frontend/frame-editors/frame-tree/title-bar.tsx b/src/packages/frontend/frame-editors/frame-tree/title-bar.tsx
index 811cc865481..e911d55fb36 100644
--- a/src/packages/frontend/frame-editors/frame-tree/title-bar.tsx
+++ b/src/packages/frontend/frame-editors/frame-tree/title-bar.tsx
@@ -338,16 +338,21 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
   }
 
   function render_x(): Rendered {
+    const closeLabel = intl.formatMessage({
+      id: "frame_editors.frame_tree.title_bar.close",
+      defaultMessage:
+        "Close this frame. To restore the default layout, close all frames.",
+      description: "Click this X button to close the frame",
+    });
     return (
-      <Tooltip
-        title={intl.formatMessage({
-          id: "frame_editors.frame_tree.title_bar.close",
-          defaultMessage:
-            "Close this frame. To restore the default layout, close all frames.",
-          description: "Click this X button to close the frame",
-        })}
-      >
-        <Button key={"close"} size="small" type="text" onClick={click_close}>
+      <Tooltip title={closeLabel}>
+        <Button
+          key={"close"}
+          size="small"
+          type="text"
+          onClick={click_close}
+          aria-label={closeLabel}
+        >
           <Icon name={"times"} />
         </Button>
       </Tooltip>
@@ -358,6 +363,8 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
     return (
       <div
         key="control-buttons-group"
+        role="region"
+        aria-label={`Layout controls for ${path_split(props.path).tail}`}
         style={{
           overflow: "hidden",
           display: "inline-block",
@@ -385,14 +392,13 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
 
   function render_full(): Rendered {
     if (props.is_full) {
+      const minimizeLabel = intl.formatMessage({
+        id: "frame_editors.frame_tree.title_bar.minimize",
+        defaultMessage: "Show all frames",
+        description: "Minimize this frame to show all frames",
+      });
       return (
-        <Tooltip
-          title={intl.formatMessage({
-            id: "frame_editors.frame_tree.title_bar.minimize",
-            defaultMessage: "Show all frames",
-            description: "Minimize this frame to show all frames",
-          })}
-        >
+        <Tooltip title={minimizeLabel}>
           <Button
             disabled={props.is_only}
             key={"full-screen-button"}
@@ -406,20 +412,20 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
               color: darkMode ? "yellowgreen" : undefined,
               background: !darkMode ? "yellowgreen" : undefined,
             }}
+            aria-label={minimizeLabel}
           >
             <Icon name={"compress"} />
           </Button>
         </Tooltip>
       );
     } else {
+      const maximizeLabel = intl.formatMessage({
+        id: "frame_editors.frame_tree.title_bar.maximize",
+        defaultMessage: "Show only this frame",
+        description: "Maximize this frame to show only this one",
+      });
       return (
-        <Tooltip
-          title={intl.formatMessage({
-            id: "frame_editors.frame_tree.title_bar.maximize",
-            defaultMessage: "Show only this frame",
-            description: "Maximize this frame to show only this one",
-          })}
-        >
+        <Tooltip title={maximizeLabel}>
           <Button
             disabled={props.is_only}
             key={"full-screen-button"}
@@ -429,6 +435,7 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
               track("set-full");
               props.actions.set_frame_full(props.id);
             }}
+            aria-label={maximizeLabel}
           >
             <Icon name={"expand"} />
           </Button>
@@ -438,10 +445,11 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
   }
 
   function render_split_row(): Rendered {
+    const splitHorizontalLabel = intl.formatMessage(
+      labels.split_frame_horizontally_title,
+    );
     return (
-      <Tooltip
-        title={intl.formatMessage(labels.split_frame_horizontally_title)}
-      >
+      <Tooltip title={splitHorizontalLabel}>
         <Button
           key={"split-row-button"}
           size="small"
@@ -456,6 +464,7 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
               return props.actions.split_frame("row", props.id);
             }
           }}
+          aria-label={splitHorizontalLabel}
         >
           <Icon name="horizontal-split" />
         </Button>
@@ -464,8 +473,11 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
   }
 
   function render_split_col(): Rendered {
+    const splitVerticalLabel = intl.formatMessage(
+      labels.split_frame_vertically_title,
+    );
     return (
-      <Tooltip title={intl.formatMessage(labels.split_frame_vertically_title)}>
+      <Tooltip title={splitVerticalLabel}>
         <Button
           key={"split-col-button"}
           size="small"
@@ -480,6 +492,7 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
               return props.actions.split_frame("col", props.id);
             }
           }}
+          aria-label={splitVerticalLabel}
         >
           <Icon name="vertical-split" />
         </Button>
@@ -726,8 +739,8 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
             label === APPLICATION_MENU
               ? manageCommands.applicationMenuTitle()
               : isIntlMessage(label)
-              ? intl.formatMessage(label)
-              : label
+                ? intl.formatMessage(label)
+                : label
           }
           items={v}
         />
@@ -834,7 +847,8 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
     // a drop down menu that actually appears
     // and *ALSO* have buttons that vanish when there are many of them.
     return (
-      <div
+      <nav
+        aria-label={`${renderI18N(props.spec.name)} editor controls and menus for ${path_split(props.path).tail}`}
         style={{
           flexFlow: "row nowrap",
           display: "flex",
@@ -844,7 +858,7 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
         }}
       >
         {renderButtons()}
-      </div>
+      </nav>
     );
   }
 
@@ -907,6 +921,8 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
               background: showMainButtonsPopover ? "#eee" : undefined,
             }}
             onClick={() => setShowMainButtonsPopover(!showMainButtonsPopover)}
+            aria-label={`${showMainButtonsPopover ? "Hide" : "Show"} more editor commands`}
+            aria-expanded={showMainButtonsPopover}
           >
             <Icon name="ellipsis" rotate="90" />
           </Button>
@@ -936,7 +952,12 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
       : CONNECTION_STATUS_STYLE;
 
     return (
-      <span style={style} title={props.connection_status}>
+      <span
+        style={style}
+        title={props.connection_status}
+        aria-live="polite"
+        aria-label={`Connection status: ${props.connection_status}`}
+      >
         <ConnectionStatusIcon status={props.connection_status} />
       </span>
     );
@@ -1173,10 +1194,13 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
     if (v.length == 0) {
       return null;
     }
+    const ariaLabel =`Symbols and outline for ${path_split(props.path).tail}`
     // if labels are shown, we render two rows – otherwise symbols are next to the menu and frame controls
     if (showSymbolBarLabels) {
       return wrapButtonBarContextMenu(
         <div
+          role="region"
+          aria-label={ariaLabel}
           style={{
             borderBottom: popup ? undefined : "1px solid #ccc",
             background: "#fafafa",
@@ -1188,7 +1212,13 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
       );
     } else {
       return wrapButtonBarContextMenu(
-        <div style={{ marginTop: "3px" }}>{v}</div>,
+        <div
+          role="region"
+          aria-label={ariaLabel}
+          style={{ marginTop: "3px" }}
+        >
+          {v}
+        </div>,
       );
     }
   }
@@ -1308,6 +1338,14 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
     );
   }
 
+  function renderI18N(label: string | IntlMessage): string {
+    if (isIntlMessage(label)) {
+      return intl.formatMessage(label);
+    } else {
+      return label;
+    }
+  }
+
   let style;
   style = copy(title_bar_style);
   style.background = is_active ? COL_BAR_BACKGROUND : COL_BAR_BACKGROUND_DARK;
@@ -1334,10 +1372,13 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
   return (
     <>
       <div style={{ opacity: !is_active ? 0.6 : undefined }}>
+        {/* ARIA: region for editor title bar with menus, buttons, and controls */}
         <div
           style={style}
           id={`titlebar-${props.id}`}
           className={"cc-frame-tree-title-bar"}
+          role="region"
+          aria-label={`${renderI18N(props.spec.name)} editor toolbar`}
         >
           {renderMainMenusAndButtons()}
           {is_active && renderConnectionStatus()}
diff --git a/src/packages/frontend/frame-editors/latex-editor/build-command.tsx b/src/packages/frontend/frame-editors/latex-editor/build-command.tsx
index f3343c780d5..c3a2db709a2 100644
--- a/src/packages/frontend/frame-editors/latex-editor/build-command.tsx
+++ b/src/packages/frontend/frame-editors/latex-editor/build-command.tsx
@@ -303,6 +303,14 @@ export const BuildCommand: React.FC<Props> = React.memo((props: Props) => {
   if (build_command == null) {
     return <Loading />;
   } else {
-    return <div style={{ paddingRight: "5px" }}>{render_body()}</div>;
+    return (
+      <div
+        style={{ paddingRight: "5px" }}
+        role="region"
+        aria-label="Build command"
+      >
+        {render_body()}
+      </div>
+    );
   }
 });
diff --git a/src/packages/frontend/frame-editors/latex-editor/build.tsx b/src/packages/frontend/frame-editors/latex-editor/build.tsx
index 6f6cc34d303..f1b44f076b7 100644
--- a/src/packages/frontend/frame-editors/latex-editor/build.tsx
+++ b/src/packages/frontend/frame-editors/latex-editor/build.tsx
@@ -278,6 +278,8 @@ export const Build: React.FC<Props> = React.memo((props) => {
         size={"small"}
         style={{ height: "100%", overflowY: "hidden" }}
         items={items}
+        role="region"
+        aria-label="Build log output"
       />
     );
   }
@@ -358,6 +360,9 @@ export const Build: React.FC<Props> = React.memo((props) => {
             display: "flex",
             gap: "5px",
           }}
+          role="region"
+          aria-label="Build progress"
+          aria-live="polite"
         >
           <Flex flex={1} style={{ gap: "5px" }}>
             Active: {r_join(infos)}...
@@ -383,6 +388,9 @@ export const Build: React.FC<Props> = React.memo((props) => {
             display: "flex",
             flexDirection: "column",
           }}
+          role="region"
+          aria-label="Build output"
+          aria-live="polite"
         >
           <div
             style={{
@@ -413,6 +421,8 @@ export const Build: React.FC<Props> = React.memo((props) => {
                   flexDirection: "column",
                   overflow: "hidden",
                 }}
+                role="region"
+                aria-label="Standard output (stdout)"
               >
                 <div
                   style={{
@@ -449,6 +459,10 @@ export const Build: React.FC<Props> = React.memo((props) => {
                   flexDirection: "column",
                   overflow: "hidden",
                 }}
+                role="region"
+                aria-label={`${renderErrorHeader(
+                  errorIsInformational,
+                )} (stderr)`}
               >
                 <div
                   style={{
@@ -495,6 +509,8 @@ export const Build: React.FC<Props> = React.memo((props) => {
         padding: "5px 0 0 5px",
         fontSize: `${font_size}px`,
       }}
+      role="region"
+      aria-label="Build log viewer"
     >
       {render_build_command()}
       {render_jobs()}
diff --git a/src/packages/frontend/frame-editors/latex-editor/output-control-build.tsx b/src/packages/frontend/frame-editors/latex-editor/output-control-build.tsx
index 683b9697c6a..ca82fa0ec73 100644
--- a/src/packages/frontend/frame-editors/latex-editor/output-control-build.tsx
+++ b/src/packages/frontend/frame-editors/latex-editor/output-control-build.tsx
@@ -137,7 +137,7 @@ export function BuildControls({
   });
 
   return (
-    <>
+    <div role="region" aria-label="Build controls">
       <Dropdown.Button
         type="primary"
         size={size}
@@ -145,6 +145,7 @@ export function BuildControls({
         menu={{ items: buildMenuItems }}
         trigger={["click"]}
         onClick={handleBuild}
+        aria-label="Build menu"
       >
         <Icon name="play-circle" />
         {!narrow &&
@@ -158,10 +159,12 @@ export function BuildControls({
           active={pdfDarkModeDisabled}
           onClick={() => actions.toggle_pdf_dark_mode(id)}
           title={intl.formatMessage(editor.toggle_pdf_dark_mode_title)}
+          aria-label={intl.formatMessage(editor.toggle_pdf_dark_mode_title)}
+          aria-pressed={pdfDarkModeDisabled}
         >
           <Icon unicode={DARK_MODE_ICON} />
         </BSButton>
       )}
-    </>
+    </div>
   );
 }
diff --git a/src/packages/frontend/frame-editors/latex-editor/output-control-pages.tsx b/src/packages/frontend/frame-editors/latex-editor/output-control-pages.tsx
index 34d8d5f904a..7ea23ebd256 100644
--- a/src/packages/frontend/frame-editors/latex-editor/output-control-pages.tsx
+++ b/src/packages/frontend/frame-editors/latex-editor/output-control-pages.tsx
@@ -88,7 +88,7 @@ export function PageNavigationControls({
   }
 
   return (
-    <div style={CONTROL_PAGE_STYLE}>
+    <div style={CONTROL_PAGE_STYLE} role="region" aria-label="Page navigation">
       <InputNumber
         size="small"
         style={{
diff --git a/src/packages/frontend/frame-editors/latex-editor/output-control-sync.tsx b/src/packages/frontend/frame-editors/latex-editor/output-control-sync.tsx
index 364889e4535..24994a2058e 100644
--- a/src/packages/frontend/frame-editors/latex-editor/output-control-sync.tsx
+++ b/src/packages/frontend/frame-editors/latex-editor/output-control-sync.tsx
@@ -172,7 +172,11 @@ export function SyncControls({
   }
 
   return (
-    <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+    <div
+      style={{ display: "flex", alignItems: "center", gap: "5px" }}
+      role="region"
+      aria-label="Sync controls"
+    >
       <Space.Compact>
         <Tip
           title={intl.formatMessage(INVERSE_SYNC_TOOLTIP_MSG)}
@@ -183,6 +187,8 @@ export function SyncControls({
             bsSize="xsmall"
             onClick={() => handleAutoSyncChange("autoSyncInverse")}
             style={{ padding: CONTROL_BUTTON_PADDING }}
+            aria-label={intl.formatMessage(INVERSE_SYNC_TOOLTIP_MSG)}
+            aria-pressed={autoSyncInverse}
           >
             <Icon unicode={SYNC_INVERSE_ICON} />
           </BSButton>
@@ -196,6 +202,8 @@ export function SyncControls({
             bsSize="xsmall"
             onClick={() => handleAutoSyncChange("autoSyncForward")}
             style={{ padding: CONTROL_BUTTON_PADDING }}
+            aria-label={intl.formatMessage(FORWARD_SYNC_TOOLTIP_MSG)}
+            aria-pressed={autoSyncForward}
           >
             <Icon unicode={SYNC_FORWARD_ICON} />
           </BSButton>
@@ -209,6 +217,7 @@ export function SyncControls({
             style={{ padding: CONTROL_BUTTON_PADDING }}
             onClick={handleManualSync}
             disabled={pageDimensions.length === 0}
+            aria-label={intl.formatMessage(SYNC_BUTTON_TOOLTIP_MSG)}
           >
             Sync
           </BSButton>
diff --git a/src/packages/frontend/frame-editors/latex-editor/output-control-zoom.tsx b/src/packages/frontend/frame-editors/latex-editor/output-control-zoom.tsx
index 7fd07576a53..ca23afebd53 100644
--- a/src/packages/frontend/frame-editors/latex-editor/output-control-zoom.tsx
+++ b/src/packages/frontend/frame-editors/latex-editor/output-control-zoom.tsx
@@ -199,13 +199,14 @@ export function ZoomControls({ actions, id, narrow }: ZoomControlsProps) {
   const btnStyle = narrow ? { padding: CONTROL_BUTTON_PADDING } : undefined;
 
   return (
-    <Space.Compact>
+    <Space.Compact role="region" aria-label="Zoom controls">
       <Tip title={intl.formatMessage(labels.zoom_in)} placement="top">
         <Button
           size="small"
           icon={<Icon name="search-plus" />}
           onClick={handleZoomIn}
           style={btnStyle}
+          aria-label={intl.formatMessage(labels.zoom_in)}
         >
           {!narrow && intl.formatMessage(labels.zoom_in_short)}
         </Button>
@@ -217,6 +218,7 @@ export function ZoomControls({ actions, id, narrow }: ZoomControlsProps) {
           icon={<Icon name="search-minus" />}
           onClick={handleZoomOut}
           style={btnStyle}
+          aria-label={intl.formatMessage(labels.zoom_out)}
         >
           {!narrow && intl.formatMessage(labels.zoom_out_short)}
         </Button>
@@ -227,7 +229,11 @@ export function ZoomControls({ actions, id, narrow }: ZoomControlsProps) {
         trigger={["click"]}
         placement="bottomRight"
       >
-        <Button size="small">
+        <Button
+          size="small"
+          aria-label={`Zoom: ${currentZoomPercentage}%`}
+          aria-haspopup="menu"
+        >
           {!narrow && `${currentZoomPercentage}%`}
           <Icon name="caret-down" />
         </Button>
diff --git a/src/packages/frontend/frame-editors/latex-editor/output-control.tsx b/src/packages/frontend/frame-editors/latex-editor/output-control.tsx
index de724c44f78..0389ac525ed 100644
--- a/src/packages/frontend/frame-editors/latex-editor/output-control.tsx
+++ b/src/packages/frontend/frame-editors/latex-editor/output-control.tsx
@@ -103,7 +103,12 @@ export function PDFControls({
   }, []);
 
   return (
-    <div ref={containerRef} style={CONTROL_STYLE}>
+    <div
+      ref={containerRef}
+      style={CONTROL_STYLE}
+      role="region"
+      aria-label="PDF controls"
+    >
       {/* Left side: Build Controls */}
       <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
         <BuildControls actions={actions} id={id} narrow={narrow} />
diff --git a/src/packages/frontend/frame-editors/latex-editor/output-files.tsx b/src/packages/frontend/frame-editors/latex-editor/output-files.tsx
index 01a6b3323d0..23b6fb92821 100644
--- a/src/packages/frontend/frame-editors/latex-editor/output-files.tsx
+++ b/src/packages/frontend/frame-editors/latex-editor/output-files.tsx
@@ -75,6 +75,8 @@ export function OutputFiles({
         flexDirection: "column",
         height: "100%",
       }}
+      role="region"
+      aria-label={`Files: ${path}`}
     >
       {/* Fixed header with buttons and file count */}
       <div style={OUTPUT_HEADER_STYLE}>
diff --git a/src/packages/frontend/frame-editors/latex-editor/output-stats.tsx b/src/packages/frontend/frame-editors/latex-editor/output-stats.tsx
index 2af03aa0527..8a337c5f172 100644
--- a/src/packages/frontend/frame-editors/latex-editor/output-stats.tsx
+++ b/src/packages/frontend/frame-editors/latex-editor/output-stats.tsx
@@ -24,6 +24,7 @@ interface OutputStatsProps {
   wordCount: string;
   refreshWordCount: (force?: boolean) => void;
   uiFontSize: number;
+  path?: string;
 }
 
 export function OutputStats({
@@ -31,6 +32,7 @@ export function OutputStats({
   wordCount,
   refreshWordCount,
   uiFontSize,
+  path = "",
 }: OutputStatsProps) {
   const intl = useIntl();
 
@@ -42,6 +44,8 @@ export function OutputStats({
         flexDirection: "column",
         height: "100%",
       }}
+      role="region"
+      aria-label={`Stats: ${path}`}
     >
       {/* Fixed header with refresh button */}
       <div style={OUTPUT_HEADER_STYLE}>
diff --git a/src/packages/frontend/frame-editors/latex-editor/output.tsx b/src/packages/frontend/frame-editors/latex-editor/output.tsx
index d7e68807ba2..86367cebc67 100644
--- a/src/packages/frontend/frame-editors/latex-editor/output.tsx
+++ b/src/packages/frontend/frame-editors/latex-editor/output.tsx
@@ -323,7 +323,11 @@ export function Output(props: OutputProps) {
         </span>
       ),
       children: (
-        <div className="smc-vfill">
+        <div
+          className="smc-vfill"
+          role="region"
+          aria-label={`PDF${totalPages > 0 ? ` (${totalPages}p)` : ""}: ${path}`}
+        >
           <PDFControls
             actions={actions}
             id={id}
@@ -398,6 +402,8 @@ export function Output(props: OutputProps) {
             flexDirection: "column",
             height: "100%",
           }}
+          role="region"
+          aria-label={`Contents: ${path}`}
         >
           <div style={OUTPUT_HEADER_STYLE}>
             <span style={LABEL_STYLE}>
@@ -448,7 +454,11 @@ export function Output(props: OutputProps) {
         </span>
       ),
       children: (
-        <div className="smc-vfill">
+        <div
+          className="smc-vfill"
+          role="region"
+          aria-label={`Build log: ${path}`}
+        >
           <Build
             name={name}
             actions={actions}
@@ -516,7 +526,11 @@ export function Output(props: OutputProps) {
         </span>
       ),
       children: (
-        <div className="smc-vfill">
+        <div
+          className="smc-vfill"
+          role="region"
+          aria-label={`Issues${errors > 0 || warnings > 0 ? ` (${errors}e ${warnings}w)` : ""}: ${path}`}
+        >
           <ErrorsAndWarnings
             id={id}
             name={name}
@@ -575,6 +589,7 @@ export function Output(props: OutputProps) {
           wordCount={wordCount}
           refreshWordCount={refreshWordCount}
           uiFontSize={uiFontSize}
+          path={path}
         />
       ),
     };
@@ -627,13 +642,20 @@ export function Output(props: OutputProps) {
           }}
           items={tabItems}
           className="cocalc-latex-output-tabs"
+          role="navigation"
+          aria-label={`Output tabs: ${path}`}
         />
       </div>
     );
   }
 
   return (
-    <div className="smc-vfill" style={{ position: "relative" }}>
+    <div
+      className="smc-vfill"
+      style={{ position: "relative" }}
+      role="region"
+      aria-label={`Output: ${path}`}
+    >
       <div
         className="smc-vfill"
         style={{
diff --git a/src/packages/frontend/i18n/common.ts b/src/packages/frontend/i18n/common.ts
index 4dc578ad595..d7c1fe85b9f 100644
--- a/src/packages/frontend/i18n/common.ts
+++ b/src/packages/frontend/i18n/common.ts
@@ -725,6 +725,12 @@ export const labels = defineMessages({
     description:
       "Short label, telling the user a possible connection has not been established.",
   },
+  connected: {
+    id: "labels.connected",
+    defaultMessage: "Connected",
+    description:
+      "Short label, telling the user the connection has been established.",
+  },
   connection: {
     id: "labels.connection",
     defaultMessage: "Connection",
diff --git a/src/packages/frontend/i18n/trans/ar_EG.json b/src/packages/frontend/i18n/trans/ar_EG.json
index 93e14cf9dc5..c9e370ef50e 100644
--- a/src/packages/frontend/i18n/trans/ar_EG.json
+++ b/src/packages/frontend/i18n/trans/ar_EG.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "عرض منقسم في ورقة عمل Sage",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "تبديل تعليق التحديد",
   "account.other-settings._page_size.label": "عدد الملفات لكل صفحة",
+  "account.other-settings.auto_focus": "<strong>إدخال نص التركيز التلقائي:</strong> التركيز تلقائيًا على حقول إدخال النص عند ظهورها (مثل مستكشف الملفات، المشاريع، ...)",
   "account.other-settings.browser_performance.title": "متصفح",
   "account.other-settings.button_tooltips": "<strong>إخفاء تلميحات الأزرار:</strong> يخفي بعض تلميحات الأزرار (هذا جزئي فقط)",
   "account.other-settings.confirm_close": "<strong>تأكيد الإغلاق:</strong> اطلب دائمًا التأكيد قبل إغلاق نافذة المتصفح",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "إنشاء مستند {docName} باستخدام الذكاء الاصطناعي",
   "ai-generator.select_llm": "اختر نموذج اللغة",
   "app.fullscreen-button.tooltip": "وضع الشاشة الكاملة، يركز على المستند أو الصفحة الحالية.",
+  "app.hotkey.dialog.help_text": "اكتب للبحث • الأرقام 1-9 للإطارات الحالية • ↑↓ للتنقل • Return للفتح • ESC للإغلاق",
+  "app.hotkey.dialog.search_placeholder": "ابحث في الإطارات والملفات والصفحات...",
+  "app.hotkey.dialog.title": "التنقل السريع عبر اختصارات لوحة المفاتيح",
   "app.verify-email-banner.edit": "إذا كانت عنوان البريد الإلكتروني خاطئة، يرجى <E>تعديله</E> في إعدادات الحساب.",
   "app.verify-email-banner.help.text": "من المهم أن يكون لديك عنوان بريد إلكتروني يعمل. نستخدمه لإعادة تعيين كلمة المرور، وإرسال الرسائل، وإشعارات الفوترة، والدعم. يرجى التأكد من صحة بريدك الإلكتروني للبقاء على اطلاع.",
   "app.verify-email-banner.text": "{sent, select, true {تم إرسال البريد الإلكتروني! يرجى التحقق من صندوق البريد الإلكتروني (وربما الرسائل غير المرغوب فيها) والنقر على رابط التأكيد.} other {يرجى التحقق من عنوان بريدك الإلكتروني وتأكيده:}}",
@@ -988,6 +992,7 @@
   "labels.config": "الإعدادات",
   "labels.configuration": "التكوين",
   "labels.configuration.short": "الإعدادات",
+  "labels.connected": "متصل",
   "labels.connecting": "الاتصال",
   "labels.connection": "الاتصال",
   "labels.copied": "تم النسخ",
diff --git a/src/packages/frontend/i18n/trans/de_DE.json b/src/packages/frontend/i18n/trans/de_DE.json
index 77f98b40ad9..d710475d89a 100644
--- a/src/packages/frontend/i18n/trans/de_DE.json
+++ b/src/packages/frontend/i18n/trans/de_DE.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Geteilte Ansicht im Sage-Arbeitsblatt",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Auswahl kommentieren umschalten",
   "account.other-settings._page_size.label": "Anzahl der Dateien pro Seite",
+  "account.other-settings.auto_focus": "<strong>Textfelder automatisch fokussieren:</strong> Textfelder automatisch fokussieren, wenn sie erscheinen (z.B. Dateiexplorer, Projekte, ...)",
   "account.other-settings.browser_performance.title": "Browser",
   "account.other-settings.button_tooltips": "<strong>Schaltflächen-Tooltips ausblenden:</strong> blendet einige Schaltflächen-Tooltips aus (dies ist nur teilweise)",
   "account.other-settings.confirm_close": "<strong>Schließen bestätigen:</strong> immer um Bestätigung bitten, bevor das Browserfenster geschlossen wird",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Erzeuge ein {docName} Dokument mit KI",
   "ai-generator.select_llm": "Sprachmodell auswählen",
   "app.fullscreen-button.tooltip": "Vollbildmodus, fokussiert auf das aktuelle Dokument oder die aktuelle Seite",
+  "app.hotkey.dialog.help_text": "Tippen zum Suchen • Zahlen 1–9 für aktuelle Rahmen • ↑↓ navigieren • Eingabetaste zum Öffnen • ESC zum Schließen",
+  "app.hotkey.dialog.search_placeholder": "Rahmen, Dateien und Seiten durchsuchen...",
+  "app.hotkey.dialog.title": "Hotkey-Schnellnavigation",
   "app.verify-email-banner.edit": "Wenn die E-Mail-Adresse falsch ist, bitte <E>bearbeiten</E> Sie sie in den Kontoeinstellungen.",
   "app.verify-email-banner.help.text": "Es ist wichtig, eine funktionierende E-Mail-Adresse zu haben. Wir verwenden sie für das Zurücksetzen von Passwörtern, das Senden von Nachrichten, Abrechnungsbenachrichtigungen und Unterstützung. Bitte stellen Sie sicher, dass Ihre E-Mail korrekt ist, um informiert zu bleiben.",
   "app.verify-email-banner.text": "{sent, select, true {E-Mail gesendet! Bitte überprüfen Sie Ihren E-Mail-Posteingang (und vielleicht Spam) und klicken Sie auf den Bestätigungslink.} other {Bitte überprüfen und verifizieren Sie Ihre E-Mail-Adresse:}}",
@@ -988,6 +992,7 @@
   "labels.config": "Konfiguration",
   "labels.configuration": "Konfiguration",
   "labels.configuration.short": "Konfig",
+  "labels.connected": "Verbunden",
   "labels.connecting": "Verbinde",
   "labels.connection": "Verbindung",
   "labels.copied": "kopiert",
diff --git a/src/packages/frontend/i18n/trans/es_ES.json b/src/packages/frontend/i18n/trans/es_ES.json
index c72f16c3b11..bf311526ac6 100644
--- a/src/packages/frontend/i18n/trans/es_ES.json
+++ b/src/packages/frontend/i18n/trans/es_ES.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Vista dividida en hoja de trabajo Sage",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Alternar selección de comentarios",
   "account.other-settings._page_size.label": "Número de archivos por página",
+  "account.other-settings.auto_focus": "<strong>Enfoque Automático en la Entrada de Texto:</strong> enfocar automáticamente los campos de entrada de texto cuando aparezcan (por ejemplo, explorador de archivos, proyectos, ...)",
   "account.other-settings.browser_performance.title": "Navegador",
   "account.other-settings.button_tooltips": "<strong>Ocultar descripciones emergentes de botones:</strong> oculta algunas descripciones emergentes de botones (esto es solo parcial)",
   "account.other-settings.confirm_close": "<strong>Confirmar cierre:</strong> siempre pedir confirmación antes de cerrar la ventana del navegador",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Generar un documento {docName} usando IA",
   "ai-generator.select_llm": "Seleccionar modelo de idioma",
   "app.fullscreen-button.tooltip": "Modo de pantalla completa, centrado en el documento o página actual.",
+  "app.hotkey.dialog.help_text": "Escribe para buscar • Números 1–9 para los marcos actuales • ↑↓ navegar • Intro para abrir • ESC para cerrar",
+  "app.hotkey.dialog.search_placeholder": "Buscar marcos, archivos y páginas...",
+  "app.hotkey.dialog.title": "Navegación Rápida de Teclas Rápidas",
   "app.verify-email-banner.edit": "Si la dirección de correo electrónico es incorrecta, por favor <E>edítala</E> en la configuración de la cuenta.",
   "app.verify-email-banner.help.text": "Es importante tener una dirección de correo electrónico funcional. La usamos para restablecer contraseñas, enviar mensajes, notificaciones de facturación y soporte. Por favor, asegúrate de que tu correo electrónico sea correcto para mantenerte informado.",
   "app.verify-email-banner.text": "{sent, select, true {¡Correo electrónico enviado! Por favor, revisa tu bandeja de entrada de correo (y quizá el spam) y haz clic en el enlace de confirmación.} other {Por favor, revisa y verifica tu dirección de correo electrónico:}}",
@@ -988,6 +992,7 @@
   "labels.config": "Configurar",
   "labels.configuration": "Configuración",
   "labels.configuration.short": "Configurar",
+  "labels.connected": "Conectado",
   "labels.connecting": "Conectando",
   "labels.connection": "Conexión",
   "labels.copied": "copiado",
diff --git a/src/packages/frontend/i18n/trans/es_PV.json b/src/packages/frontend/i18n/trans/es_PV.json
index 0dc05b5b314..e76d96a2c9b 100644
--- a/src/packages/frontend/i18n/trans/es_PV.json
+++ b/src/packages/frontend/i18n/trans/es_PV.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Bista zatitua Sageko kalkulu orrian",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Gaitu hautaketa komentatzea",
   "account.other-settings._page_size.label": "Fitxategi kopurua orrialde bakoitzeko",
+  "account.other-settings.auto_focus": "<strong>Testu Sarrera Automatikoki Fokatzea:</strong> automatikoki fokatu testu sarrera eremuak agertzen direnean (adibidez, fitxategi arakatzailea, proiektuak, ...)",
   "account.other-settings.browser_performance.title": "Nabigatzailea",
   "account.other-settings.button_tooltips": "<strong>Ezkutatu Botoiaren Tresna-aholkuak:</strong> botoi batzuen tresna-aholkuak ezkutatzen ditu (hau partziala da)",
   "account.other-settings.confirm_close": "<strong>Berrestu Ixtea:</strong> beti eskatu berrespena nabigatzailearen leihoa itxi aurretik",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Sortu {docName} Dokumentua AI erabiliz",
   "ai-generator.select_llm": "Aukeratu hizkuntza eredua",
   "app.fullscreen-button.tooltip": "Pantaila osoa modua, uneko dokumentuan edo orrian zentratuta.",
+  "app.hotkey.dialog.help_text": "Idatzi bilatzeko • Zenbakiak 1–9 egungo markoetarako • ↑↓ nabigatu • Return irekitzeko • ESC ixteko",
+  "app.hotkey.dialog.search_placeholder": "Bilatu markoak, fitxategiak eta orrialdeak...",
+  "app.hotkey.dialog.title": "Laster-teklak Nabigazio Azkarra",
   "app.verify-email-banner.edit": "Email helbidea ez bada zuzena <E>editatu</E> egizu kontu ezarpenetan.",
   "app.verify-email-banner.help.text": "Garrantzitsua da funtzionatzen duen helbide elektroniko bat izatea. Pasahitzak berrezartzeko, mezuak bidaltzeko, fakturazio jakinarazpenak egiteko eta laguntza emateko bidaltzen dugu. Mesedez, ziurtatu zure helbide elektronikoa zuzena dela informazioa jasotzeko.",
   "app.verify-email-banner.text": "{sent, select, true {Emaila Bidalita! Mesedez, begiratu zure email sarrera-ontzia (eta agian spam karpeta) eta klik egin berrespen estekan.} other {Mesedez, egiaztatu eta baieztatu zure helbide elektronikoa:}}",
@@ -988,6 +992,7 @@
   "labels.config": "Konfigurazio",
   "labels.configuration": "Konfigurazioa",
   "labels.configuration.short": "Konfigurazio",
+  "labels.connected": "Konektatuta",
   "labels.connecting": "Konexioa egiten",
   "labels.connection": "Konexioa",
   "labels.copied": "kopiatuta",
diff --git a/src/packages/frontend/i18n/trans/fr_FR.json b/src/packages/frontend/i18n/trans/fr_FR.json
index 526a0466ea6..9091b3e9987 100644
--- a/src/packages/frontend/i18n/trans/fr_FR.json
+++ b/src/packages/frontend/i18n/trans/fr_FR.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Vue partagée dans la feuille de calcul Sage",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Basculer le commentaire de la sélection",
   "account.other-settings._page_size.label": "Nombre de fichiers par page",
+  "account.other-settings.auto_focus": "<strong>Texte d'entrée de mise au point automatique :</strong> met automatiquement au point les champs de saisie de texte lorsqu'ils apparaissent (par exemple, explorateur de fichiers, projets, ...)",
   "account.other-settings.browser_performance.title": "Navigateur",
   "account.other-settings.button_tooltips": "<strong>Masquer les info-bulles des boutons :</strong> masque certaines info-bulles des boutons (ceci est seulement partiel)",
   "account.other-settings.confirm_close": "<strong>Confirmer la fermeture :</strong> toujours demander confirmation avant de fermer la fenêtre du navigateur",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Générer un document {docName} en utilisant l'IA",
   "ai-generator.select_llm": "Sélectionner le modèle de langue",
   "app.fullscreen-button.tooltip": "Mode plein écran, concentré sur le document ou la page actuelle.",
+  "app.hotkey.dialog.help_text": "Tapez pour rechercher • Chiffres 1–9 pour les cadres actuels • ↑↓ naviguer • Entrée pour ouvrir • Échap pour fermer",
+  "app.hotkey.dialog.search_placeholder": "Rechercher des cadres, fichiers et pages...",
+  "app.hotkey.dialog.title": "Raccourci Navigation Rapide",
   "app.verify-email-banner.edit": "Si l'adresse e-mail est incorrecte, veuillez <E>la modifier</E> dans les paramètres du compte.",
   "app.verify-email-banner.help.text": "Il est important d'avoir une adresse e-mail fonctionnelle. Nous l'utilisons pour les réinitialisations de mot de passe, l'envoi de messages, les notifications de facturation et le support. Veuillez vous assurer que votre e-mail est correct pour rester informé.",
   "app.verify-email-banner.text": "{sent, select, true {Email envoyé ! Veuillez vérifier votre boîte de réception (et peut-être les spams) et cliquez sur le lien de confirmation.} other {Veuillez vérifier et confirmer votre adresse e-mail :}}",
@@ -988,6 +992,7 @@
   "labels.config": "Config",
   "labels.configuration": "Configuration",
   "labels.configuration.short": "Config",
+  "labels.connected": "Connecté",
   "labels.connecting": "Connexion",
   "labels.connection": "Connexion",
   "labels.copied": "copié",
diff --git a/src/packages/frontend/i18n/trans/he_IL.json b/src/packages/frontend/i18n/trans/he_IL.json
index 45ad253086a..a147fb9f14a 100644
--- a/src/packages/frontend/i18n/trans/he_IL.json
+++ b/src/packages/frontend/i18n/trans/he_IL.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "תצוגה מפוצלת בגליון העבודה של Sage",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "החלפת מצב הערות בחירה",
   "account.other-settings._page_size.label": "מספר הקבצים לכל עמוד",
+  "account.other-settings.auto_focus": "<strong>מיקוד אוטומטי על שדה טקסט:</strong> מיקוד אוטומטי על שדות טקסט כשאלה מופיעים (לדוגמה, סייר קבצים, פרויקטים, ...)",
   "account.other-settings.browser_performance.title": "דפדפן",
   "account.other-settings.button_tooltips": "<strong>הסתרת תיאורי כלים של כפתורים:</strong> מסתיר חלק מתיאורי הכלים של הכפתורים (זה חלקי בלבד)",
   "account.other-settings.confirm_close": "<strong>אישור סגירה:</strong> תמיד לבקש אישור לפני סגירת חלון הדפדפן",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "צור מסמך {docName} באמצעות AI",
   "ai-generator.select_llm": "בחר מודל שפה",
   "app.fullscreen-button.tooltip": "מצב מסך מלא, ממוקד במסמך או בעמוד הנוכחי",
+  "app.hotkey.dialog.help_text": "הקלד לחיפוש • מספרים 1–9 למסגרות נוכחיות • ↑↓ נווט • Return לפתיחה • ESC לסגירה",
+  "app.hotkey.dialog.search_placeholder": "חפש מסגרות, קבצים ודפים...",
+  "app.hotkey.dialog.title": "ניווט מהיר במקשי קיצור",
   "app.verify-email-banner.edit": "אם כתובת הדוא\"ל שגויה, אנא <E>ערוך</E> אותה בהגדרות החשבון.",
   "app.verify-email-banner.help.text": "חשוב שתהיה כתובת דוא\"ל פעילה. אנו משתמשים בה לאיפוס סיסמאות, שליחת הודעות, התראות חיוב ותמיכה. אנא ודא שכתובת הדוא\"ל שלך נכונה כדי להישאר מעודכן.",
   "app.verify-email-banner.text": "{sent, select, true {האימייל נשלח! בדוק את תיבת הדואר הנכנס שלך (ואולי דואר זבל) ולחץ על קישור האישור.} other {אנא בדוק ואמת את כתובת האימייל שלך:}}",
@@ -988,6 +992,7 @@
   "labels.config": "הגדרות",
   "labels.configuration": "תצורה",
   "labels.configuration.short": "הגדרות",
+  "labels.connected": "מחובר",
   "labels.connecting": "מתחבר",
   "labels.connection": "חיבור",
   "labels.copied": "הועתק",
diff --git a/src/packages/frontend/i18n/trans/hi_IN.json b/src/packages/frontend/i18n/trans/hi_IN.json
index f1b3f038643..8dfb0c69226 100644
--- a/src/packages/frontend/i18n/trans/hi_IN.json
+++ b/src/packages/frontend/i18n/trans/hi_IN.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Sage कार्यपत्रक में दृश्य विभाजन",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "चयन पर टिप्पणी टॉगल करें",
   "account.other-settings._page_size.label": "प्रति पृष्ठ फ़ाइलों की संख्या",
+  "account.other-settings.auto_focus": "<strong>ऑटो फोकस टेक्स्ट इनपुट:</strong> जब वे प्रकट होते हैं तो टेक्स्ट इनपुट फ़ील्ड्स पर स्वचालित रूप से फोकस करें (जैसे, फाइल एक्सप्लोरर, प्रोजेक्ट्स, ...)",
   "account.other-settings.browser_performance.title": "ब्राउज़र",
   "account.other-settings.button_tooltips": "<strong>हाइड बटन टूलटिप्स:</strong> कुछ बटन टूलटिप्स को छुपाता है (यह केवल आंशिक है)",
   "account.other-settings.confirm_close": "<strong>बंद करने की पुष्टि करें:</strong> ब्राउज़र विंडो बंद करने से पहले हमेशा पुष्टि के लिए पूछें",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "AI का उपयोग करके {docName} दस्तावेज़ उत्पन्न करें",
   "ai-generator.select_llm": "भाषा मॉडल चुनें",
   "app.fullscreen-button.tooltip": "पूर्ण स्क्रीन मोड, वर्तमान दस्तावेज़ या पृष्ठ पर केंद्रित।",
+  "app.hotkey.dialog.help_text": "टाइप करें खोजने के लिए • वर्तमान फ्रेम के लिए नंबर 1–9 • ↑↓ नेविगेट करें • खोलने के लिए Return • बंद करने के लिए ESC",
+  "app.hotkey.dialog.search_placeholder": "फ्रेम, फाइलें और पेज खोजें...",
+  "app.hotkey.dialog.title": "हॉटकी त्वरित नेविगेशन",
   "app.verify-email-banner.edit": "यदि ईमेल पता गलत है, कृपया इसे खाता सेटिंग्स में <E>संपादित</E> करें।",
   "app.verify-email-banner.help.text": "यह महत्वपूर्ण है कि आपके पास एक कार्यशील ईमेल पता हो। हम इसे पासवर्ड रीसेट, संदेश भेजने, बिलिंग सूचनाएं और सहायता के लिए उपयोग करते हैं। कृपया सूचित रहने के लिए सुनिश्चित करें कि आपका ईमेल सही है।",
   "app.verify-email-banner.text": "{sent, select, true {ईमेल भेजा गया! कृपया अपने ईमेल इनबॉक्स (और शायद स्पैम) की जाँच करें और पुष्टि लिंक पर क्लिक करें।} other {कृपया अपना ईमेल पता जाँचें और सत्यापित करें:}}",
@@ -988,6 +992,7 @@
   "labels.config": "कॉन्फ़िग",
   "labels.configuration": "कॉन्फ़िगरेशन",
   "labels.configuration.short": "कॉन्फ़िग",
+  "labels.connected": "कनेक्टेड",
   "labels.connecting": "कनेक्टिंग",
   "labels.connection": "कनेक्शन",
   "labels.copied": "कॉपी किया गया",
diff --git a/src/packages/frontend/i18n/trans/hu_HU.json b/src/packages/frontend/i18n/trans/hu_HU.json
index 6858cfb002a..073f124f3ca 100644
--- a/src/packages/frontend/i18n/trans/hu_HU.json
+++ b/src/packages/frontend/i18n/trans/hu_HU.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Megosztott nézet Sage munkalapban",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Kommentár kijelölésének váltása",
   "account.other-settings._page_size.label": "Fájlok száma oldalanként",
+  "account.other-settings.auto_focus": "<strong>Automatikus fókusz a szövegbeviteli mezőkre:</strong> a szövegbeviteli mezők automatikus fókuszálása, amikor megjelennek (pl. fájlkezelő, projektek, ...)",
   "account.other-settings.browser_performance.title": "Böngésző",
   "account.other-settings.button_tooltips": "<strong>Gombok tippjeinek elrejtése:</strong> elrejti néhány gomb tippjét (ez csak részleges)",
   "account.other-settings.confirm_close": "<strong>Zárás megerősítése:</strong> mindig kérjen megerősítést, mielőtt bezárja a böngészőablakot",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Hozzon létre egy {docName} dokumentumot mesterséges intelligencia segítségével",
   "ai-generator.select_llm": "Nyelvi modell kiválasztása",
   "app.fullscreen-button.tooltip": "Teljes képernyős mód, a jelenlegi dokumentumra vagy oldalra összpontosítva.",
+  "app.hotkey.dialog.help_text": "Írjon be a kereséshez • Számok 1–9 az aktuális keretekhez • ↑↓ navigálás • Return megnyitásra • ESC bezáráshoz",
+  "app.hotkey.dialog.search_placeholder": "Keretek, fájlok és oldalak keresése...",
+  "app.hotkey.dialog.title": "Gyorsbillentyűs Gyors Navigáció",
   "app.verify-email-banner.edit": "Ha az e-mail cím helytelen, kérjük, <E>szerkessze</E> azt a fiókbeállításokban.",
   "app.verify-email-banner.help.text": "Fontos, hogy legyen működő e-mail címe. Jelszó-visszaállításhoz, üzenetek küldéséhez, számlázási értesítésekhez és támogatáshoz használjuk. Kérjük, győződjön meg róla, hogy az e-mail címe helyes, hogy tájékozott maradhasson.",
   "app.verify-email-banner.text": "{sent, select, true {Email elküldve! Kérjük, ellenőrizze az e-mail fiókját (és esetleg a spam mappát), és kattintson a megerősítő linkre.} other {Kérjük, ellenőrizze és igazolja az e-mail címét:}}",
@@ -988,6 +992,7 @@
   "labels.config": "Beállítás",
   "labels.configuration": "Konfiguráció",
   "labels.configuration.short": "Beállítás",
+  "labels.connected": "Csatlakoztatva",
   "labels.connecting": "Csatlakozás",
   "labels.connection": "Csatlakozás",
   "labels.copied": "másolva",
diff --git a/src/packages/frontend/i18n/trans/it_IT.json b/src/packages/frontend/i18n/trans/it_IT.json
index bc2c94d46fa..970cdfdc879 100644
--- a/src/packages/frontend/i18n/trans/it_IT.json
+++ b/src/packages/frontend/i18n/trans/it_IT.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Visualizzazione divisa nel foglio di lavoro Sage",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Attiva/disattiva commento selezione",
   "account.other-settings._page_size.label": "Numero di file per pagina",
+  "account.other-settings.auto_focus": "<strong>Auto Focus Text Input:</strong> concentra automaticamente i campi di inserimento testo quando appaiono (ad esempio, esploratore di file, progetti, ...)",
   "account.other-settings.browser_performance.title": "Browser",
   "account.other-settings.button_tooltips": "<strong>Nascondi suggerimenti dei pulsanti:</strong> nasconde alcuni suggerimenti dei pulsanti (questo è solo parziale)",
   "account.other-settings.confirm_close": "<strong>Conferma Chiusura:</strong> chiedi sempre conferma prima di chiudere la finestra del browser",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Genera un documento {docName} utilizzando l'IA",
   "ai-generator.select_llm": "Seleziona modello linguistico",
   "app.fullscreen-button.tooltip": "Modalità a schermo intero, focalizzata sul documento o pagina corrente",
+  "app.hotkey.dialog.help_text": "Digita per cercare • Numeri 1–9 per i frame correnti • ↑↓ naviga • Invio per aprire • ESC per chiudere",
+  "app.hotkey.dialog.search_placeholder": "Cerca frame, file e pagine...",
+  "app.hotkey.dialog.title": "Navigazione Rapida Tasti di Scelta Rapida",
   "app.verify-email-banner.edit": "Se l'indirizzo email è sbagliato, per favore <E>modificalo</E> nelle impostazioni dell'account.",
   "app.verify-email-banner.help.text": "È importante avere un indirizzo email funzionante. Lo utilizziamo per reimpostare le password, inviare messaggi, notifiche di fatturazione e supporto. Assicurati che la tua email sia corretta per rimanere informato.",
   "app.verify-email-banner.text": "{sent, select, true {Email inviata! Controlla la tua casella di posta elettronica (e magari spam) e clicca sul link di conferma.} other {Per favore controlla e verifica il tuo indirizzo email:}}",
@@ -988,6 +992,7 @@
   "labels.config": "Configura",
   "labels.configuration": "Configurazione",
   "labels.configuration.short": "Configura",
+  "labels.connected": "Connesso",
   "labels.connecting": "Connessione",
   "labels.connection": "Connessione",
   "labels.copied": "copiato",
diff --git a/src/packages/frontend/i18n/trans/ja_JP.json b/src/packages/frontend/i18n/trans/ja_JP.json
index 02a11bb9732..f02ad68cb6d 100644
--- a/src/packages/frontend/i18n/trans/ja_JP.json
+++ b/src/packages/frontend/i18n/trans/ja_JP.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Sageワークシートで分割表示",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "選択範囲のコメントを切り替え",
   "account.other-settings._page_size.label": "1ページあたりのファイル数",
+  "account.other-settings.auto_focus": "<strong>自動フォーカステキスト入力:</strong> テキスト入力フィールドが表示されたときに自動的にフォーカスする (例: ファイルエクスプローラー、プロジェクト、...)",
   "account.other-settings.browser_performance.title": "ブラウザー",
   "account.other-settings.button_tooltips": "<strong>ボタンのツールチップを非表示:</strong> 一部のボタンのツールチップを非表示にします（これは部分的です）",
   "account.other-settings.confirm_close": "<strong>閉じる確認:</strong> ブラウザーウィンドウを閉じる前に必ず確認を求める",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "AIを使用して{docName}ドキュメントを生成",
   "ai-generator.select_llm": "言語モデルを選択",
   "app.fullscreen-button.tooltip": "全画面モード、現在のドキュメントまたはページに集中。",
+  "app.hotkey.dialog.help_text": "入力して検索 • 数字 1–9 は現在のフレーム • ↑↓ 移動 • Return で開く • ESC で閉じる",
+  "app.hotkey.dialog.search_placeholder": "フレーム、ファイル、ページを検索...",
+  "app.hotkey.dialog.title": "ホットキー クイック ナビゲーション",
   "app.verify-email-banner.edit": "メールアドレスが間違っている場合は、アカウント設定で<E>編集</E>してください。",
   "app.verify-email-banner.help.text": "作業可能なメールアドレスを持つことが重要です。パスワードのリセット、メッセージの送信、請求通知、サポートのために使用します。情報を受け取るために、メールアドレスが正しいことを確認してください。",
   "app.verify-email-banner.text": "{sent, select, true {メールが送信されました！メールの受信トレイ（場合によってはスパムフォルダ）を確認し、確認リンクをクリックしてください。} other {メールアドレスを確認してください：}}",
@@ -988,6 +992,7 @@
   "labels.config": "設定",
   "labels.configuration": "設定",
   "labels.configuration.short": "設定",
+  "labels.connected": "接続済み",
   "labels.connecting": "接続中",
   "labels.connection": "接続",
   "labels.copied": "コピー済み",
diff --git a/src/packages/frontend/i18n/trans/ko_KR.json b/src/packages/frontend/i18n/trans/ko_KR.json
index bef0d366cb9..2dc90494ede 100644
--- a/src/packages/frontend/i18n/trans/ko_KR.json
+++ b/src/packages/frontend/i18n/trans/ko_KR.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Sage 워크시트에서 분할 보기",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "선택 주석 전환",
   "account.other-settings._page_size.label": "페이지당 파일 수",
+  "account.other-settings.auto_focus": "<strong>자동 포커스 텍스트 입력:</strong> 텍스트 입력 필드가 나타날 때 자동으로 포커스 (예: 파일 탐색기, 프로젝트, ...)",
   "account.other-settings.browser_performance.title": "브라우저",
   "account.other-settings.button_tooltips": "<strong>버튼 툴팁 숨기기:</strong> 일부 버튼 툴팁 숨기기 (부분적으로만 적용됨)",
   "account.other-settings.confirm_close": "<strong>종료 확인:</strong> 브라우저 창을 닫기 전에 항상 확인 요청",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "AI를 사용하여 {docName} 문서 생성",
   "ai-generator.select_llm": "언어 모델 선택",
   "app.fullscreen-button.tooltip": "풀스크린 모드, 현재 문서나 페이지에 집중.",
+  "app.hotkey.dialog.help_text": "입력하여 검색 • 현재 프레임에 1–9 • ↑↓ 탐색 • Return 눌러 열기 • ESC 눌러 닫기",
+  "app.hotkey.dialog.search_placeholder": "프레임, 파일 및 페이지 검색...",
+  "app.hotkey.dialog.title": "단축키 빠른 탐색",
   "app.verify-email-banner.edit": "이메일 주소가 잘못된 경우 계정 설정에서 <E>편집</E>하십시오.",
   "app.verify-email-banner.help.text": "작동하는 이메일 주소를 가지고 있는 것이 중요합니다. 우리는 비밀번호 재설정, 메시지 전송, 청구 알림 및 지원을 위해 이메일을 사용합니다. 정보를 받으려면 이메일이 올바른지 확인하세요.",
   "app.verify-email-banner.text": "{sent, select, true {이메일이 전송되었습니다! 이메일 받은 편지함(그리고 스팸 폴더도)에서 확인하고 확인 링크를 클릭하세요.} other {이메일 주소를 확인하고 인증해 주세요:}}",
@@ -988,6 +992,7 @@
   "labels.config": "구성",
   "labels.configuration": "구성",
   "labels.configuration.short": "구성",
+  "labels.connected": "연결됨",
   "labels.connecting": "연결 중",
   "labels.connection": "연결",
   "labels.copied": "복사됨",
diff --git a/src/packages/frontend/i18n/trans/nl_NL.json b/src/packages/frontend/i18n/trans/nl_NL.json
index 3ce06ce36d5..2ff8d0dbb90 100644
--- a/src/packages/frontend/i18n/trans/nl_NL.json
+++ b/src/packages/frontend/i18n/trans/nl_NL.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Gesplitste weergave in Sage-werkblad",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Selectie van commentaar voorzien/ongedaan maken",
   "account.other-settings._page_size.label": "Aantal bestanden per pagina",
+  "account.other-settings.auto_focus": "<strong>Auto Focus Tekstinvoer:</strong> tekstinvoervelden automatisch focussen wanneer ze verschijnen (bijv. bestandsverkenner, projecten, ...)",
   "account.other-settings.browser_performance.title": "Browser",
   "account.other-settings.button_tooltips": "<strong>Verberg knopinfo:</strong> verbergt enkele knopinfo (dit is slechts gedeeltelijk)",
   "account.other-settings.confirm_close": "<strong>Bevestig Sluiten:</strong> altijd om bevestiging vragen voordat het browservenster wordt gesloten",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Genereer een {docName} Document met AI",
   "ai-generator.select_llm": "Selecteer taalmodel",
   "app.fullscreen-button.tooltip": "Volledig schermmodus, gericht op het huidige document of de pagina.",
+  "app.hotkey.dialog.help_text": "Typ om te zoeken • Nummers 1–9 voor huidige frames • ↑↓ navigeren • Return om te openen • ESC om te sluiten",
+  "app.hotkey.dialog.search_placeholder": "Zoek frames, bestanden en pagina's...",
+  "app.hotkey.dialog.title": "Sneltoets Snelle Navigatie",
   "app.verify-email-banner.edit": "Als het e-mailadres verkeerd is, pas het dan aan in de accountinstellingen.",
   "app.verify-email-banner.help.text": "Het is belangrijk om een werkend e-mailadres te hebben. We gebruiken het voor het opnieuw instellen van wachtwoorden, het verzenden van berichten, factureringsmeldingen en ondersteuning. Zorg ervoor dat uw e-mailadres correct is om op de hoogte te blijven.",
   "app.verify-email-banner.text": "{sent, select, true {E-mail verzonden! Controleer je e-mailinbox (en misschien spam) en klik op de bevestigingslink.} other {Controleer en verifieer je e-mailadres:}}",
@@ -988,6 +992,7 @@
   "labels.config": "Config",
   "labels.configuration": "Configuratie",
   "labels.configuration.short": "Config",
+  "labels.connected": "Verbonden",
   "labels.connecting": "Verbinden",
   "labels.connection": "Verbinding",
   "labels.copied": "gekopieerd",
diff --git a/src/packages/frontend/i18n/trans/pl_PL.json b/src/packages/frontend/i18n/trans/pl_PL.json
index b8a5ea7f995..4a787c693a6 100644
--- a/src/packages/frontend/i18n/trans/pl_PL.json
+++ b/src/packages/frontend/i18n/trans/pl_PL.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Podziel widok w arkuszu Sage",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Przełącz komentarzowanie zaznaczenia",
   "account.other-settings._page_size.label": "Liczba plików na stronę",
+  "account.other-settings.auto_focus": "<strong>Automatyczne ustawianie fokusu na polach tekstowych:</strong> automatycznie ustawiaj fokus na polach tekstowych, gdy się pojawiają (np. eksplorator plików, projekty, ...)",
   "account.other-settings.browser_performance.title": "Przeglądarka",
   "account.other-settings.button_tooltips": "Ukryj podpowiedzi przycisków: ukrywa niektóre podpowiedzi przycisków (to jest tylko częściowe)",
   "account.other-settings.confirm_close": "Potwierdź zamknięcie: zawsze pytaj o potwierdzenie przed zamknięciem okna przeglądarki",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Wygeneruj dokument {docName} za pomocą AI",
   "ai-generator.select_llm": "Wybierz model językowy",
   "app.fullscreen-button.tooltip": "Tryb pełnoekranowy, skupiony na bieżącym dokumencie lub stronie.",
+  "app.hotkey.dialog.help_text": "Wpisz, aby wyszukać • Numery 1–9 dla bieżących ramek • ↑↓ nawigacja • Return, aby otworzyć • ESC, aby zamknąć",
+  "app.hotkey.dialog.search_placeholder": "Przeszukaj ramki, pliki i strony...",
+  "app.hotkey.dialog.title": "Skrót Klawiszowy Szybka Nawigacja",
   "app.verify-email-banner.edit": "Jeśli adres e-mail jest niepoprawny, proszę <E>edytować</E> go w ustawieniach konta.",
   "app.verify-email-banner.help.text": "Ważne jest posiadanie działającego adresu e-mail. Używamy go do resetowania haseł, wysyłania wiadomości, powiadomień o rozliczeniach i wsparcia. Upewnij się, że Twój e-mail jest poprawny, aby być na bieżąco.",
   "app.verify-email-banner.text": "{sent, select, true {Email wysłany! Sprawdź swoją skrzynkę odbiorczą (a może spam) i kliknij link potwierdzający.} other {Proszę sprawdzić i zweryfikować swój adres e-mail:}}",
@@ -988,6 +992,7 @@
   "labels.config": "Konfiguracja",
   "labels.configuration": "Konfiguracja",
   "labels.configuration.short": "Konfiguracja",
+  "labels.connected": "Połączono",
   "labels.connecting": "Łączenie",
   "labels.connection": "Połączenie",
   "labels.copied": "skopiowano",
diff --git a/src/packages/frontend/i18n/trans/pt_BR.json b/src/packages/frontend/i18n/trans/pt_BR.json
index 40a9580cb54..f0d2f285b7a 100644
--- a/src/packages/frontend/i18n/trans/pt_BR.json
+++ b/src/packages/frontend/i18n/trans/pt_BR.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Divisão de visualização na planilha Sage",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Alternar comentário da seleção",
   "account.other-settings._page_size.label": "Número de arquivos por página",
+  "account.other-settings.auto_focus": "<strong>Focar Automaticamente no Campo de Texto:</strong> focar automaticamente nos campos de entrada de texto quando eles aparecem (por exemplo, explorador de arquivos, projetos, ...)",
   "account.other-settings.browser_performance.title": "Navegador",
   "account.other-settings.button_tooltips": "<strong>Ocultar Dicas de Botões:</strong> oculta algumas dicas de botões (isso é apenas parcial)",
   "account.other-settings.confirm_close": "<strong>Confirmar Fechamento:</strong> sempre pedir confirmação antes de fechar a janela do navegador",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Gerar um Documento {docName} usando IA",
   "ai-generator.select_llm": "Selecionar modelo de linguagem",
   "app.fullscreen-button.tooltip": "Modo de tela cheia, focado no documento ou página atual.",
+  "app.hotkey.dialog.help_text": "Digite para pesquisar • Números 1–9 para quadros atuais • ↑↓ navegar • Enter para abrir • ESC para fechar",
+  "app.hotkey.dialog.search_placeholder": "Pesquise em quadros, arquivos e páginas...",
+  "app.hotkey.dialog.title": "Navegação Rápida por Atalho",
   "app.verify-email-banner.edit": "Se o endereço de e-mail estiver errado, por favor <E>edite</E> nas configurações da conta.",
   "app.verify-email-banner.help.text": "É importante ter um endereço de e-mail funcional. Nós o usamos para redefinir senhas, enviar mensagens, notificações de cobrança e suporte. Por favor, certifique-se de que seu e-mail está correto para se manter informado.",
   "app.verify-email-banner.text": "{sent, select, true {Email enviado! Por favor, verifique a caixa de entrada do seu email (e talvez o spam) e clique no link de confirmação.} other {Por favor, verifique e confirme seu endereço de email:}}",
@@ -988,6 +992,7 @@
   "labels.config": "Configuração",
   "labels.configuration": "Configuração",
   "labels.configuration.short": "Configuração",
+  "labels.connected": "Conectado",
   "labels.connecting": "Conectando",
   "labels.connection": "Conexão",
   "labels.copied": "copiado",
diff --git a/src/packages/frontend/i18n/trans/pt_PT.json b/src/packages/frontend/i18n/trans/pt_PT.json
index 163f014640c..db52201e50c 100644
--- a/src/packages/frontend/i18n/trans/pt_PT.json
+++ b/src/packages/frontend/i18n/trans/pt_PT.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Vista dividida na folha de cálculo Sage",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Alternar comentário da seleção",
   "account.other-settings._page_size.label": "Número de ficheiros por página",
+  "account.other-settings.auto_focus": "<strong>Focar Automaticamente no Campo de Texto:</strong> focar automaticamente nos campos de texto quando eles aparecem (por exemplo, explorador de ficheiros, projetos, ...)",
   "account.other-settings.browser_performance.title": "Navegador",
   "account.other-settings.button_tooltips": "<strong>Ocultar Dicas de Botão:</strong> oculta algumas dicas de botão (isto é apenas parcial)",
   "account.other-settings.confirm_close": "<strong>Confirmar Fecho:</strong> pedir sempre confirmação antes de fechar a janela do navegador",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Gerar um Documento {docName} usando IA",
   "ai-generator.select_llm": "Selecionar modelo de linguagem",
   "app.fullscreen-button.tooltip": "Modo de ecrã completo, focado no documento ou página atual",
+  "app.hotkey.dialog.help_text": "Escreva para pesquisar • Números 1–9 para frames atuais • ↑↓ navegar • Enter para abrir • ESC para fechar",
+  "app.hotkey.dialog.search_placeholder": "Pesquisar frames, ficheiros e páginas...",
+  "app.hotkey.dialog.title": "Navegação Rápida por Atalho",
   "app.verify-email-banner.edit": "Se o endereço de email estiver errado, por favor <E>edite</E> nas configurações da conta.",
   "app.verify-email-banner.help.text": "É importante ter um endereço de email funcional. Usamo-lo para redefinições de senha, envio de mensagens, notificações de faturação e suporte. Por favor, certifique-se de que o seu email está correto para se manter informado.",
   "app.verify-email-banner.text": "{sent, select, true {Email Enviado! Por favor, verifique a sua caixa de entrada de email (e talvez o spam) e clique no link de confirmação.} other {Por favor, verifique e confirme o seu endereço de email:}}",
@@ -988,6 +992,7 @@
   "labels.config": "Configuração",
   "labels.configuration": "Configuração",
   "labels.configuration.short": "Configurar",
+  "labels.connected": "Ligado",
   "labels.connecting": "A ligar",
   "labels.connection": "Ligação",
   "labels.copied": "copiado",
diff --git a/src/packages/frontend/i18n/trans/ru_RU.json b/src/packages/frontend/i18n/trans/ru_RU.json
index 74e189710d7..321329ae571 100644
--- a/src/packages/frontend/i18n/trans/ru_RU.json
+++ b/src/packages/frontend/i18n/trans/ru_RU.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Разделить вид в рабочем листе Sage",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Переключить комментирование выделения",
   "account.other-settings._page_size.label": "Количество файлов на странице",
+  "account.other-settings.auto_focus": "<strong>Автоматическая фокусировка текстового ввода:</strong> автоматически фокусировать поля ввода текста, когда они появляются (например, проводник файлов, проекты, ...)",
   "account.other-settings.browser_performance.title": "Браузер",
   "account.other-settings.button_tooltips": "<strong>Скрыть подсказки кнопок:</strong> скрывает некоторые подсказки кнопок (это только частично)",
   "account.other-settings.confirm_close": "<strong>Подтвердите закрытие:</strong> всегда запрашивать подтверждение перед закрытием окна браузера",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Сгенерировать документ {docName} с помощью ИИ",
   "ai-generator.select_llm": "Выберите языковую модель",
   "app.fullscreen-button.tooltip": "Полноэкранный режим, сосредоточенный на текущем документе или странице",
+  "app.hotkey.dialog.help_text": "Введите для поиска • Цифры 1–9 для текущих кадров • ↑↓ навигация • Return для открытия • ESC для закрытия",
+  "app.hotkey.dialog.search_placeholder": "Поиск кадров, файлов и страниц...",
+  "app.hotkey.dialog.title": "Горячая клавиша Быстрая навигация",
   "app.verify-email-banner.edit": "Если адрес электронной почты неверен, пожалуйста, <E>отредактируйте</E> его в настройках аккаунта.",
   "app.verify-email-banner.help.text": "Важно иметь работающий адрес электронной почты. Мы используем его для сброса пароля, отправки сообщений, уведомлений о выставлении счетов и поддержки. Пожалуйста, убедитесь, что ваш адрес электронной почты правильный, чтобы оставаться в курсе событий.",
   "app.verify-email-banner.text": "{sent, select, true {Электронное письмо отправлено! Пожалуйста, проверьте ваш почтовый ящик (и, возможно, спам) и нажмите на ссылку для подтверждения.} other {Пожалуйста, проверьте и подтвердите ваш адрес электронной почты:}}",
@@ -988,6 +992,7 @@
   "labels.config": "Конфигурация",
   "labels.configuration": "Конфигурация",
   "labels.configuration.short": "Конфиг",
+  "labels.connected": "Подключено",
   "labels.connecting": "Соединение",
   "labels.connection": "Соединение",
   "labels.copied": "скопировано",
diff --git a/src/packages/frontend/i18n/trans/tr_TR.json b/src/packages/frontend/i18n/trans/tr_TR.json
index 54cc988d1eb..ef34ead1d69 100644
--- a/src/packages/frontend/i18n/trans/tr_TR.json
+++ b/src/packages/frontend/i18n/trans/tr_TR.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "Sage çalışma sayfasında bölünmüş görünüm",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "Yorum satırını değiştir",
   "account.other-settings._page_size.label": "Sayfa başına dosya sayısı",
+  "account.other-settings.auto_focus": "<strong>Otomatik Odak Metin Girişi:</strong> metin giriş alanlarını göründüklerinde otomatik olarak odakla (ör. dosya gezgini, projeler, ...)",
   "account.other-settings.browser_performance.title": "Tarayıcı",
   "account.other-settings.button_tooltips": "<strong>Düğme İpuçlarını Gizle:</strong> bazı düğme ipuçlarını gizler (bu sadece kısmi)",
   "account.other-settings.confirm_close": "<strong>Kapatmayı Onayla:</strong> tarayıcı penceresini kapatmadan önce her zaman onay iste",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "Yapay Zeka kullanarak bir {docName} Belgesi oluştur",
   "ai-generator.select_llm": "Dil modelini seç",
   "app.fullscreen-button.tooltip": "Tam ekran modu, mevcut belge veya sayfaya odaklanılmış.",
+  "app.hotkey.dialog.help_text": "Yazmak için arayın • Mevcut çerçeveler için 1–9 sayıları • ↑↓ gezin • Açmak için Return • Kapatmak için ESC",
+  "app.hotkey.dialog.search_placeholder": "Çerçeveleri, dosyaları ve sayfaları ara...",
+  "app.hotkey.dialog.title": "Kısayol Hızlı Gezinme",
   "app.verify-email-banner.edit": "E-posta adresi yanlışsa, lütfen hesap ayarlarında <E>düzenleyin</E>.",
   "app.verify-email-banner.help.text": "Çalışan bir e-posta adresine sahip olmak önemlidir. Şifre sıfırlama, mesaj gönderme, fatura bildirimleri ve destek için kullanıyoruz. Bilgilendirilmek için e-postanızın doğru olduğundan emin olun.",
   "app.verify-email-banner.text": "{sent, select, true {E-posta Gönderildi! Lütfen e-posta gelen kutunuzu (ve belki spam klasörünü) kontrol edin ve onay bağlantısına tıklayın.} other {Lütfen e-posta adresinizi kontrol edin ve doğrulayın:}}",
@@ -988,6 +992,7 @@
   "labels.config": "Yapılandırma",
   "labels.configuration": "Yapılandırma",
   "labels.configuration.short": "Yapılandırma",
+  "labels.connected": "Bağlandı",
   "labels.connecting": "Bağlanıyor",
   "labels.connection": "Bağlantı",
   "labels.copied": "kopyalandı",
diff --git a/src/packages/frontend/i18n/trans/zh_CN.json b/src/packages/frontend/i18n/trans/zh_CN.json
index d61e05b30bf..b1c91d11d52 100644
--- a/src/packages/frontend/i18n/trans/zh_CN.json
+++ b/src/packages/frontend/i18n/trans/zh_CN.json
@@ -66,6 +66,7 @@
   "account.keyboard-shortcuts.shortcut.split-view-sagews": "在 Sage 工作表中分割视图",
   "account.keyboard-shortcuts.shortcut.toggle-comment": "切换注释选择",
   "account.other-settings._page_size.label": "每页文件数量",
+  "account.other-settings.auto_focus": "<strong>自动聚焦文本输入：</strong>文本输入字段出现时自动聚焦（例如，文件浏览器，项目，...）",
   "account.other-settings.browser_performance.title": "浏览器",
   "account.other-settings.button_tooltips": "<strong>隐藏按钮提示：</strong>隐藏部分按钮提示（这只是部分隐藏）",
   "account.other-settings.confirm_close": "<strong>确认关闭：</strong>在关闭浏览器窗口前始终要求确认",
@@ -155,6 +156,9 @@
   "ai-generate-document.modal.title": "使用AI生成{docName}文档",
   "ai-generator.select_llm": "选择语言模型",
   "app.fullscreen-button.tooltip": "全屏模式，专注于当前文档或页面",
+  "app.hotkey.dialog.help_text": "输入搜索 • 数字 1–9 用于当前框架 • ↑↓ 导航 • 回车键打开 • ESC 关闭",
+  "app.hotkey.dialog.search_placeholder": "搜索框架、文件和页面...",
+  "app.hotkey.dialog.title": "快捷导航快捷键",
   "app.verify-email-banner.edit": "如果电子邮件地址错误，请在账户设置中<E>编辑</E>。",
   "app.verify-email-banner.help.text": "拥有一个有效的电子邮件地址非常重要。我们用它来重置密码、发送消息、账单通知和支持。请确保您的电子邮件正确以保持信息畅通。",
   "app.verify-email-banner.text": "{sent, select, true {邮件已发送！请检查您的电子邮箱收件箱（可能还有垃圾邮件）并点击确认链接。} other {请检查并验证您的电子邮箱地址：}}",
@@ -988,6 +992,7 @@
   "labels.config": "配置",
   "labels.configuration": "配置",
   "labels.configuration.short": "配置",
+  "labels.connected": "已连接",
   "labels.connecting": "连接中",
   "labels.connection": "连接",
   "labels.copied": "已复制",
diff --git a/src/packages/frontend/jupyter/cell-buttonbar.tsx b/src/packages/frontend/jupyter/cell-buttonbar.tsx
index 1e77d92eb3a..be0343efc07 100644
--- a/src/packages/frontend/jupyter/cell-buttonbar.tsx
+++ b/src/packages/frontend/jupyter/cell-buttonbar.tsx
@@ -93,27 +93,31 @@ export const CellButtonBar: React.FC<Props> = React.memo(
       tooltip: string;
       icon: string;
       label: string;
+      isRunning: boolean;
       onClick: () => void;
     } {
-      switch (cell.get("state")) {
-        case "busy":
-        case "run":
-        case "start":
-          return {
-            tooltip: "Stop this cell",
-            icon: "stop",
-            label: "Stop",
-            onClick: () => actions?.signal("SIGINT"),
-          };
+      const isRunning =
+        cell.get("state") === "busy" ||
+        cell.get("state") === "run" ||
+        cell.get("state") === "start";
 
-        default:
-          return {
-            tooltip: "Run this cell",
-            label: "Run",
-            icon: "step-forward",
-            onClick: () => frameActions.current?.run_cell(id),
-          };
+      if (isRunning) {
+        return {
+          tooltip: "Stop this cell",
+          icon: "stop",
+          label: "Stop",
+          isRunning: true,
+          onClick: () => actions?.signal("SIGINT"),
+        };
       }
+
+      return {
+        tooltip: "Run this cell",
+        label: "Run",
+        icon: "step-forward",
+        isRunning: false,
+        onClick: () => frameActions.current?.run_cell(id),
+      };
     }
 
     function renderCodeBarRunStop() {
@@ -127,7 +131,7 @@ export const CellButtonBar: React.FC<Props> = React.memo(
         return;
       }
 
-      const { label, icon, tooltip, onClick } = getRunStopButton();
+      const { label, icon, tooltip, onClick, isRunning } = getRunStopButton();
 
       // ATTN: this must be wrapped in a plain div, otherwise it's own flex & width 100% style disturbs the button bar
       return (
@@ -159,6 +163,8 @@ export const CellButtonBar: React.FC<Props> = React.memo(
                 },
               ],
             }}
+            aria-label={`${label} cell${isRunning ? " (running)" : ""}, dropdown menu: run all above, run all below`}
+            aria-haspopup="menu"
           >
             <Tooltip placement="top" title={tooltip}>
               <span style={CODE_BAR_BTN_STYLE}>
@@ -234,6 +240,8 @@ export const CellButtonBar: React.FC<Props> = React.memo(
               }
               trackButton("format");
             }}
+            aria-label="Format code"
+            aria-busy={formatting}
           >
             <Icon name={formatting ? "spinner" : "sitemap"} spin={formatting} />{" "}
             <FormattedMessage
@@ -279,6 +287,7 @@ export const CellButtonBar: React.FC<Props> = React.memo(
           onClick={() => {
             frameActions.current?.toggle_md_cell_edit(id);
           }}
+          aria-label={editing ? "Save markdown" : "Edit markdown"}
         >
           <Icon name={editing ? "save" : "edit"} />{" "}
           {editing
@@ -289,7 +298,12 @@ export const CellButtonBar: React.FC<Props> = React.memo(
     }
 
     return (
-      <div className="hidden-xs" style={MINI_BUTTONS_STYLE_INNER}>
+      <div
+        className="hidden-xs"
+        style={MINI_BUTTONS_STYLE_INNER}
+        role="region"
+        aria-label={`Cell ${index + 1} controls`}
+      >
         {renderCodeBarCellTiming()}
         {renderCodeBarRunStop()}
         {renderCodeBarComputeServer()}
diff --git a/src/packages/frontend/jupyter/cell-list.tsx b/src/packages/frontend/jupyter/cell-list.tsx
index ff58a778193..91a16d3b7a0 100644
--- a/src/packages/frontend/jupyter/cell-list.tsx
+++ b/src/packages/frontend/jupyter/cell-list.tsx
@@ -447,8 +447,28 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
       />
     ) : undefined;
 
+    // ARIA: Build cell label with type, number, and status
+    const cellType = cell.get("cell_type"); // "code" or "markdown"
+    const cellNumber = index + 1; // Convert to 1-indexed for user readability
+    const isCurrent = id === cur_id;
+    const isSelected = sel_ids?.contains(id);
+    const hasError =
+      cellType === "code" &&
+      cell.get("outputs")?.some((o) => o.get("output_type")?.includes("error"));
+
+    const cellLabel = `${
+      cellType === "code" ? "Code" : "Markdown"
+    } cell ${cellNumber}${isCurrent ? " (current)" : ""}${
+      isSelected ? " (selected)" : ""
+    }${hasError ? " (has error)" : ""}`;
+
     return (
-      <div key={id}>
+      <div
+        key={id}
+        role="region"
+        aria-label={cellLabel}
+        aria-current={isCurrent ? "true" : undefined}
+      >
         <Cell
           id={id}
           index={index}
diff --git a/src/packages/frontend/project/explorer/search-bar.tsx b/src/packages/frontend/project/explorer/search-bar.tsx
index a4a6359cd92..42aae0e2317 100644
--- a/src/packages/frontend/project/explorer/search-bar.tsx
+++ b/src/packages/frontend/project/explorer/search-bar.tsx
@@ -6,6 +6,8 @@
 import { Alert, Flex } from "antd";
 import React from "react";
 import { useIntl } from "react-intl";
+
+import { useAutoFocusPreference } from "@cocalc/frontend/account";
 import { CSS, redux } from "@cocalc/frontend/app-framework";
 import { Icon, SearchInput } from "@cocalc/frontend/components";
 import { ProjectActions } from "@cocalc/frontend/project_store";
@@ -73,6 +75,7 @@ export const SearchBar = React.memo((props: Props) => {
   } = props;
 
   const intl = useIntl();
+  const shouldAutoFocus = useAutoFocusPreference();
   const { project_id } = useProjectContext();
 
   // edit → run → edit
@@ -300,8 +303,8 @@ export const SearchBar = React.memo((props: Props) => {
   return (
     <Flex style={{ flex: "1 0 auto", position: "relative" }} vertical={true}>
       <SearchInput
-        autoFocus
-        autoSelect
+        autoFocus={shouldAutoFocus}
+        autoSelect={shouldAutoFocus}
         placeholder={intl.formatMessage({
           id: "project.explorer.search-bar.placeholder",
           defaultMessage: 'Filter files or "/" for terminal...',
diff --git a/src/packages/frontend/project/new/file-type-selector.tsx b/src/packages/frontend/project/new/file-type-selector.tsx
index c5feffb09e4..9edb5ed7494 100644
--- a/src/packages/frontend/project/new/file-type-selector.tsx
+++ b/src/packages/frontend/project/new/file-type-selector.tsx
@@ -44,6 +44,8 @@ interface Props {
   filename: string;
   makeNewFilename?: (ext: string) => void;
   filenameChanged?: boolean;
+  role?: string;
+  "aria-label"?: string;
 }
 
 // Use Rows and Cols to append more buttons to this class.
@@ -60,6 +62,8 @@ export function FileTypeSelector({
   filename,
   makeNewFilename,
   filenameChanged,
+  role,
+  "aria-label": ariaLabel,
 }: Props) {
   const { project_id } = useProjectContext();
   const intl = useIntl();
@@ -685,7 +689,7 @@ export function FileTypeSelector({
   }
 
   return (
-    <div>
+    <div role={role} aria-label={ariaLabel}>
       {renderJupyterNotebook()}
       {renderLinux()}
       {renderMarkdown()}
diff --git a/src/packages/frontend/project/new/new-file-button.tsx b/src/packages/frontend/project/new/new-file-button.tsx
index dc328884a2f..5e6bccc3479 100644
--- a/src/packages/frontend/project/new/new-file-button.tsx
+++ b/src/packages/frontend/project/new/new-file-button.tsx
@@ -111,6 +111,7 @@ export function NewFileButton({
       style={style}
       className={className}
       disabled={disabled || loading}
+      {...(typeof name === "string" ? { "aria-label": name } : {})}
     >
       {renderBody()}
     </Button>
diff --git a/src/packages/frontend/project/new/new-file-page.tsx b/src/packages/frontend/project/new/new-file-page.tsx
index 08df80c968c..3001bf237e3 100644
--- a/src/packages/frontend/project/new/new-file-page.tsx
+++ b/src/packages/frontend/project/new/new-file-page.tsx
@@ -7,7 +7,10 @@ import { Button, Input, Modal, Space } from "antd";
 import { useEffect, useRef, useState } from "react";
 import { defineMessage, FormattedMessage, useIntl } from "react-intl";
 
-import { default_filename } from "@cocalc/frontend/account";
+import {
+  default_filename,
+  useAutoFocusPreference,
+} from "@cocalc/frontend/account";
 import { Alert, Col, Row } from "@cocalc/frontend/antd-bootstrap";
 import {
   ProjectActions,
@@ -54,6 +57,7 @@ interface Props {
 
 export default function NewFilePage(props: Props) {
   const intl = useIntl();
+  const shouldAutoFocus = useAutoFocusPreference();
   const [createFolderModal, setCreateFolderModal] = useState<boolean>(false);
   const createFolderModalRef = useRef<any>(null);
   useEffect(() => {
@@ -348,7 +352,7 @@ export default function NewFilePage(props: Props) {
       show_header
       icon={"plus-circle"}
       title={
-        <>
+        <span>
           &nbsp;
           <FormattedMessage
             id="project.new-file-page.title"
@@ -392,7 +396,7 @@ export default function NewFilePage(props: Props) {
               <Input
                 ref={createFolderModalRef}
                 style={{ margin: "15px 0" }}
-                autoFocus
+                autoFocus={shouldAutoFocus}
                 size="large"
                 value={filename}
                 onChange={(e) => setFilename(e.target.value)}
@@ -405,7 +409,7 @@ export default function NewFilePage(props: Props) {
               />
             </div>
           </Modal>
-        </>
+        </span>
       }
       subtitle={
         <div>
@@ -464,7 +468,7 @@ export default function NewFilePage(props: Props) {
               <Input
                 size="large"
                 ref={inputRef}
-                autoFocus
+                autoFocus={shouldAutoFocus}
                 value={filename}
                 disabled={extensionWarning}
                 placeholder={
@@ -516,6 +520,8 @@ export default function NewFilePage(props: Props) {
             availableFeatures={availableFeatures}
             filename={filename}
             filenameChanged={filenameChanged}
+            role="region"
+            aria-label="File type selection"
           >
             <Tip
               title={"Download files from the Internet"}
diff --git a/src/packages/frontend/project/page/activity-bar-tabs.tsx b/src/packages/frontend/project/page/activity-bar-tabs.tsx
index 0ecdd64a9ae..dd2398e24c8 100644
--- a/src/packages/frontend/project/page/activity-bar-tabs.tsx
+++ b/src/packages/frontend/project/page/activity-bar-tabs.tsx
@@ -54,12 +54,11 @@ export default function ProjectTabs(props: PTProps) {
   //if (openFiles.size == 0) return <></>;
 
   return (
-    <div
+    <nav
       className="smc-file-tabs"
       style={{
         width: "100%",
         height: "40px",
-        overflow: "hidden",
       }}
     >
       <div style={{ display: "flex" }}>
@@ -86,7 +85,7 @@ export default function ProjectTabs(props: PTProps) {
           <ChatIndicatorTab activeTab={activeTab} project_id={project_id} />
         </div>
       </div>
-    </div>
+    </nav>
   );
 }
 
@@ -227,6 +226,10 @@ export function VerticalFixedTabs({
         flyout={name}
         condensed={condensed}
         showLabel={showActBarLabels}
+        role="tab"
+        aria-selected={isActive}
+        aria-controls={`activity-panel-${name}`}
+        tabIndex={0}
       />
     );
     if (tab != null) items.push(tab);
@@ -261,6 +264,8 @@ export function VerticalFixedTabs({
   return (
     <div
       ref={parent}
+      role="tablist"
+      aria-label="Project activity tabs"
       style={{
         display: "flex",
         flexDirection: "column",
diff --git a/src/packages/frontend/project/page/consts.ts b/src/packages/frontend/project/page/consts.ts
new file mode 100644
index 00000000000..b9846dfb1cb
--- /dev/null
+++ b/src/packages/frontend/project/page/consts.ts
@@ -0,0 +1,48 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details.
+ */
+
+/**
+ * ARIA labels for project page content tabs/panels.
+ * Maps tab names to descriptive labels for screen readers.
+ * This is a first step to extract tab titles to a central location
+ * and avoid duplication with other tab definitions.
+ */
+
+export const PROJECT_TAB_ARIA_LABELS: Record<string, string> = {
+  home: "Home",
+  files: "File Explorer",
+  new: "Create New",
+  log: "Recent Files",
+  search: "Find",
+  servers: "Compute Servers",
+  settings: "Project Settings",
+  info: "Project Information",
+  users: "Collaborators",
+  upgrades: "Licenses",
+  active: "Open Files",
+} as const;
+
+/**
+ * Get the ARIA label for a project tab by name.
+ * For editor tabs (editor-{path}), returns "Editor: {filename}"
+ * For fixed tabs, returns the label from PROJECT_TAB_ARIA_LABELS
+ * Falls back to "Project Content" if tab name is not recognized
+ */
+export function getProjectTabAriaLabel(tabName: string): string {
+  // Handle editor tabs (editor-{path})
+  if (tabName.startsWith("editor-")) {
+    const path = tabName.slice("editor-".length);
+    return `Editor: ${path}`;
+  }
+
+  // Look up fixed tab label
+  const label = PROJECT_TAB_ARIA_LABELS[tabName];
+  if (label != null) {
+    return label;
+  }
+
+  // Fallback for unknown tabs
+  return "Project Content";
+}
diff --git a/src/packages/frontend/project/page/content.tsx b/src/packages/frontend/project/page/content.tsx
index 677dc16cd6b..d99bebb5ec6 100644
--- a/src/packages/frontend/project/page/content.tsx
+++ b/src/packages/frontend/project/page/content.tsx
@@ -44,6 +44,7 @@ import { editor_id } from "@cocalc/frontend/project/utils";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { hidden_meta_file } from "@cocalc/util/misc";
 import { useProjectContext } from "../context";
+import { getProjectTabAriaLabel } from "./consts";
 import getAnchorTagComponent from "./anchor-tag-component";
 import HomePage from "./home-page";
 import { ProjectCollaboratorsPage } from "./project-collaborators";
@@ -100,6 +101,8 @@ export const Content: React.FC<Props> = (props: Props) => {
   return (
     <div
       ref={contentRef}
+      role="tabpanel"
+      aria-label={getProjectTabAriaLabel(tab_name)}
       style={{
         ...MAIN_STYLE,
         ...(!is_visible ? { display: "none" } : undefined),
diff --git a/src/packages/frontend/project/page/file-tab.tsx b/src/packages/frontend/project/page/file-tab.tsx
index c4004c218bc..d3e6b9c420c 100644
--- a/src/packages/frontend/project/page/file-tab.tsx
+++ b/src/packages/frontend/project/page/file-tab.tsx
@@ -22,6 +22,7 @@ import {
   useRedux,
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
+import { ariaKeyDown } from "@cocalc/frontend/app/aria";
 import { Icon, IconName, r_join } from "@cocalc/frontend/components";
 import ComputeServerSpendRate from "@cocalc/frontend/compute/spend-rate";
 import { IS_MOBILE } from "@cocalc/frontend/feature";
@@ -184,6 +185,11 @@ interface Props0 {
   flyout?: FixedTab;
   condensed?: boolean;
   showLabel?: boolean; // only relevant for the vertical activity bar. still showing alert tags!
+  // ARIA attributes for tab semantics
+  role?: string;
+  "aria-selected"?: boolean;
+  "aria-controls"?: string;
+  tabIndex?: number;
 }
 interface PropsPath extends Props0 {
   path: string;
@@ -215,10 +221,10 @@ export function FileTab(props: Readonly<Props>) {
   // alerts only work on non-docker projects (for now) -- #7077
   const status_alerts: string[] =
     !onCoCalcDocker && name === "info"
-      ? project_status
+      ? (project_status
           ?.get("alerts")
           ?.map((a) => a.get("type"))
-          .toJS() ?? []
+          .toJS() ?? [])
       : [];
 
   const other_settings = useTypedRedux("account", "other_settings");
@@ -296,6 +302,28 @@ export function FileTab(props: Readonly<Props>) {
     }
   }
 
+  function handleKeyActivation() {
+    if (actions == null) return;
+    if (path != null) {
+      actions.set_active_tab(path_to_tab(path));
+      track("switch-to-file-tab", {
+        project_id,
+        path,
+        how: "keyboard",
+      });
+    } else if (name != null) {
+      if (flyout != null && FIXED_PROJECT_TABS[flyout].noFullPage) {
+        // this tab can't be opened in a full page
+        actions?.toggleFlyout(flyout);
+      } else if (flyout != null && actBar !== "both") {
+        // keyboard activation just activates, no modifier key logic
+        setActiveTab(name);
+      } else {
+        setActiveTab(name);
+      }
+    }
+  }
+
   function renderFlyoutCaret() {
     if (flyout == null || actBar !== "both") return;
 
@@ -303,8 +331,8 @@ export function FileTab(props: Readonly<Props>) {
       flyout === active_flyout
         ? COLORS.PROJECT.FIXED_LEFT_ACTIVE
         : active_flyout == null
-        ? COLORS.GRAY_L
-        : COLORS.GRAY_L0;
+          ? COLORS.GRAY_L
+          : COLORS.GRAY_L0;
     const bg = flyout === active_flyout ? COLORS.GRAY_L0 : undefined;
 
     return (
@@ -368,7 +396,7 @@ export function FileTab(props: Readonly<Props>) {
 
   const icon =
     path != null
-      ? file_options(path)?.icon ?? "code-o"
+      ? (file_options(path)?.icon ?? "code-o")
       : FIXED_PROJECT_TABS[name!].icon;
 
   const tags =
@@ -466,6 +494,15 @@ export function FileTab(props: Readonly<Props>) {
       cocalc-test={label}
       onClick={click}
       onMouseUp={onMouseUp}
+      onKeyDown={
+        props.tabIndex != null
+          ? ariaKeyDown(handleKeyActivation, false)
+          : undefined
+      }
+      tabIndex={props.tabIndex}
+      role={props.role}
+      aria-selected={props["aria-selected"]}
+      aria-controls={props["aria-controls"]}
     >
       <div
         style={{
diff --git a/src/packages/frontend/project/page/file-tabs.tsx b/src/packages/frontend/project/page/file-tabs.tsx
index 0e1eaab893c..f3753baacf2 100644
--- a/src/packages/frontend/project/page/file-tabs.tsx
+++ b/src/packages/frontend/project/page/file-tabs.tsx
@@ -9,10 +9,11 @@ Tabs for the open files in a project.
 
 import type { TabsProps } from "antd";
 import { Tabs } from "antd";
+
 import { useActions } from "@cocalc/frontend/app-framework";
 import {
-  renderTabBar,
   SortableTabs,
+  SortableTab,
   useItemContext,
   useSortable,
 } from "@cocalc/frontend/components/sortable-tabs";
@@ -22,7 +23,14 @@ import { FileTab } from "./file-tab";
 
 const MIN_WIDTH = 48;
 
-function Label({ path, project_id, label }) {
+interface LabelProps {
+  path: string;
+  project_id: string;
+  label: string;
+  isActive?: boolean;
+}
+
+function Label({ path, project_id, label, isActive }: LabelProps) {
   const { width } = useItemContext();
   const { active } = useSortable({ id: project_id });
   return (
@@ -37,6 +45,9 @@ function Label({ path, project_id, label }) {
           ? { width: Math.max(MIN_WIDTH, width + 15), marginRight: "-10px" }
           : undefined),
       }}
+      role="tab"
+      aria-selected={isActive ?? false}
+      aria-controls={`content-${path.replace(/[^a-zA-Z0-9-]/g, "-")}`}
     />
   );
 }
@@ -60,6 +71,22 @@ function keyToPath(s: string): string {
   return s.replace(/\uFE35/g, '"');
 }
 
+function renderTabBar(tabBarProps, DefaultTabBar, activateTab) {
+  return (
+    <DefaultTabBar {...tabBarProps}>
+      {(node) => (
+        <SortableTab
+          key={node.key}
+          id={node.key}
+          onKeyReturn={() => activateTab(keyToPath(node.key))}
+        >
+          {node}
+        </SortableTab>
+      )}
+    </DefaultTabBar>
+  );
+}
+
 export default function FileTabs({ openFiles, project_id, activeTab }) {
   const actions = useActions({ project_id });
   if (openFiles == null) {
@@ -82,15 +109,21 @@ export default function FileTabs({ openFiles, project_id, activeTab }) {
 
   const labels = file_tab_labels(paths);
   const items: TabsProps["items"] = [];
+  const activeKey = activeTab.startsWith(EDITOR_PREFIX)
+    ? pathToKey(activeTab.slice(EDITOR_PREFIX.length))
+    : "";
 
   for (let index = 0; index < labels.length; index++) {
+    const pathKey = pathToKey(paths[index]);
+    const isActive = pathKey === activeKey;
     items.push({
-      key: pathToKey(paths[index]),
+      key: pathKey,
       label: (
         <Label
           path={paths[index]}
           project_id={project_id}
           label={labels[index]}
+          isActive={isActive}
         />
       ),
     });
@@ -128,10 +161,6 @@ export default function FileTabs({ openFiles, project_id, activeTab }) {
     });
   }
 
-  const activeKey = activeTab.startsWith(EDITOR_PREFIX)
-    ? pathToKey(activeTab.slice(EDITOR_PREFIX.length))
-    : "";
-
   function onDragStart(event) {
     if (actions == null) return;
     if (event?.active?.id != activeKey) {
@@ -143,28 +172,45 @@ export default function FileTabs({ openFiles, project_id, activeTab }) {
     }
   }
 
+  function activateTab(path: string) {
+    if (actions == null) return;
+    actions.set_active_tab(path_to_tab(path));
+  }
+
   return (
-    <SortableTabs items={keys} onDragStart={onDragStart} onDragEnd={onDragEnd}>
-      <Tabs
-        animated={false}
-        renderTabBar={renderTabBar}
-        tabBarStyle={{
-          minHeight: "36px",
-          background: "#e8e8e8",
-          borderTop: "2px solid lightgrey",
-        }}
-        onEdit={onEdit}
-        style={{ width: "100%" }}
-        size="small"
-        items={items}
-        activeKey={activeKey}
-        type={"editable-card"}
-        onChange={(key) => {
-          if (actions == null) return;
-          actions.set_active_tab(path_to_tab(keyToPath(key)));
-        }}
-        popupClassName={"cocalc-files-tabs-more"}
-      />
-    </SortableTabs>
+    <nav
+      role="main"
+      aria-label="Open files"
+      style={{ flex: 1, display: "flex" }}
+    >
+      <SortableTabs
+        items={keys}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+      >
+        <Tabs
+          animated={false}
+          renderTabBar={(tabBarProps, DefaultTabBar) =>
+            renderTabBar(tabBarProps, DefaultTabBar, activateTab)
+          }
+          tabBarStyle={{
+            minHeight: "36px",
+            background: "#e8e8e8",
+            borderTop: "2px solid lightgrey",
+          }}
+          onEdit={onEdit}
+          style={{ width: "100%" }}
+          size="small"
+          items={items}
+          activeKey={activeKey}
+          type={"editable-card"}
+          onChange={(key) => {
+            if (actions == null) return;
+            actions.set_active_tab(path_to_tab(keyToPath(key)));
+          }}
+          popupClassName={"cocalc-files-tabs-more"}
+        />
+      </SortableTabs>
+    </nav>
   );
 }
diff --git a/src/packages/frontend/project/page/page.tsx b/src/packages/frontend/project/page/page.tsx
index 44b7630b911..f3ab47e99e4 100644
--- a/src/packages/frontend/project/page/page.tsx
+++ b/src/packages/frontend/project/page/page.tsx
@@ -27,7 +27,7 @@ import {
 } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 import StudentPayUpgrade from "@cocalc/frontend/purchases/student-pay";
 import track from "@cocalc/frontend/user-tracking";
-import { EDITOR_PREFIX, path_to_tab } from "@cocalc/util/misc";
+import { EDITOR_PREFIX, path_to_tab, path_split } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { AnonymousName } from "../anonymous-name";
 import {
@@ -89,6 +89,12 @@ export const ProjectPage: React.FC<Props> = (props: Props) => {
     project_id,
     "deleted",
   ]);
+  const project_title = useRedux([
+    "projects",
+    "project_map",
+    project_id,
+    "title",
+  ]);
   const projectCtx = useProjectContextProvider({
     project_id,
     is_active,
@@ -258,7 +264,12 @@ export const ProjectPage: React.FC<Props> = (props: Props) => {
     if (fullscreen && fullscreen !== "project") return;
 
     return (
-      <div style={{ display: "flex", flexDirection: "row" }}>
+      // ARIA: aside element for right sidebar (flyout panel)
+      <aside
+        role="complementary"
+        aria-label="Project sidebar"
+        style={{ display: "flex", flexDirection: "row" }}
+      >
         <FlyoutBody flyout={flyout} flyoutWidth={flyoutWidth} />
         <DndContext
           onDragStart={() => setOldFlyoutWidth(flyoutWidth)}
@@ -270,7 +281,7 @@ export const ProjectPage: React.FC<Props> = (props: Props) => {
             oldFlyoutWidth={oldFlyoutWidth}
           />
         </DndContext>
-      </div>
+      </aside>
     );
   }
 
@@ -298,7 +309,7 @@ export const ProjectPage: React.FC<Props> = (props: Props) => {
           width={homePageButtonWidth}
         />
         {renderFlyoutHeader()}
-        <div style={{ flex: 1, overflow: "hidden", display: "flex" }}>
+        <div style={{ flex: 1, display: "flex" }}>
           <StartButton minimal style={{ margin: "2px 4px 0px 4px" }} />
           <ProjectTabs project_id={project_id} />
         </div>
@@ -343,7 +354,10 @@ export const ProjectPage: React.FC<Props> = (props: Props) => {
       );
     } else {
       return (
-        <div
+        // ARIA: aside element for activity bar (main navigation sidebar)
+        <aside
+          role="main"
+          aria-label="Project activity bar"
           style={{
             flex: "0 0 auto",
             display: "flex",
@@ -355,20 +369,91 @@ export const ProjectPage: React.FC<Props> = (props: Props) => {
           }}
         >
           <VerticalFixedTabs setHomePageButtonWidth={setHomePageButtonWidth} />
-        </div>
+        </aside>
       );
     }
   }
 
+  function focusPrimaryEditor() {
+    if (!mainRef.current) {
+      return;
+    }
+
+    // Find the active frame container (which has frame-editor-active class)
+    const activeFrame = mainRef.current.querySelector(
+      ".frame-editor-active",
+    ) as HTMLElement;
+    if (!activeFrame) {
+      return;
+    }
+
+    // Strategy 1: Try to focus contenteditable element (Jupyter cells, rich editors)
+    let target = activeFrame.querySelector(
+      "[contenteditable='true']:not([contenteditable='false'])",
+    ) as HTMLElement;
+    if (target) {
+      target.focus();
+      return;
+    }
+
+    // Strategy 2: Try CodeMirror editors
+    target = activeFrame.querySelector(
+      ".cm-editor, .CodeMirror-code",
+    ) as HTMLElement;
+    if (target) {
+      target.focus();
+      return;
+    }
+
+    // Strategy 3: Try input/textarea elements
+    target = activeFrame.querySelector(
+      "input:not([type='hidden']), textarea",
+    ) as HTMLElement;
+    if (target) {
+      target.focus();
+      return;
+    }
+
+    // Fallback: Focus the frame itself
+    activeFrame.focus();
+  }
+
+  function handleContentKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      focusPrimaryEditor();
+      // Don't prevent default - let the editor's native handlers process Return
+      // (e.g., Jupyter's edit mode toggle, CodeMirror's newline insertion)
+      return;
+    }
+  }
+
   function renderMainContent() {
+    // Find the current file being edited and extract just the filename
+    let currentFilename = active_project_tab;
+    if (open_files_order != null) {
+      const currentPath = open_files_order.find(
+        (path) => !!path && path_to_tab(path) === active_project_tab,
+      );
+      if (currentPath) {
+        currentFilename = path_split(currentPath).tail;
+      }
+    }
+
     return (
+      // ARIA: main element for primary editor content
+      // Focusable landmark: Alt+Shift+M navigates here, Return key focuses the editor
       <div
         ref={mainRef}
+        role="main"
+        aria-label={`Content: ${currentFilename}`}
+        tabIndex={0}
+        onKeyDown={handleContentKeyDown}
         style={{
           flex: 1,
           display: "flex",
           flexDirection: "column",
           overflowX: "auto",
+          outline: "none", // Remove default outline; CSS provides better styling
         }}
       >
         {START_BANNER && <StartButton />}
@@ -385,7 +470,12 @@ export const ProjectPage: React.FC<Props> = (props: Props) => {
 
   return (
     <ProjectContext.Provider value={projectCtx}>
-      <div className="container-content" style={PAGE_STYLE}>
+      <div
+        className="container-content"
+        role="region"
+        aria-label={`Project: ${project_title ?? project_id}`}
+        style={PAGE_STYLE}
+      >
         <StudentPayUpgrade project_id={project_id} />
         <AnonymousName project_id={project_id} />
         <DiskSpaceWarning project_id={project_id} />
diff --git a/src/packages/frontend/projects/create-project.tsx b/src/packages/frontend/projects/create-project.tsx
index fe3fcf7dedf..c483bb56537 100644
--- a/src/packages/frontend/projects/create-project.tsx
+++ b/src/packages/frontend/projects/create-project.tsx
@@ -11,6 +11,7 @@ import { Button, Card, Col, Form, Input, Modal, Row, Space } from "antd";
 import { delay } from "awaiting";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { useAutoFocusPreference } from "@cocalc/frontend/account";
 import { Well } from "@cocalc/frontend/antd-bootstrap";
 import {
   CSS,
@@ -60,6 +61,7 @@ export function NewProjectCreator({
   open_trigger,
 }: Props) {
   const intl = useIntl();
+  const shouldAutoFocus = useAutoFocusPreference();
   // view --> edit --> saving --> view
   const [state, set_state] = useState<EditState>(noProjects ? "edit" : "view");
   const [title_text, set_title_text] = useState<string>(
@@ -378,7 +380,7 @@ export function NewProjectCreator({
                   disabled={state === "saving"}
                   onChange={input_on_change}
                   onKeyDown={handle_keypress}
-                  autoFocus
+                  autoFocus={shouldAutoFocus}
                 />
               </Form.Item>
             </Form>
diff --git a/src/packages/frontend/projects/filename-search.tsx b/src/packages/frontend/projects/filename-search.tsx
index f7b28b2ad51..25ecb6e62b2 100644
--- a/src/packages/frontend/projects/filename-search.tsx
+++ b/src/packages/frontend/projects/filename-search.tsx
@@ -47,7 +47,7 @@ export function FilenameSearch({ style }: Props) {
   };
 
   return (
-    <div style={style}>
+    <div style={style} role="region" aria-label="Search">
       <Tooltip
         title={`Search filenames of files you edited in the last year.  Use % as wildcard.  At most ${MAX_FILENAME_SEARCH_RESULTS} results shown.`}
       >
diff --git a/src/packages/frontend/projects/projects-nav.tsx b/src/packages/frontend/projects/projects-nav.tsx
index 7e84f02a48e..73e6031ce43 100644
--- a/src/packages/frontend/projects/projects-nav.tsx
+++ b/src/packages/frontend/projects/projects-nav.tsx
@@ -326,7 +326,12 @@ export function ProjectsNav(props: ProjectsNavProps) {
           // });
 
           return (
-            <SortableTab key={node.key} id={node.key} style={wrapperStyle}>
+            <SortableTab
+              key={node.key}
+              id={node.key}
+              style={wrapperStyle}
+              onKeyReturn={() => actions.set_active_tab(project_id)}
+            >
               {node}
             </SortableTab>
           );
@@ -336,9 +341,10 @@ export function ProjectsNav(props: ProjectsNavProps) {
   }
 
   return (
-    <div
+    <nav
+      role="main"
+      aria-label="Open projects"
       style={{
-        overflow: "hidden",
         height: `${height}px`,
         ...style,
       }}
@@ -363,6 +369,6 @@ export function ProjectsNav(props: ProjectsNavProps) {
           />
         </SortableTabs>
       )}
-    </div>
+    </nav>
   );
 }
diff --git a/src/packages/frontend/projects/projects-page.tsx b/src/packages/frontend/projects/projects-page.tsx
index e7d0c33162d..3fe2222133b 100644
--- a/src/packages/frontend/projects/projects-page.tsx
+++ b/src/packages/frontend/projects/projects-page.tsx
@@ -241,6 +241,8 @@ export const ProjectsPage: React.FC = () => {
       ref={containerRef}
       className={"smc-vfill"}
       style={{ overflowY: "auto" }}
+      role="main"
+      aria-label="Projects management"
     >
       <Row>
         <Col sm={24} md={24} lg={{ span: 20, offset: 2 }}>
@@ -300,7 +302,11 @@ export const ProjectsPage: React.FC = () => {
             )}
 
             {/* Table Controls (Search, Filters, Create Button) */}
-            <div ref={controlsRef}>
+            <div
+              ref={controlsRef}
+              role="region"
+              aria-label="Project filters and controls"
+            >
               <ProjectsTableControls
                 visible_projects={visible_projects}
                 onCreateProject={handleCreateProject}
@@ -329,7 +335,11 @@ export const ProjectsPage: React.FC = () => {
               />
             </div>
 
-            <div ref={projectListRef}>
+            <div
+              ref={projectListRef}
+              role="region"
+              aria-label={`Projects list (${visible_projects.length} total)`}
+            >
               <ProjectsTable
                 visible_projects={visible_projects}
                 height={tableHeight}
diff --git a/src/packages/frontend/projects/projects-starred.tsx b/src/packages/frontend/projects/projects-starred.tsx
index 3eba337478f..59d15734b3b 100644
--- a/src/packages/frontend/projects/projects-starred.tsx
+++ b/src/packages/frontend/projects/projects-starred.tsx
@@ -75,6 +75,7 @@ function DraggableProjectButton({
     <Button
       className="starred-project-button"
       style={buttonStyle}
+      aria-label={`${project.title}`}
       icon={
         project.avatar_image_tiny ? (
           <Avatar src={project.avatar_image_tiny} size={20} />
@@ -403,6 +404,8 @@ export function StarredProjectsBar() {
             ...STARRED_BAR_STYLE,
             minHeight: containerHeight > 0 ? `${containerHeight}px` : undefined,
           }}
+          role="region"
+          aria-label={`Starred (${starredProjects.length})`}
         >
           {/* Hidden measurement container - rendered off-screen so it doesn't cause visual flicker */}
           {measurementPhase && (
@@ -453,6 +456,7 @@ export function StarredProjectsBar() {
                     trigger={["click"]}
                   >
                     <Button
+                      aria-label={`${overflowProjects.length} more starred project${overflowProjects.length !== 1 ? "s" : ""}`}
                       icon={<Icon name="ellipsis" />}
                       style={{ backgroundColor: "white", marginLeft: "auto" }}
                     >
diff --git a/src/packages/frontend/projects/projects-table-controls.tsx b/src/packages/frontend/projects/projects-table-controls.tsx
index fb49b8a62de..57072b49612 100644
--- a/src/packages/frontend/projects/projects-table-controls.tsx
+++ b/src/packages/frontend/projects/projects-table-controls.tsx
@@ -17,6 +17,7 @@ import { Set } from "immutable";
 import { ReactNode, useMemo } from "react";
 import { useIntl } from "react-intl";
 
+import { useAutoFocusPreference } from "@cocalc/frontend/account";
 import { CSS, useActions, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
 import { IS_MOBILE } from "@cocalc/frontend/feature";
@@ -53,6 +54,7 @@ export function ProjectsTableControls({
   filtersRef,
 }: Props) {
   const intl = useIntl();
+  const shouldAutoFocus = useAutoFocusPreference();
   const actions = useActions("projects");
 
   // Redux state
@@ -108,11 +110,12 @@ export function ProjectsTableControls({
       {/* Left section: Search and Hashtags */}
       <Space wrap ref={searchRef}>
         <Input.Search
+          aria-label="Filter projects by name"
           placeholder={intl.formatMessage({
             id: "projects.table-controls.search.placeholder",
             defaultMessage: "Filter projects...",
           })}
-          autoFocus
+          autoFocus={shouldAutoFocus}
           value={search}
           onChange={handleSearchChange}
           onPressEnter={handlePressEnter}
@@ -122,6 +125,7 @@ export function ProjectsTableControls({
 
         {!is_anonymous && (
           <Select
+            aria-label="Filter projects by hashtags"
             mode="multiple"
             allowClear
             showSearch
@@ -141,6 +145,7 @@ export function ProjectsTableControls({
         {!is_anonymous && (
           <Space ref={filtersRef}>
             <Switch
+              aria-label="Show hidden projects"
               checked={hidden}
               onChange={(checked) => actions.display_hidden_projects(checked)}
               checkedChildren={intl.formatMessage({
@@ -153,6 +158,7 @@ export function ProjectsTableControls({
               })}
             />
             <Switch
+              aria-label="Show deleted projects"
               checked={deleted}
               onChange={(checked) => actions.display_deleted_projects(checked)}
               checkedChildren={intl.formatMessage({
@@ -175,6 +181,7 @@ export function ProjectsTableControls({
           <Button
             ref={createNewRef}
             type="primary"
+            aria-label="Create a new project"
             onClick={onCreateProject}
             icon={<Icon name="plus-circle" />}
           >
diff --git a/src/packages/util/theme.ts b/src/packages/util/theme.ts
index c9b1ef1a0c3..20ad0aec254 100644
--- a/src/packages/util/theme.ts
+++ b/src/packages/util/theme.ts
@@ -95,6 +95,7 @@ const MAIN_COLORS = {
   FG_BLUE: "#428bca", // blue used for text
   BG_WARNING: "#f0ad4e", // e.g. used for the orange warning when a button is active
 
+  ANTD_BLUE: "#1677ff", // Ant Design primary blue
   ANTD_LINK_BLUE: "#1677ff", // blue used for links
   ANTD_LINK_BLUE_DARK: "#003eb3", // dark blue used for links
 
@@ -107,9 +108,11 @@ const MAIN_COLORS = {
   STAR: "#FFD700", // gold star
 
   ANTD_RED: "#f5222d", // hefty warning (needs white text on top of it)
+  ANTD_ERROR_RED: "#ff4d4f", // Ant Design error red
   ANTD_ORANGE: "#ffbb96", // mild warning
   ANTD_GREEN: "#87d068", // bright lime-ish green
   ANTD_GREEN_D: "#237804", // dark green
+  ANTD_SUCCESS_GREEN: "#52c41a", // Ant Design success green
 
   COCALC_BLUE: "#4474c0", // blue used for the logo
   COCALC_ORANGE: "#fcc861", // orange used for the logo