frontend/project-page: Add tab semantics to activity bar and file tabs (Phase 11b)

Author: haraldschilly

src/dev/ARIA.md

@@ -405,28 +405,37 @@ Location: `packages/frontend/projects/`
 - [x] ✅ **File explorer settings**: `role="region" aria-label="File explorer settings"`
 - [x] ✅ **Projects settings**: `role="region" aria-label="Projects settings"`
 
-#### 11b: Project Page
+#### 11b: Project Page ✅ COMPLETED
 
 Location: `packages/frontend/project/page/`
 
-- [ ] **page.tsx** - Main project workspace
-  - [ ] Page structure: `<main role="main" aria-label="Project workspace: {projectName}"`
-  - [ ] Activity bar: `role="tablist"` with tab semantics
-  - [ ] Content area: `role="main" or region` for editor content
+**Completed** ✅:
 
-- [ ] **activity-bar.tsx** - Left sidebar with features
-  - [ ] Container: `role="tablist" aria-label="Project activity tabs"`
-  - [ ] Each tab: `role="tab"` with `aria-selected` and `aria-controls`
-  - [ ] Tab panels: `role="tabpanel"` with `aria-labelledby`
+- [x] **page.tsx** - Main project workspace
+  - [x] Main content area: `<div role="main" aria-label="Content: {currentFilename}">` (line 389-392)
+  - [x] Activity bar sidebar: `<aside role="complementary" aria-label="Project activity bar">` (line 356-371)
+  - [x] File tabs navigation: `<nav aria-label="Open files">` (line 307-313)
+  - [x] Flyout sidebar: `<aside role="complementary" aria-label="Project sidebar">` (line 262-278)
 
-- [ ] **file-tabs.tsx** - Open files tab bar
-  - [ ] Container: `role="tablist" aria-label="Open files in {projectName}"`
-  - [ ] Tab items: `role="tab"` with aria-selected, aria-controls
-  - [ ] Tab panels: `role="tabpanel" aria-labelledby="tab-{id}"`
-  - [ ] Close buttons: `aria-label="Close {fileName}"`
+- [x] **Activity Bar** (`activity-bar-tabs.tsx` / `VerticalFixedTabs` component)
+  - [x] Container: `role="tablist" aria-label="Project activity tabs"` (line 267-268)
+  - [x] Each tab button: `role="tab"`, `aria-selected={isActive}`, `aria-controls="activity-panel-{name}"` (line 230-232)
 
-- [ ] **content.tsx** - Main content area
-  - [ ] Container: `role="main"` or clear region role
+- [x] **File Tabs** (`file-tabs.tsx` / `FileTabs` component)
+  - [x] Container: Ant Design `<Tabs>` with `aria-label="Open files"` (line 167)
+  - [x] Tab items: `role="tab"` with `aria-selected={isActive}`, `aria-controls="content-{tabId}"` (Label component)
+  - [x] Tab panels: Ant Design Tabs handles tab panel semantics automatically
+
+- [x] **Content Switching** (`content.tsx`)
+  - [x] Each content section: `role="tabpanel"` with dynamic `aria-label` based on active tab (line 119-120)
+  - [x] Labels cover all tab types: home, files, new, log, search, servers, settings, info, users, upgrades, editor paths
+
+**Files Modified**:
+
+- `packages/frontend/project/page/file-tab.tsx` - Added ARIA props to FileTab component interface and body div
+- `packages/frontend/project/page/activity-bar-tabs.tsx` - Added role="tablist" and ARIA attributes to VerticalFixedTabs
+- `packages/frontend/project/page/file-tabs.tsx` - Added ARIA props to Label component and Tabs aria-label
+- `packages/frontend/project/page/content.tsx` - Added role="tabpanel" with dynamic aria-label labels
 
 #### 11c: Flyouts
 

src/packages/frontend/project/page/activity-bar-tabs.tsx

@@ -227,6 +227,9 @@ export function VerticalFixedTabs({
         flyout={name}
         condensed={condensed}
         showLabel={showActBarLabels}
+        role="tab"
+        aria-selected={isActive}
+        aria-controls={`activity-panel-${name}`}
       />
     );
     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",

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";
+}

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),

src/packages/frontend/project/page/file-tab.tsx

@@ -184,6 +184,10 @@ 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;
 }
 interface PropsPath extends Props0 {
   path: string;
@@ -215,10 +219,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");
@@ -303,8 +307,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 +372,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 +470,9 @@ export function FileTab(props: Readonly<Props>) {
       cocalc-test={label}
       onClick={click}
       onMouseUp={onMouseUp}
+      role={props.role}
+      aria-selected={props["aria-selected"]}
+      aria-controls={props["aria-controls"]}
     >
       <div
         style={{

src/packages/frontend/project/page/file-tabs.tsx

@@ -22,7 +22,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 +44,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, "-")}`}
     />
   );
 }
@@ -82,15 +92,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 +144,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) {
@@ -164,6 +176,7 @@ export default function FileTabs({ openFiles, project_id, activeTab }) {
           actions.set_active_tab(path_to_tab(keyToPath(key)));
         }}
         popupClassName={"cocalc-files-tabs-more"}
+        aria-label="Open files"
       />
     </SortableTabs>
   );