frontend/account: add "Accessibility" setting (for now just boolean) and a query parameter.

Author: haraldschilly

src/packages/frontend/account/account-preferences-appearance.tsx

@@ -18,7 +18,7 @@ import {
   LabeledRow,
 } from "@cocalc/frontend/components";
 import { labels } from "@cocalc/frontend/i18n";
-import { DARK_MODE_ICON } from "@cocalc/util/consts/ui";
+import { ACCESSIBILITY_ICON, DARK_MODE_ICON } from "@cocalc/util/consts/ui";
 import { DARK_MODE_DEFAULTS } from "@cocalc/util/db-schema/accounts";
 import { COLORS } from "@cocalc/util/theme";
 import {
@@ -62,6 +62,18 @@ const DARK_MODE_LABELS = defineMessages({
   },
 });
 
+const ACCESSIBILITY_MESSAGES = defineMessages({
+  title: {
+    id: "account.appearance.accessibility.title",
+    defaultMessage: "Accessibility",
+  },
+  enabled: {
+    id: "account.appearance.accessibility.enabled",
+    defaultMessage:
+      "<strong>Enable Accessibility Mode:</strong> optimize the user interface for accessibility features",
+  },
+});
+
 export function AccountPreferencesAppearance() {
   const intl = useIntl();
   const other_settings = useTypedRedux("account", "other_settings");
@@ -107,6 +119,46 @@ export function AccountPreferencesAppearance() {
     );
   }
 
+  function getAccessibilitySettings(): { enabled: boolean } {
+    const settingsStr = other_settings.get("accessibility");
+    if (!settingsStr) {
+      return { enabled: false };
+    }
+    try {
+      return JSON.parse(settingsStr);
+    } catch {
+      return { enabled: false };
+    }
+  }
+
+  function setAccessibilitySettings(settings: { enabled: boolean }): void {
+    on_change("accessibility", JSON.stringify(settings));
+  }
+
+  function renderAccessibilityPanel(): ReactElement {
+    const settings = getAccessibilitySettings();
+    return (
+      <Panel
+        size="small"
+        header={
+          <>
+            <Icon unicode={ACCESSIBILITY_ICON} />{" "}
+            {intl.formatMessage(ACCESSIBILITY_MESSAGES.title)}
+          </>
+        }
+      >
+        <Switch
+          checked={settings.enabled}
+          onChange={(e) =>
+            setAccessibilitySettings({ ...settings, enabled: e.target.checked })
+          }
+        >
+          <FormattedMessage {...ACCESSIBILITY_MESSAGES.enabled} />
+        </Switch>
+      </Panel>
+    );
+  }
+
   function renderDarkModePanel(): ReactElement {
     const checked = !!other_settings.get("dark_mode");
     const config = get_dark_mode_config(other_settings.toJS());
@@ -303,6 +355,7 @@ export function AccountPreferencesAppearance() {
         mode="appearance"
       />
       {renderDarkModePanel()}
+      {renderAccessibilityPanel()}
       <EditorSettingsColorScheme
         size="small"
         theme={editor_settings?.get("theme") ?? "default"}

src/packages/frontend/account/types.ts

@@ -68,6 +68,7 @@ export interface AccountState {
     use_balance_toward_subscriptions?: boolean;
     show_symbol_bar_labels?: boolean; // whether to show labels on the menu buttons
     [ACTIVITY_BAR_LABELS]?: boolean; // whether to show labels on the vertical activity bar
+    accessibility?: string; // string is JSON: { enabled: boolean }
   }>;
   stripe_customer?: TypedMap<{
     subscriptions: { data: Map<string, any> };

src/packages/frontend/app/context.tsx

@@ -86,6 +86,18 @@ export function useAntdStyleProvider() {
   const branded = other_settings?.get("antd_brandcolors", false);
   const compact = other_settings?.get("antd_compact", false);
 
+  // Parse accessibility settings
+  const accessibilityStr = other_settings?.get("accessibility");
+  let accessibilityEnabled = false;
+  if (accessibilityStr) {
+    try {
+      const accessibilitySettings = JSON.parse(accessibilityStr);
+      accessibilityEnabled = accessibilitySettings.enabled ?? false;
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
   const borderStyle = rounded
     ? undefined
     : { borderRadius: 0, borderRadiusLG: 0, borderRadiusSM: 0 };
@@ -96,6 +108,16 @@ export function useAntdStyleProvider() {
     ? undefined
     : { colorPrimary: COLORS.ANTD_LINK_BLUE };
 
+  // Accessibility: Set all text to pure black for maximum contrast
+  const accessibilityTextColor = accessibilityEnabled
+    ? {
+        colorText: "#000000",
+        colorTextSecondary: "#000000",
+        colorTextTertiary: "#000000",
+        colorTextQuaternary: "#000000",
+      }
+    : undefined;
+
   const algorithm = compact ? { algorithm: theme.compactAlgorithm } : undefined;
 
   const antdTheme: ThemeConfig = {
@@ -106,6 +128,7 @@ export function useAntdStyleProvider() {
       ...primaryColor,
       ...borderStyle,
       ...animationStyle,
+      ...accessibilityTextColor,
     },
     components: {
       Button: {

src/packages/frontend/app/init.ts

@@ -4,10 +4,10 @@ import { init_ping } from "./monitor-pings";
 import { init_connection } from "./monitor-connection";
 import { init_query_params } from "./query-params";
 
-export function init() {
+export async function init() {
   init_actions();
   init_store();
   init_ping();
   init_connection();
-  init_query_params();
+  await init_query_params();
 }

src/packages/frontend/app/query-params.ts

@@ -16,7 +16,7 @@ import {
 import { QueryParams } from "@cocalc/frontend/misc/query-params";
 import { is_valid_uuid_string } from "@cocalc/util/misc";
 
-export function init_query_params(): void {
+function init_fullscreen_mode(): void {
   const actions = redux.getActions("page");
   // enable fullscreen mode upon loading a URL like /app?fullscreen and
   // additionally kiosk-mode upon /app?fullscreen=kiosk
@@ -40,13 +40,19 @@ export function init_query_params(): void {
   } else if (COCALC_FULLSCREEN === "project") {
     actions.set_fullscreen("project");
   }
+}
 
+function init_api_key(): void {
+  const actions = redux.getActions("page");
   const get_api_key_query_value = QueryParams.get("get_api_key");
   if (get_api_key_query_value) {
     actions.set_get_api_key(get_api_key_query_value);
     actions.set_fullscreen("project");
   }
+}
 
+function init_session(): void {
+  const actions = redux.getActions("page");
   // configure the session
   // This makes it so the default session is 'default' and there is no
   // way to NOT have a session, except via session=, which is treated
@@ -79,5 +85,72 @@ export function init_query_params(): void {
   // not have session in the URL, so we can share url's without infected
   // other user's session.
   QueryParams.remove("session");
+}
+
+function parse_accessibility_param(param: string): boolean | null {
+  if (param === "true" || param === "on" || param === "1") {
+    return true;
+  }
+  if (param === "false" || param === "off" || param === "0") {
+    return false;
+  }
+  return null;
+}
+
+async function init_accessibility(): Promise<void> {
+  // Handle accessibility query parameter
+  // If ?accessibility=true or =on, enable accessibility mode permanently
+  // If ?accessibility=false or =off, disable it permanently
+  // This allows sharing URLs that automatically enable accessibility
+  const accessibilityParam = QueryParams.get("accessibility");
+  if (accessibilityParam == null) {
+    return;
+  }
+
+  const enabled = parse_accessibility_param(accessibilityParam);
+  QueryParams.remove("accessibility");
+
+  if (enabled == null) {
+    return;
+  }
+
+  try {
+    // Wait for account to be ready before setting accessibility
+    const store = redux.getStore("account");
+    await store.async_wait({
+      until: () => store.get_account_id() != null,
+      timeout: 0,
+    });
+
+    // Preserve existing accessibility settings
+    const existingSettingsStr = store.getIn([
+      "other_settings",
+      "accessibility",
+    ]);
+    let existingSettings = { enabled: false };
+    if (existingSettingsStr) {
+      try {
+        existingSettings = JSON.parse(existingSettingsStr);
+      } catch {
+        // Ignore parse errors, use default
+      }
+    }
+
+    // Merge with new enabled value
+    const settings = { ...existingSettings, enabled };
+    const accountActions = redux.getActions("account");
+    accountActions.set_other_settings(
+      "accessibility",
+      JSON.stringify(settings),
+    );
+  } catch (err) {
+    console.warn("Failed to set accessibility from query param:", err);
+  }
+}
 
+export async function init_query_params(): Promise<void> {
+  init_fullscreen_mode();
+  init_api_key();
+  init_session();
+  await init_accessibility();
 }

src/packages/frontend/embed/index.ts

@@ -23,7 +23,6 @@ import { init as initMarkdown } from "../markdown/markdown-input/main";
 import { init as initCrashBanner } from "../crash-banner";
 import { init as initCustomize } from "../customize";
 
-
 // Do not delete this without first looking at https://github.com/sagemathinc/cocalc/issues/5390
 // This import of codemirror forces the initial full load of codemirror
 // as part of the main webpack entry point.
@@ -34,7 +33,7 @@ import { render } from "../app/render";
 
 export async function init() {
   initAccount(redux);
-  initApp();
+  await initApp();
   initProjects();
   initMarkdown();
   initCustomize();

src/packages/frontend/entry-point.ts

@@ -15,7 +15,7 @@ import { COCALC_MINIMAL } from "./fullscreen";
 // Load/initialize Redux-based react functionality
 import { redux } from "./app-framework";
 
-// Systemwide notifications that are broadcast to all users (and set by admins)
+// system-wide notifications that are broadcast to all users (and set by admins)
 import "./system-notifications";
 
 // News about the platform, features, etc. – also shown at https://$DNS/news
@@ -56,7 +56,7 @@ import { render } from "./app/render";
 export async function init() {
   initJqueryPlugins();
   initAccount(redux);
-  initApp();
+  await initApp();
   initProjects();
   initCustomSoftware();
   initFileUse();

src/packages/util/consts/ui.ts

@@ -33,8 +33,11 @@ export const R_IDE = "R IDE";
 // Default font size for account settings and UI elements
 export const DEFAULT_FONT_SIZE = 14;
 
-// Icon unicode character for dark mode toggle (◑ - circle with right half black)
-export const DARK_MODE_ICON = 0x25d1;
+// Icon unicode character for dark mode toggle (☽ - first quarter moon)
+export const DARK_MODE_ICON = 0x263d;
+
+// Icon unicode character for accessibility (♿ - wheelchair symbol)
+export const ACCESSIBILITY_ICON = 0x267f;
 
 // Icon unicode characters for auto-sync arrows in LaTeX editor
 export const SYNC_FORWARD_ICON = 0x21a6; // ↦ - rightwards arrow $mapto$