frontend/app: Add ARIA semantics to app shell and navigation (Phase 12 P0)

Author: haraldschilly

src/dev/ARIA.md

@@ -468,39 +468,63 @@ Location: `packages/frontend/project/page/flyouts/`
   - [ ] Settings: Proper form labeling
   - [ ] Status: Save status announcements
 
-### Phase 12: App Shell & Navigation ⏳ PENDING
+### Phase 12: App Shell & Navigation ✅ P0 COMPLETED | P1 PENDING
 
 **Priority: HIGH** - Framework for entire app
 
 Location: `packages/frontend/app/`
 
-- [ ] **page.tsx** - Main application container (323 lines)
-  - [ ] Root structure: Ensure proper landmark hierarchy
-  - [ ] Content switching: Announce page changes
-  - [ ] Notification center connection display
+#### **P0 - Critical Foundation** ✅ COMPLETED
 
-- [ ] **nav-tab.tsx** - Top navigation tabs
-  - [ ] Tab items: `role="tab"` with `aria-selected`, `aria-controls`
-  - [ ] Each tab: Clear context (Projects, Account, Admin, etc.)
-  - [ ] Hover/focus states: Visual + ARIA
+- [x] **page.tsx** - Main application container
+  - [x] Root `<main role="main" aria-label="{site_name} application">` (line 368-369)
+  - [x] Dynamic label uses customizable site_name from customize store
+  - [x] Fallback to SITE_NAME constant from @cocalc/util/theme
+  - [x] Right nav region: `role="region" aria-label="Top navigation controls"` (line 292-293)
+
+- [x] **nav-tab.tsx** - Top navigation tabs with keyboard support
+  - [x] NavTab component: Added optional `role` and `aria-label` props
+  - [x] Made keyboard accessible: `tabIndex={0}` + `onKeyDown` for Enter/Space
+  - [x] Default `role="button"` with override capability
+  - [x] Supports all navigation items: Projects, Account, Admin, Help, Sign In
+
+- [x] **connection-indicator.tsx** - Network status live region
+  - [x] Status indicator: `role="status"` (line 119)
+  - [x] Live region: `aria-live="polite"` to announce connection changes (line 121)
+  - [x] Busy state: `aria-busy={true}` when connecting (line 122)
+  - [x] Dynamic label: `aria-label={getConnectionLabel()}` showing current state (line 120)
+  - [x] Keyboard support: `tabIndex={0}` + Enter/Space activation
+  - [x] Added `labels.connected` to i18n/common.ts for proper translation
+
+**Files Modified**:
+
+- `packages/frontend/app/page.tsx` - Root structure with site_name and right-nav region
+- `packages/frontend/app/nav-tab.tsx` - ARIA props and keyboard accessibility
+- `packages/frontend/app/connection-indicator.tsx` - Status live region with i18n labels
+- `packages/frontend/i18n/common.ts` - Added labels.connected
+
+#### **P1 - Important Improvements** ⏳ PENDING
 
 - [ ] **active-content.tsx** - Content router
   - [ ] Dynamic content: Announce when switching pages
   - [ ] Loading states: `aria-busy` indication
   - [ ] Error states: ARIA alert or live region
 
-- [ ] **Banners** - Informational/warning banners
-  - [ ] All banners: `role="region" aria-label="Information"`
+- [ ] **Banners** - Informational/warning banners (5 files)
+  - [ ] All banners: `role="region" aria-label="..."`
   - [ ] `i18n-banner.tsx` - Language selection
   - [ ] `verify-email-banner.tsx` - Email verification
   - [ ] `version-warning.tsx` - Version alerts
   - [ ] `insecure-test-mode-banner.tsx` - Test mode warning
-  - [ ] Close buttons: `aria-label="Close"`
+  - [ ] `warnings.tsx` - Cookie/storage warnings
+
+- [ ] **Notifications** - Notification indicators
+  - [ ] Notification badges: `aria-label` with count
+  - [ ] Live region: `aria-live="polite"` for count changes
 
-- [ ] **Connection Status** - Network status indicator
-  - [ ] Status indicator: `aria-label` with current state
-  - [ ] Updates: `aria-live="polite"` for status changes
-  - [ ] Tooltip text: Accessible to keyboard users
+- [ ] **projects-nav.tsx** - Project tabs navigation
+  - [ ] Container: `aria-label="Open projects"`
+  - [ ] Tab semantics already handled by Ant Design Tabs
 
 ### Phase 13: Forms & Settings ⏳ PENDING
 

src/packages/frontend/app/connection-indicator.tsx

@@ -68,6 +68,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 +116,22 @@ 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={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            connection_click();
+          }
+        }}
+        tabIndex={0}
       >
         {render_connection_status()}
       </div>
     );
   },
 );
-

src/packages/frontend/app/nav-tab.tsx

@@ -27,6 +27,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 +143,15 @@ export const NavTab: React.FC<Props> = React.memo((props: Props) => {
   return (
     <div
       onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }}
+      role={props.role ?? "button"}
+      aria-label={props["aria-label"]}
+      tabIndex={0}
       style={outer_style}
       className={TOP_BAR_ELEMENT_CLASS}
     >

src/packages/frontend/app/page.tsx

@@ -36,7 +36,7 @@ import BalanceButton from "@cocalc/frontend/purchases/balance-button";
 import PayAsYouGoModal from "@cocalc/frontend/purchases/pay-as-you-go/modal";
 import openSupportTab from "@cocalc/frontend/support/open";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
-import { COLORS } from "@cocalc/util/theme";
+import { COLORS, SITE_NAME } from "@cocalc/util/theme";
 import { IS_IOS, IS_MOBILE, IS_SAFARI } from "../feature";
 import { ActiveContent } from "./active-content";
 import { ConnectionIndicator } from "./connection-indicator";
@@ -124,6 +124,7 @@ export const Page: React.FC = () => {
 
   const is_commercial = useTypedRedux("customize", "is_commercial");
   const insecure_test_mode = useTypedRedux("customize", "insecure_test_mode");
+  const site_name = useTypedRedux("customize", "site_name") ?? SITE_NAME;
 
   function account_tab_icon(): IconName | React.JSX.Element {
     if (is_anonymous) {
@@ -289,6 +290,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",
@@ -362,6 +365,8 @@ export const Page: React.FC = () => {
   // ARIA: main element serves as the primary landmark for the entire application
   const body = (
     <main
+      role="main"
+      aria-label={`${site_name} application`}
       style={PAGE_STYLE}
       onDragOver={(e) => e.preventDefault()}
       onDrop={drop}

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