frontend: ARIA

src/.claude/settings.json

@@ -61,7 +61,13 @@
       "mcp__github__get_pull_request_files",
       "mcp__github__get_pull_request_status",
       "mcp__github__list_workflow_runs",
-      "mcp__github__list_workflows"
+      "mcp__github__list_workflows",
+      "mcp__chrome-devtools__new_page",
+      "mcp__chrome-devtools__wait_for",
+      "mcp__chrome-devtools__navigate_page",
+      "mcp__chrome-devtools__list_pages",
+      "mcp__chrome-devtools__click",
+      "mcp__chrome-devtools__press_key"
     ],
     "deny": []
   }

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
+- when modifying a file with a copyright banner at the top, make sure to fix/add the current year to indicate the copyright year