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

Author: haraldschilly

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