From 98ab2df5fecdeeded98713922a5700b52e106192 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <mauk.lekph@gmail.com>
Date: Sun, 18 Oct 2026 15:28:48 +0200
Subject: [PATCH 1/7] f-1579 Improve accessibility across Assignment Builder
 and Grader

---
 .github/workflows/test-assignment-builder.yml | 102 +++++++++++++++-
 .../assignment_builder/.eslintrc.a11y.cjs     |   6 +-
 .../assignment_builder/.eslintrc.cjs          |  10 +-
 .../assignment_builder/README.md              |   8 +-
 .../e2e/consolidation/a11y-scan.spec.ts       |  70 ++++++++---
 .../e2e/playwright.config.ts                  |  15 ++-
 .../assignment_builder/package.json           |   1 +
 .../components/edit/AssignmentEdit.module.css |   7 +-
 .../components/edit/AssignmentEdit.tsx        |  29 +++--
 .../components/edit/VisibilityControl.tsx     |   4 +-
 .../AssignmentExercisesTable.tsx              |   6 +-
 .../ExercisesToolbar.tsx                      |   2 +-
 .../components/SortableBlock.tsx              |   2 +
 .../components/BlankManager.tsx               |   4 +-
 .../components/IframeUrlInput.tsx             |   2 +-
 .../components/ImportQuestionJsonModal.tsx    |  23 ++--
 .../components/SortableBlock.tsx              |   2 +
 .../MultiChoiceExerciseSettings.tsx           |   2 +
 .../MultiChoiceOptions.tsx                    |  16 ++-
 .../ParsonsExercise/components/BlockItem.tsx  |  21 +++-
 .../components/PollExercise/ScaleSettings.tsx |   4 +-
 .../shared/BaseExerciseSettingsContent.tsx    |   5 +
 .../connections/ConnectTargetButton.spec.tsx  |  14 +--
 .../connections/ConnectionList.spec.tsx       |   3 +-
 .../shared/connections/ConnectionList.tsx     |   2 +-
 .../EditAllExercises/withEditAllExercises.tsx |   2 +-
 .../SearchExercises/SmartSearchExercises.tsx  |   9 +-
 .../exercises/components/TipTap/Editor.tsx    |   9 +-
 .../TipTap/components/InsertFormPopover.tsx   |  32 +++--
 .../ImportAssignmentModal.module.css          |  12 ++
 .../ImportAssignmentModal.tsx                 |  20 +--
 .../importAssignment/ImportPreviewPanel.tsx   |   1 +
 .../components/list/AssignmentList.tsx        |  12 +-
 .../list/VisibilityDropdown.spec.tsx          | 113 +++++++++++++++++
 .../components/list/VisibilityDropdown.tsx    |  73 +++++++++--
 .../list/VisibilityStatusBadge.module.css     |   5 +
 .../list/VisibilityStatusBadge.spec.tsx       |   7 +-
 .../components/list/VisibilityStatusBadge.tsx |   9 +-
 .../reading/AssignmentReadingsTable.tsx       |  11 +-
 .../components/reading/ReadingsToolbar.tsx    |   1 +
 .../EditAllReadings/withEditAllReadings.tsx   |   2 +-
 .../wizard/AssignmentWizard.module.css        |   3 +-
 .../components/wizard/AssignmentWizard.tsx    |  15 ++-
 .../routes/Grader/Grader.module.css           |  34 ++++--
 .../components/DeadlineExceptionDialog.tsx    |  21 +++-
 .../routes/Grader/components/GradePanel.tsx   |  34 +++---
 .../Grader/components/MultiGradeDialog.tsx    |  11 +-
 .../Grader/components/RegradeWizard.tsx       |   1 +
 .../components/ReleaseGradesControl.tsx       |   3 +
 .../Grader/components/ShortcutsHelpDialog.tsx |  39 +++---
 .../components/StudentListSidebar.module.css  |   2 +-
 .../Grader/components/StudentListSidebar.tsx  |   1 +
 .../Grader/components/StudentMultiSelect.tsx  |   6 +-
 .../ActiveCodeAnswerView.tsx                  |   2 +-
 .../AnswerRenderer/AnswerRenderer.tsx         |   4 +-
 .../AssociationAnswerView.tsx                 |   2 +-
 .../DefaultAnswerView/DefaultAnswerView.tsx   |   2 +-
 .../FitbAnswerView/FitbAnswerView.tsx         |   2 +-
 .../McqAnswerView/McqAnswerView.tsx           |   2 +-
 .../ParsonsAnswerView/ParsonsAnswerView.tsx   |   2 +-
 .../RunestonePreview/RunestonePreview.tsx     |   4 +-
 .../ShortAnswerView/ShortAnswerView.tsx       |   2 +-
 .../GraderAssignmentsPage.tsx                 |   5 +-
 .../spec/GraderAssignmentsPage.test.tsx       |  20 +++
 .../GraderQuestionsPage.tsx                   |   8 +-
 .../spec/GraderQuestionsPage.test.tsx         |   8 ++
 .../routes/Grader/state/graderSelectors.ts    |  10 +-
 .../src/components/shell/AppNavBar.spec.tsx   |  13 +-
 .../src/components/shell/AppNavBar.tsx        |   2 -
 .../src/components/ui/DataGrid.spec.tsx       |  13 ++
 .../src/components/ui/DataGrid.tsx            |   4 +-
 .../ui/DateTimePicker/DateTimePicker.spec.tsx |  91 +++++++++++++-
 .../ui/DateTimePicker/DateTimePicker.tsx      | 114 +++++++++++++++++-
 .../ui/EditableTable/EditableDataTable.tsx    |  12 +-
 .../FilterMultiSelect/FilterMultiSelect.tsx   |  18 +--
 .../ui/TabToolbar/TabToolbar.module.css       |   2 +-
 .../components/ui/TabToolbar/TabToolbar.tsx   |   6 +-
 .../src/components/ui/TreeTable.tsx           |   4 +-
 .../assignment_builder/vite.config.ts         |   5 +-
 components/rsptx/templates/_react_base.html   |   2 +-
 80 files changed, 952 insertions(+), 255 deletions(-)
 create mode 100644 bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityDropdown.spec.tsx

diff --git a/.github/workflows/test-assignment-builder.yml b/.github/workflows/test-assignment-builder.yml
index dabf34b8b..acc6245b5 100644
--- a/.github/workflows/test-assignment-builder.yml
+++ b/.github/workflows/test-assignment-builder.yml
@@ -3,8 +3,8 @@ name: Assignment Builder Tests
 on:
   pull_request:
     paths:
-      - 'bases/rsptx/assignment_server_api/assignment_builder/**'
-      - '.github/workflows/test-assignment-builder.yml'
+      - "bases/rsptx/assignment_server_api/assignment_builder/**"
+      - ".github/workflows/test-assignment-builder.yml"
 
 defaults:
   run:
@@ -24,11 +24,11 @@ jobs:
         #  - node version: newer Node ships a native globalThis.localStorage
         #    that shadows the one jsdom provides (see vitest.setup.ts).
         include:
-          - node: '22'
+          - node: "22"
             timezone: UTC
-          - node: '24'
+          - node: "24"
             timezone: America/Chicago
-          - node: '24'
+          - node: "24"
             timezone: Asia/Tokyo
 
     env:
@@ -56,3 +56,95 @@ jobs:
 
       - name: Run tests
         run: npx vitest run --coverage.enabled=false
+
+  accessibility:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    env:
+      ADMIN_PROXY_URL: http://localhost:8115
+      ASSIGNMENT_PROXY_URL: http://localhost:8113
+      BOOK_PATH: ${{ github.workspace }}/.ci-books
+      CI_A11Y: "true"
+      COMPOSE_PROFILES: basic
+      DC_DEV_DBURL: postgresql://runestone:runestone@db/runestone_dev
+      DEV_DBURL: postgresql://runestone:runestone@localhost:2345/runestone_dev
+      FERNET_SECRET: hRjuISXQoWd2kQBT8g-2LkmLw4jdv8NCGXUE_GfFZ1w=
+      JWT_SECRET: ci-only-secret
+      REDIS_HOST: redis
+      RUNESTONE_HOST: localhost
+      SERVER_CONFIG: development
+      WEB2PY_PRIVATE_KEY: sha512:ci-only-key
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: npm
+          cache-dependency-path: bases/rsptx/assignment_server_api/assignment_builder/package-lock.json
+
+      - name: Install frontend dependencies
+        run: npm ci
+
+      - name: Accessibility lint
+        run: npm run lint:a11y
+
+      - name: Install Chromium
+        run: npx playwright install --with-deps chromium
+
+      - name: Prepare backend directories
+        working-directory: .
+        run: mkdir -p "$BOOK_PATH"
+
+      - name: Pull backend images
+        working-directory: .
+        run: docker compose pull db redis jobe preflight rsmanage assignment admin
+
+      - name: Initialize database
+        working-directory: .
+        run: |
+          docker compose up -d --no-build db
+          for attempt in {1..30}; do
+            docker compose exec -T db pg_isready -U runestone -d runestone_dev && break
+            if [ "$attempt" -eq 30 ]; then exit 1; fi
+            sleep 2
+          done
+          docker compose run --rm --no-deps --pull never rsmanage rsmanage initdb
+
+      - name: Start API services
+        working-directory: .
+        run: |
+          docker compose up -d --no-build redis jobe assignment admin
+          for attempt in {1..60}; do
+            if curl --fail --silent http://localhost:8115/admin/auth/login >/dev/null \
+              && curl --fail --silent http://localhost:8113/openapi.json >/dev/null; then
+              exit 0
+            fi
+            if [ "$attempt" -eq 60 ]; then exit 1; fi
+            sleep 2
+          done
+
+      - name: Run blocking axe checks
+        run: npm run test:e2e:a11y:ci
+
+      - name: Upload Playwright report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: assignment-builder-a11y-report
+          path: bases/rsptx/assignment_server_api/assignment_builder/e2e/playwright-report
+          if-no-files-found: ignore
+
+      - name: Show backend logs on failure
+        if: failure()
+        working-directory: .
+        run: docker compose logs --no-color --tail 200 assignment admin
+
+      - name: Stop backend services
+        if: always()
+        working-directory: .
+        run: docker compose stop
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/.eslintrc.a11y.cjs b/bases/rsptx/assignment_server_api/assignment_builder/.eslintrc.a11y.cjs
index 52ba370eb..191463a3f 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/.eslintrc.a11y.cjs
+++ b/bases/rsptx/assignment_server_api/assignment_builder/.eslintrc.a11y.cjs
@@ -9,5 +9,9 @@ const warningRules = Object.fromEntries(
 
 module.exports = {
   extends: ["./.eslintrc.cjs", "plugin:jsx-a11y/recommended"],
-  rules: warningRules
+  rules: {
+    ...warningRules,
+    // Deprecated duplicate of label-has-associated-control.
+    "jsx-a11y/label-has-for": "off"
+  }
 };
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/.eslintrc.cjs b/bases/rsptx/assignment_server_api/assignment_builder/.eslintrc.cjs
index 760f23309..2d536ab4b 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/.eslintrc.cjs
+++ b/bases/rsptx/assignment_server_api/assignment_builder/.eslintrc.cjs
@@ -10,7 +10,15 @@ module.exports = {
       jsx: true
     }
   },
-  plugins: ["react", "import", "@typescript-eslint", "prettier", "react-hooks", "only-warn"],
+  plugins: [
+    "react",
+    "import",
+    "@typescript-eslint",
+    "prettier",
+    "react-hooks",
+    "jsx-a11y",
+    "only-warn"
+  ],
   extends: [
     "airbnb-typescript",
     "plugin:@typescript-eslint/recommended",
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/README.md b/bases/rsptx/assignment_server_api/assignment_builder/README.md
index 52a007e63..0f347dba3 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/README.md
+++ b/bases/rsptx/assignment_server_api/assignment_builder/README.md
@@ -32,11 +32,13 @@ Your app is ready to be deployed!
 ### Accessibility checks
 
 Run `npm run lint:a11y` to report static JSX accessibility warnings. The command is
-currently non-blocking so existing warnings can be addressed incrementally.
+currently non-blocking so warnings can be addressed incrementally. The Assignment
+Builder CI workflow runs it for visibility.
 
 Run `npm run test:e2e:a11y` to scan the assignment builder and grader with axe. Axe
-violations are attached to the Playwright report and annotated, but do not fail the
-test yet. Navigation and page-loading assertions still fail normally.
+violations fail the test and are attached to the Playwright report as JSON. CI runs
+the screens supported by its fresh database; the full local command additionally
+checks seeded grader question and split views.
 
 ### Production
 
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/e2e/consolidation/a11y-scan.spec.ts b/bases/rsptx/assignment_server_api/assignment_builder/e2e/consolidation/a11y-scan.spec.ts
index 5f096a583..bb6e47cf3 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/e2e/consolidation/a11y-scan.spec.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/e2e/consolidation/a11y-scan.spec.ts
@@ -1,11 +1,13 @@
 import { AxeBuilder } from "@axe-core/playwright";
 
+import { gotoApp } from "../fixtures/appNav";
+import { findGradableQuestion, gotoSplitView } from "../fixtures/grader";
 import { expect, test } from "../fixtures/scratch";
 
 const scan = (page: import("@playwright/test").Page) =>
   new AxeBuilder({ page }).withTags(["wcag2a", "wcag2aa"]).analyze();
 
-const reportViolations = async (
+const assertNoViolations = async (
   testInfo: import("@playwright/test").TestInfo,
   results: Awaited<ReturnType<typeof scan>>
 ) => {
@@ -27,40 +29,78 @@ const reportViolations = async (
     contentType: "application/json"
   });
 
-  if (violations.length > 0) {
-    testInfo.annotations.push({
-      type: "accessibility",
-      description: `${violations.length} axe violation(s) reported; enforcement is not enabled yet`
-    });
-    console.warn(`axe reported ${violations.length} accessibility violation(s)`);
-  }
+  expect(violations, "Expected the page to have no WCAG A/AA axe violations").toEqual([]);
 };
 
 test(
-  "reports assignment list axe violations",
+  "assignment list has no axe violations",
   { tag: ["@p2", "@a11y", "@assignments"] },
   async ({ page }, testInfo) => {
-    await page.goto("/builder");
+    await gotoApp(page, "/builder");
     await expect(page.getByRole("heading", { level: 1, name: "Assignments" })).toBeVisible();
 
     const results = await scan(page);
 
-    await reportViolations(testInfo, results);
+    await assertNoViolations(testInfo, results);
   }
 );
 
 test(
-  "reports grader assignment list axe violations",
+  "grader assignment list has no axe violations",
   { tag: ["@p2", "@a11y", "@grader"] },
   async ({ page }, testInfo) => {
-    await page.goto("/grader");
+    await gotoApp(page, "/grader");
     await expect(page.getByRole("heading", { level: 1, name: "Assignment grader" })).toBeVisible();
     await expect(page.getByRole("heading", { level: 2, name: "Assignments" })).toBeAttached();
     await expect(page.getByRole("navigation", { name: "Breadcrumb" })).toContainText("Assignments");
-    await expect(page.getByRole("region", { name: "Assignments" })).toBeVisible();
+    await expect(page.locator('[data-tour="grader-assignment-picker"]')).toBeVisible();
+
+    const results = await scan(page);
+
+    await assertNoViolations(testInfo, results);
+  }
+);
+
+test(
+  "grader question list has no axe violations",
+  { tag: ["@p2", "@a11y", "@grader", "@seeded"] },
+  async ({ page }, testInfo) => {
+    const target = await findGradableQuestion(page.request);
+
+    await gotoApp(page, `/grader/${target.assignmentId}`);
+    await expect(page.getByRole("region", { name: "Questions" })).toBeVisible();
+
+    const results = await scan(page);
+
+    await assertNoViolations(testInfo, results);
+  }
+);
+
+test(
+  "grader split view has no axe violations",
+  { tag: ["@p2", "@a11y", "@grader", "@seeded"] },
+  async ({ page }, testInfo) => {
+    const target = await findGradableQuestion(page.request);
+
+    await gotoSplitView(page, target);
+    await expect(page.getByRole("complementary", { name: "Students" })).toBeVisible();
+    await expect(page.locator('[data-tour="grader-grade-panel"]')).toBeVisible();
+
+    const results = await scan(page);
+
+    await assertNoViolations(testInfo, results);
+  }
+);
+
+test(
+  "grader gradebook has no axe violations",
+  { tag: ["@p2", "@a11y", "@grader", "@gradebook"] },
+  async ({ page }, testInfo) => {
+    await gotoApp(page, "/gradebook");
+    await expect(page.getByRole("heading", { level: 2, name: "Gradebook" })).toBeVisible();
 
     const results = await scan(page);
 
-    await reportViolations(testInfo, results);
+    await assertNoViolations(testInfo, results);
   }
 );
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/e2e/playwright.config.ts b/bases/rsptx/assignment_server_api/assignment_builder/e2e/playwright.config.ts
index 801664b86..7eb823e92 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/e2e/playwright.config.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/e2e/playwright.config.ts
@@ -6,10 +6,15 @@ const e2eDir = path.dirname(fileURLToPath(import.meta.url));
 
 const E2E_TARGET = process.env.E2E_TARGET ?? "vite";
 const IS_DOCKER = E2E_TARGET === "docker";
+const IS_CI_A11Y = process.env.CI_A11Y === "true";
 
 export const AUTH_FILE = path.join(e2eDir, ".auth/user.json");
-export const BACKEND_URL = IS_DOCKER ? "http://localhost" : "http://localhost:80";
 export const APP_URL = IS_DOCKER ? "http://localhost" : "http://localhost:5173";
+export const BACKEND_URL = IS_CI_A11Y
+  ? APP_URL
+  : IS_DOCKER
+    ? "http://localhost"
+    : "http://localhost:80";
 export const APP_BASE = IS_DOCKER ? "/assignment/instructor" : "";
 
 export default defineConfig({
@@ -24,6 +29,14 @@ export default defineConfig({
     ["line"],
     ["html", { open: "never", outputFolder: path.join(e2eDir, "playwright-report") }]
   ],
+  webServer: IS_CI_A11Y
+    ? {
+        command: "npm start -- --host 127.0.0.1",
+        url: APP_URL,
+        reuseExistingServer: false,
+        timeout: 120_000
+      }
+    : undefined,
   use: {
     baseURL: APP_URL,
     trace: "retain-on-failure",
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/package.json b/bases/rsptx/assignment_server_api/assignment_builder/package.json
index b147bba83..c25103560 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/package.json
+++ b/bases/rsptx/assignment_server_api/assignment_builder/package.json
@@ -87,6 +87,7 @@
     "lint:a11y": "eslint src --config .eslintrc.a11y.cjs",
     "test:e2e": "playwright test",
     "test:e2e:a11y": "playwright test consolidation/a11y-scan.spec.ts --grep @a11y",
+    "test:e2e:a11y:ci": "playwright test consolidation/a11y-scan.spec.ts --grep @a11y --grep-invert @seeded",
     "test:e2e:smoke": "playwright test --grep @p0",
     "test:e2e:p1": "playwright test --grep \"@p0|@p1\"",
     "test:e2e:docker": "E2E_TARGET=docker playwright test e2e/grader",
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.module.css
index 6bad390ea..b645ddf8e 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.module.css
@@ -166,7 +166,8 @@
   gap: var(--rs-space-2);
 }
 
-.field > label {
+.field > label,
+.field > .controlLabel {
   font-size: var(--rs-font-size-sm);
   font-weight: var(--rs-font-weight-medium);
   color: var(--rs-text);
@@ -180,7 +181,8 @@
   gap: var(--rs-space-4);
 }
 
-.settingRow > label {
+.settingRow > label,
+.settingRow > .controlLabel {
   font-size: var(--rs-font-size-sm);
   font-weight: var(--rs-font-weight-medium);
   color: var(--rs-text);
@@ -208,4 +210,3 @@
     display: none;
   }
 }
-
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.tsx
index 72ba9f90c..2d3393fe0 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.tsx
@@ -99,7 +99,7 @@ export const AssignmentEdit = ({
 
   const renderDetailsSection = () => (
     <Paper className={styles.section}>
-      <h3 className={styles.sectionTitle}>Details</h3>
+      <h2 className={styles.sectionTitle}>Details</h2>
       <div className={styles.fields}>
         <div className={styles.field}>
           <label htmlFor="edit-assignment-name">Assignment name</label>
@@ -127,15 +127,14 @@ export const AssignmentEdit = ({
                 {...field}
                 id="edit-assignment-description"
                 value={field.value || ""}
-                autosize
-                minRows={4}
+                rows={4}
                 placeholder="What is this assignment about?"
               />
             )}
           />
         </div>
         <div className={styles.field}>
-          <label>Assignment type</label>
+          <span className={styles.controlLabel}>Assignment type</span>
           <Controller
             name="kind"
             control={control}
@@ -158,7 +157,7 @@ export const AssignmentEdit = ({
 
   const renderScheduleSection = () => (
     <Paper className={styles.section}>
-      <h3 className={styles.sectionTitle}>Schedule</h3>
+      <h2 className={styles.sectionTitle}>Schedule</h2>
       <div className={styles.fields}>
         <div className={styles.field}>
           <label htmlFor="edit-due-date">Due date</label>
@@ -215,7 +214,7 @@ export const AssignmentEdit = ({
 
   const renderScoringSection = () => (
     <Paper className={styles.section}>
-      <h3 className={styles.sectionTitle}>Scoring</h3>
+      <h2 className={styles.sectionTitle}>Scoring</h2>
       <div className={styles.fields}>
         <div className={styles.field}>
           <label htmlFor="edit-points">Points</label>
@@ -241,10 +240,10 @@ export const AssignmentEdit = ({
 
   const renderBehaviorSection = () => (
     <Paper className={styles.section}>
-      <h3 className={styles.sectionTitle}>Behavior</h3>
+      <h2 className={styles.sectionTitle}>Behavior</h2>
       <div className={styles.fields}>
         <div className={styles.settingRow}>
-          <label>Allow pause</label>
+          <span className={styles.controlLabel}>Allow pause</span>
           <Controller
             name="nopause"
             control={control}
@@ -260,7 +259,7 @@ export const AssignmentEdit = ({
           />
         </div>
         <div className={styles.settingRow}>
-          <label>Allow feedback</label>
+          <span className={styles.controlLabel}>Allow feedback</span>
           <Controller
             name="nofeedback"
             control={control}
@@ -281,10 +280,10 @@ export const AssignmentEdit = ({
 
   const renderPeerSection = () => (
     <Paper className={styles.section}>
-      <h3 className={styles.sectionTitle}>Peer settings</h3>
+      <h2 className={styles.sectionTitle}>Peer settings</h2>
       <div className={styles.fields}>
         <div className={styles.settingRow}>
-          <label>Show async peer</label>
+          <span className={styles.controlLabel}>Show async peer</span>
           <Controller
             name="peer_async_visible"
             control={control}
@@ -301,7 +300,7 @@ export const AssignmentEdit = ({
         </div>
         {asyncConditionsEnabled && (
           <div className={styles.settingRow}>
-            <label>Randomize study conditions</label>
+            <span className={styles.controlLabel}>Randomize study conditions</span>
             <Controller
               name="async_study"
               control={control}
@@ -323,7 +322,7 @@ export const AssignmentEdit = ({
 
   const renderVisibilitySection = () => (
     <Paper className={styles.section}>
-      <h3 className={styles.sectionTitle}>Visibility</h3>
+      <h2 className={styles.sectionTitle}>Visibility</h2>
       <VisibilityControl control={control} watch={watch} setValue={setValue} />
     </Paper>
   );
@@ -337,7 +336,7 @@ export const AssignmentEdit = ({
 
     return (
       <Paper className={styles.section}>
-        <h3 className={styles.sectionTitle}>LTI 1.1 link</h3>
+        <h2 className={styles.sectionTitle}>LTI 1.1 link</h2>
         <div className={styles.fields}>
           <div className={styles.field}>
             <label htmlFor="lti-link">
@@ -434,7 +433,7 @@ export const AssignmentEdit = ({
               >
                 <Icon name="arrow-left" />
               </ActionIcon>
-              <h1 className={styles.assignmentName} title={selectedAssignment?.name}>
+              <h1 className={styles.assignmentName}>
                 {selectedAssignment?.name}
               </h1>
             </Group>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/VisibilityControl.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/VisibilityControl.tsx
index 6b7703c41..a3be534db 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/VisibilityControl.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/VisibilityControl.tsx
@@ -1,4 +1,4 @@
-import { Radio } from "@mantine/core";
+import { Radio, VisuallyHidden } from "@mantine/core";
 import { Control, Controller, UseFormSetValue } from "react-hook-form";
 
 import { Assignment } from "@/types/assignment";
@@ -211,7 +211,7 @@ export const VisibilityControl = ({ control, watch, setValue }: VisibilityContro
       <Radio.Group
         value={visibilityMode}
         onChange={(mode) => handleModeChange(mode as VisibilityMode)}
-        aria-label="Visibility"
+        label={<VisuallyHidden>Visibility</VisuallyHidden>}
       >
         <div className={styles.cards}>
           {VISIBILITY_OPTIONS.map((option) => (
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx
index 24c9d497a..f148656af 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx
@@ -113,7 +113,7 @@ const AsyncModeHeader = ({ hasApiKey }: { hasApiKey: boolean }) => {
               allowDeselect={false}
               comboboxProps={{ withinPortal: false }}
             />
-            <Text size="xs" c="dimmed">
+            <Text size="xs" c="var(--rs-text)">
               {rowCount === 1 ? "Applies to 1 exercise" : `Applies to ${rowCount} exercises`}
             </Text>
             <Group justify="space-between">
@@ -308,10 +308,10 @@ export const AssignmentExercisesTable = ({
         width: "20rem",
         render: (row) => (
           <div>
-            <div className={styles.name} title={row.name || row.title}>
+            <div className={styles.name}>
               {row.name || row.title}
             </div>
-            <div className={styles.sub} title={row.qnumber || undefined}>
+            <div className={styles.sub}>
               {row.qnumber}
             </div>
           </div>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/ExercisesToolbar.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/ExercisesToolbar.tsx
index 6d99a78b9..07882e420 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/ExercisesToolbar.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/ExercisesToolbar.tsx
@@ -46,7 +46,7 @@ export const ExercisesToolbar = ({
   };
 
   return (
-    <TabToolbar title="Exercises" count={totalCount} scrolled={scrolled}>
+    <TabToolbar title="Exercises" count={totalCount} headingLevel={2} scrolled={scrolled}>
       <SearchInput
         value={globalFilter}
         onChange={setGlobalFilter}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/DragAndDropExercise/components/SortableBlock.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/DragAndDropExercise/components/SortableBlock.tsx
index ea89c81e7..06ee8f2ea 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/DragAndDropExercise/components/SortableBlock.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/DragAndDropExercise/components/SortableBlock.tsx
@@ -88,6 +88,8 @@ export const SortableBlock: FC<SortableBlockProps> = ({
   );
 
   return (
+    // The dedicated ConnectTargetButton provides the keyboard equivalent for this pointer shortcut.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       ref={setNodeRef}
       style={style}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/FillInTheBlankExercise/components/BlankManager.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/FillInTheBlankExercise/components/BlankManager.tsx
index 1e3739a27..e085c9e17 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/FillInTheBlankExercise/components/BlankManager.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/FillInTheBlankExercise/components/BlankManager.tsx
@@ -196,9 +196,7 @@ export const BlankManager: FC<BlankManagerProps> = ({ blanks, onChange, question
 
                   {blank.graderType === GraderType.REGEX && (
                     <div>
-                      <label htmlFor={`regex-${index}`} className={local.headerSummary}>
-                        Regular expression
-                      </label>
+                      <div className={local.headerSummary}>Regular expression</div>
                       <RegexEditor
                         value={getRegexDisplayValue(blank)}
                         onChange={(value) => handleRegexInputChange(index, value)}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/IframeUrlInput.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/IframeUrlInput.tsx
index 798ada408..95dcfcad9 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/IframeUrlInput.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/IframeExercise/components/IframeUrlInput.tsx
@@ -56,7 +56,7 @@ export const IframeUrlInput: FC<IframeUrlInputProps> = ({ iframeSrc, onChange })
 
       {iframeSrc && isValidUrl(iframeSrc) && (
         <div className={styles.previewWrapper}>
-          <label className={styles.previewLabel}>Preview</label>
+          <div className={styles.previewLabel}>Preview</div>
           <div className={styles.previewFrame}>
             <iframe
               src={iframeSrc}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ImportQuestionJsonModal.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ImportQuestionJsonModal.tsx
index d068355dd..ce6713bf7 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ImportQuestionJsonModal.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ImportQuestionJsonModal.tsx
@@ -72,6 +72,7 @@ export const ImportQuestionJsonModal = ({
       opened={opened}
       onClose={onClose}
       title={lockedType ? "View or replace question JSON" : "Paste question JSON"}
+      closeButtonProps={{ "aria-label": "Close question JSON dialog" }}
       size="lg"
       centered
     >
@@ -87,20 +88,14 @@ export const ImportQuestionJsonModal = ({
           />
         )}
 
-        <div>
-          <Text fw={500} mb={6}>
-            Question JSON
-          </Text>
-          <Textarea
-            value={jsonText}
-            onChange={(event) => setJsonText(event.currentTarget.value)}
-            placeholder='{ "statement": "...", "optionList": [ ... ] }'
-            autosize
-            minRows={12}
-            maxRows={24}
-            styles={{ input: { fontFamily: "var(--rs-font-mono, monospace)" } }}
-          />
-        </div>
+        <Textarea
+          label="Question JSON"
+          value={jsonText}
+          onChange={(event) => setJsonText(event.currentTarget.value)}
+          placeholder='{ "statement": "...", "optionList": [ ... ] }'
+          rows={12}
+          styles={{ input: { fontFamily: "var(--rs-font-mono, monospace)" } }}
+        />
 
         {errors.length > 0 && (
           <Alert color="red" variant="light" title="The JSON could not be imported">
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MatchingExercise/components/SortableBlock.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MatchingExercise/components/SortableBlock.tsx
index 5dfec7c80..10f3f1426 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MatchingExercise/components/SortableBlock.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MatchingExercise/components/SortableBlock.tsx
@@ -88,6 +88,8 @@ export const SortableBlock: FC<SortableBlockProps> = ({
   );
 
   return (
+    // The dedicated ConnectTargetButton provides the keyboard equivalent for this pointer shortcut.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       ref={setNodeRef}
       style={style}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/MultiChoiceExerciseSettings.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/MultiChoiceExerciseSettings.tsx
index 8e9a799e9..12f864f61 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/MultiChoiceExerciseSettings.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/MultiChoiceExerciseSettings.tsx
@@ -49,6 +49,7 @@ export const MultiChoiceExerciseSettings: FC<MultiChoiceExerciseSettingsProps> =
           onChange={(e) => handleForceCheckboxChange(e.currentTarget.checked)}
           label="Always show checkboxes (instead of radio buttons for single answer)"
           description="By default, questions with one correct answer show radio buttons and questions with multiple correct answers show checkboxes. Enable this option to always show checkboxes regardless of the number of correct answers."
+          styles={{ description: { color: "var(--rs-text)" } }}
         />
 
         <Checkbox
@@ -58,6 +59,7 @@ export const MultiChoiceExerciseSettings: FC<MultiChoiceExerciseSettingsProps> =
           onChange={(e) => handleRandomChange(e.currentTarget.checked)}
           label="Randomize the order of the answers"
           description="Each student sees the answers in a different order."
+          styles={{ description: { color: "var(--rs-text)" } }}
         />
       </Paper>
     </>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/MultiChoiceOptions.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/MultiChoiceOptions.tsx
index ed69a39f7..5b7ff34c6 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/MultiChoiceOptions.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/MultiChoiceOptions.tsx
@@ -93,13 +93,21 @@ const SortableOption = ({ option, onUpdate, onRemove, totalOptions }: SortableOp
       <div className={styles.optionContent}>
         <div className={styles.horizontalLayout}>
           <div className={styles.editorSection}>
-            <label className={styles.optionLabel}>Option text:</label>
-            <Editor content={option.choice} onChange={handleContentChange} />
+            <div className={styles.optionLabel}>Option text:</div>
+            <Editor
+              content={option.choice}
+              onChange={handleContentChange}
+              ariaLabel="Option text"
+            />
           </div>
 
           <div className={styles.feedbackSection}>
-            <label className={styles.optionLabel}>Feedback (optional):</label>
-            <Editor content={option.feedback || ""} onChange={handleFeedbackChange} />
+            <div className={styles.optionLabel}>Feedback (optional):</div>
+            <Editor
+              content={option.feedback || ""}
+              onChange={handleFeedbackChange}
+              ariaLabel="Option feedback"
+            />
           </div>
 
           <div className={styles.controlsSection}>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/components/BlockItem.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/components/BlockItem.tsx
index 4bb9133a2..cd93a8435 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/components/BlockItem.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/components/BlockItem.tsx
@@ -322,6 +322,7 @@ export const BlockItem: FC<BlockItemProps> = ({
         <div
           ref={editorContainerRef}
           className="w-full relative"
+          role="presentation"
           onMouseMove={handleEditorMouseMove}
           onMouseLeave={handleEditorMouseLeave}
           onMouseDown={handleInputMouseDown}
@@ -337,6 +338,7 @@ export const BlockItem: FC<BlockItemProps> = ({
         <div
           ref={editorContainerRef}
           className="w-full relative"
+          role="presentation"
           onMouseMove={handleEditorMouseMove}
           onMouseLeave={handleEditorMouseLeave}
           onMouseDown={handleInputMouseDown}
@@ -370,7 +372,11 @@ export const BlockItem: FC<BlockItemProps> = ({
 
   // Render the options popover content
   const renderOptionsPanel = () => (
-    <div className={styles.optionsPanel} onMouseDown={(e) => e.stopPropagation()}>
+    <div
+      className={styles.optionsPanel}
+      role="presentation"
+      onMouseDown={(e) => e.stopPropagation()}
+    >
       {/* Block type section — Toggle switch */}
       {showDistractorToggle && (
         <div className={styles.optionsPanelSection}>
@@ -454,8 +460,11 @@ export const BlockItem: FC<BlockItemProps> = ({
             <span className={styles.optionsPanelSectionTitle}>DAG configuration</span>
             {onTagChange && (
               <div className={styles.optionsPanelField}>
-                <label className={styles.optionsPanelLabel}>Tag</label>
+                <label className={styles.optionsPanelLabel} htmlFor={`parsons-tag-${block.id}`}>
+                  Tag
+                </label>
                 <TextInput
+                  id={`parsons-tag-${block.id}`}
                   value={block.tag || ""}
                   onChange={(e) => onTagChange(block.id, e.target.value)}
                   className={styles.optionsPanelInput}
@@ -466,7 +475,7 @@ export const BlockItem: FC<BlockItemProps> = ({
             )}
             {onDependsChange && (
               <div className={styles.optionsPanelField}>
-                <label className={styles.optionsPanelLabel}>
+                <label className={styles.optionsPanelLabel} htmlFor={`parsons-depends-${block.id}`}>
                   Depends on
                   {allTags.length > 0 && (
                     <span className={styles.optionsPanelHint}>
@@ -475,6 +484,7 @@ export const BlockItem: FC<BlockItemProps> = ({
                   )}
                 </label>
                 <TextInput
+                  id={`parsons-depends-${block.id}`}
                   value={block.depends?.join(", ") || ""}
                   onChange={(e) => {
                     const deps = e.target.value
@@ -506,8 +516,11 @@ export const BlockItem: FC<BlockItemProps> = ({
           >
             <span className={styles.optionsPanelSectionTitle}>Display order</span>
             <div className={styles.optionsPanelField}>
-              <label className={styles.optionsPanelLabel}>Position</label>
+              <label className={styles.optionsPanelLabel} htmlFor={`parsons-position-${block.id}`}>
+                Position
+              </label>
               <TextInput
+                id={`parsons-position-${block.id}`}
                 value={block.displayOrder !== undefined ? String(block.displayOrder) : ""}
                 onChange={(e) => {
                   const val = parseInt(e.target.value);
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/PollExercise/ScaleSettings.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/PollExercise/ScaleSettings.tsx
index 5be044fd7..77ed56661 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/PollExercise/ScaleSettings.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/PollExercise/ScaleSettings.tsx
@@ -41,7 +41,9 @@ export const ScaleSettings = ({ value, onChange }: ScaleSettingsProps) => {
 
       <div className={styles.controls}>
         <div className={styles.inputContainer}>
-          <label className={styles.label}>Maximum Scale Value:</label>
+          <label className={styles.label} htmlFor="scaleValue">
+            Maximum Scale Value:
+          </label>
           <div className={styles.inputWrapper}>
             <NumberInput
               id="scaleValue"
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/BaseExerciseSettingsContent.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/BaseExerciseSettingsContent.tsx
index 82aaf39ca..6e905ce06 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/BaseExerciseSettingsContent.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/BaseExerciseSettingsContent.tsx
@@ -30,6 +30,7 @@ export interface BaseExerciseSettingsContentProps<T extends BaseExerciseSettings
 const DEFAULT_POINTS = 3;
 const DEFAULT_DIFFICULTY = 1;
 const MAX_TAGS = 10;
+const REQUIRED_LABEL_STYLES = { required: { color: "var(--rs-danger-text)" } };
 
 export const BaseExerciseSettingsContent = <T extends BaseExerciseSettings>({
   initialData,
@@ -140,6 +141,7 @@ export const BaseExerciseSettingsContent = <T extends BaseExerciseSettings>({
             id="name"
             label="Exercise name"
             withAsterisk
+            styles={REQUIRED_LABEL_STYLES}
             value={settings.name}
             error={nameValidationError || undefined}
             onChange={(e) => updateSetting("name", e.target.value)}
@@ -151,6 +153,7 @@ export const BaseExerciseSettingsContent = <T extends BaseExerciseSettings>({
             id="chapter"
             label="Chapter"
             withAsterisk
+            styles={REQUIRED_LABEL_STYLES}
             value={settings.chapter}
             data={chapters ?? []}
             allowDeselect={false}
@@ -172,6 +175,7 @@ export const BaseExerciseSettingsContent = <T extends BaseExerciseSettings>({
             id="subchapter"
             label="Section"
             withAsterisk
+            styles={REQUIRED_LABEL_STYLES}
             value={settings.subchapter}
             data={sectionsOptions}
             allowDeselect={false}
@@ -211,6 +215,7 @@ export const BaseExerciseSettingsContent = <T extends BaseExerciseSettings>({
               id="points"
               label="Points"
               withAsterisk
+              styles={REQUIRED_LABEL_STYLES}
               value={settings.points}
               min={0}
               max={100000}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectTargetButton.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectTargetButton.spec.tsx
index 4a26fcf5c..10e1715b6 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectTargetButton.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectTargetButton.spec.tsx
@@ -22,16 +22,16 @@ describe("ConnectTargetButton", () => {
     const onBlockClick = vi.fn();
 
     renderWithMantine(
-      <div onClick={onBlockClick}>
-        <ConnectTargetButton
-          blockId="r1"
-          ariaLabel="Connect to target match 1"
-          onComplete={onComplete}
-        />
-      </div>
+      <ConnectTargetButton
+        blockId="r1"
+        ariaLabel="Connect to target match 1"
+        onComplete={onComplete}
+      />
     );
 
+    document.body.addEventListener("click", onBlockClick);
     fireEvent.click(screen.getByRole("button", { name: "Connect to target match 1" }));
+    document.body.removeEventListener("click", onBlockClick);
 
     expect(onComplete).toHaveBeenCalledWith("r1");
     expect(onBlockClick).not.toHaveBeenCalled();
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectionList.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectionList.spec.tsx
index 4c3ade67e..c018a1332 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectionList.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectionList.spec.tsx
@@ -16,14 +16,13 @@ describe("ConnectionList", () => {
     expect(screen.getByText(/No connections yet/)).toBeInTheDocument();
   });
 
-  it("renders each connection as a focusable row with both labels", () => {
+  it("renders each connection as a list row with both labels", () => {
     renderWithMantine(
       <ConnectionList connections={[["l1", "r1"]]} resolveLabel={resolveLabel} onRemove={vi.fn()} />
     );
 
     const row = screen.getByRole("listitem");
 
-    expect(row).toHaveAttribute("tabindex", "0");
     expect(row).toHaveTextContent("Apple");
     expect(row).toHaveTextContent("Red fruit");
     expect(screen.getByText("Connections (1)")).toBeInTheDocument();
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectionList.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectionList.tsx
index 08c5e2d0f..b58235182 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectionList.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/shared/connections/ConnectionList.tsx
@@ -30,7 +30,7 @@ export const ConnectionList: FC<ConnectionListProps> = ({
             const targetLabel = resolveLabel(targetId);
 
             return (
-              <li key={`${sourceId}-${targetId}`} className={styles.connectionRow} tabIndex={0}>
+              <li key={`${sourceId}-${targetId}`} className={styles.connectionRow}>
                 <span className={styles.connectionRowLabel}>{sourceLabel}</span>
                 <Icon name="arrow-right" size={14} color="currentColor" />
                 <span className={styles.connectionRowLabel}>{targetLabel}</span>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/EditAllExercises/withEditAllExercises.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/EditAllExercises/withEditAllExercises.tsx
index 0a144c99f..d9cf29a9b 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/EditAllExercises/withEditAllExercises.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/EditAllExercises/withEditAllExercises.tsx
@@ -76,7 +76,7 @@ export function withEditAllExercises<T, P extends WithEditAllExercisesProps<T>>(
                 Edit &quot;{props.label}&quot; for all exercises
               </Text>
               <Component {...props} handleSubmit={handleSubmit} onChange={setValue} value={value} />
-              <Text size="xs" c="dimmed">
+              <Text size="xs" c="var(--rs-text)">
                 {rowCount === 1 ? "Applies to 1 exercise" : `Applies to ${rowCount} exercises`}
               </Text>
               <Group justify="space-between">
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/SearchExercises/SmartSearchExercises.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/SearchExercises/SmartSearchExercises.tsx
index 2f0250183..39d8ee379 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/SearchExercises/SmartSearchExercises.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/SearchExercises/SmartSearchExercises.tsx
@@ -16,7 +16,8 @@ import {
   Switch,
   TagsInput,
   Text,
-  Tooltip
+  Tooltip,
+  VisuallyHidden
 } from "@mantine/core";
 import { datasetSelectors } from "@store/dataset/dataset.logic";
 import {
@@ -212,7 +213,7 @@ export const SmartSearchExercises = ({
       {
         id: "select",
         enableSorting: false,
-        meta: { headerStyle: { width: 40 } },
+        meta: { headerStyle: { width: 40 }, hiddenHeaderLabel: "Select exercises" },
         header: ({ table }) => (
           <Checkbox
             size="sm"
@@ -361,6 +362,7 @@ export const SmartSearchExercises = ({
       <TabToolbar
         title="Search exercises"
         count={pagination?.total ?? 0}
+        headingLevel={2}
         scrolled={scrolled}
         leading={
           setViewMode && (
@@ -379,6 +381,7 @@ export const SmartSearchExercises = ({
       >
         <TagsInput
           className={styles.search}
+          label={<VisuallyHidden>Search exercises</VisuallyHidden>}
           value={globalTerms}
           onChange={(terms) => onGlobalFilterChange(terms.join(" "))}
           placeholder="Search terms…"
@@ -422,7 +425,7 @@ export const SmartSearchExercises = ({
               </Button>
             </>
           ) : (
-            <Text size="sm" c="dimmed">
+            <Text size="sm" c="var(--rs-text)">
               Select exercises to add
             </Text>
           )}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/Editor.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/Editor.tsx
index adb5151b0..107cc476c 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/Editor.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/Editor.tsx
@@ -57,6 +57,7 @@ interface PollEditorProps {
   onChange: (content: string) => void;
   onFocus?: () => void;
   enableBlankOption?: boolean;
+  ariaLabel?: string;
 }
 
 interface BubbleMenuButtonProps {
@@ -83,7 +84,8 @@ export const Editor = ({
   content,
   onChange,
   onFocus,
-  enableBlankOption = false
+  enableBlankOption = false,
+  ariaLabel = "Rich text editor"
 }: PollEditorProps) => {
   const { visible, showModal, hideModal } = useTipTapDocModal();
 
@@ -223,6 +225,11 @@ export const Editor = ({
       InsertFormBridge
     ],
     content,
+    editorProps: {
+      attributes: {
+        "aria-label": ariaLabel
+      }
+    },
     onUpdate: ({ editor: uEditor }) => {
       onChange(uEditor.getHTML());
     },
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.tsx
index bb604adb2..d3b4c7fd0 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.tsx
@@ -4,7 +4,7 @@ import {
 } from "@components/routes/AssignmentBuilder/components/exercises/components/TipTap/extensions/InsertFormBridge";
 import { Button, Group, TextInput } from "@mantine/core";
 import { Editor } from "@tiptap/core";
-import { FC, FormEvent, KeyboardEvent, useEffect, useState } from "react";
+import { FC, FormEvent, useEffect, useRef, useState } from "react";
 
 import styles from "./InsertFormPopover.module.css";
 
@@ -90,12 +90,30 @@ interface InsertFormPopoverProps {
 export const InsertFormPopover: FC<InsertFormPopoverProps> = ({ editor, request, onClose }) => {
   const [value, setValue] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     setValue("");
     setError(null);
+    inputRef.current?.focus();
   }, [request]);
 
+  useEffect(() => {
+    if (!request) return;
+
+    const handleEscape = (event: globalThis.KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      onClose();
+      editor.commands.focus();
+    };
+
+    document.addEventListener("keydown", handleEscape, true);
+    return () => document.removeEventListener("keydown", handleEscape, true);
+  }, [editor, onClose, request]);
+
   if (!request) {
     return null;
   }
@@ -119,31 +137,23 @@ export const InsertFormPopover: FC<InsertFormPopoverProps> = ({ editor, request,
     applyInsertForm(editor, request.kind, value);
   };
 
-  const handleKeyDown = (event: KeyboardEvent<HTMLFormElement>) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      cancel();
-    }
-  };
-
   const left = Math.max(8, Math.min(request.position.x, window.innerWidth - FORM_WIDTH - 8));
 
   return (
     <form
       className={styles.insertForm}
       style={{ left, top: request.position.y }}
+      role="dialog"
       aria-label={copy.formLabel}
       onSubmit={handleSubmit}
-      onKeyDown={handleKeyDown}
     >
       <TextInput
+        ref={inputRef}
         label={copy.label}
         placeholder={copy.placeholder}
         value={value}
         error={error}
         size="xs"
-        autoFocus
         onChange={(event) => {
           setValue(event.currentTarget.value);
           setError(null);
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportAssignmentModal.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportAssignmentModal.module.css
index ee7ea5fc7..18413434e 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportAssignmentModal.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportAssignmentModal.module.css
@@ -3,6 +3,18 @@
   min-width: 16rem;
 }
 
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .nameButton {
   background: none;
   border: none;
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportAssignmentModal.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportAssignmentModal.tsx
index 411440ae7..e391ba669 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportAssignmentModal.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportAssignmentModal.tsx
@@ -244,7 +244,7 @@ export const ImportAssignmentModal = ({ visible, onHide }: ImportAssignmentModal
                   </Tooltip>
                 ) : null}
                 {course.is_mine ? (
-                  <Badge size="sm" variant="light" color="gray">
+                  <Badge size="md" variant="light" color="gray">
                     Yours
                   </Badge>
                 ) : null}
@@ -283,11 +283,11 @@ export const ImportAssignmentModal = ({ visible, onHide }: ImportAssignmentModal
         render: (node) =>
           isCourseNode(node) ? (
             <Stack gap={0}>
-              <Text size="xs" c="dimmed">
+              <Text size="xs" c="var(--rs-text)">
                 {(node.data as ShareableTreeCourse).book_title}
               </Text>
               {(node.data as ShareableTreeCourse).institution ? (
-                <Text size="xs" c="dimmed">
+                <Text size="xs" c="var(--rs-text)">
                   {(node.data as ShareableTreeCourse).institution}
                 </Text>
               ) : null}
@@ -298,7 +298,7 @@ export const ImportAssignmentModal = ({ visible, onHide }: ImportAssignmentModal
         header: "Questions",
         width: "7rem",
         render: (node) => (
-          <Text size="xs" c="dimmed">
+          <Text size="xs" c="var(--rs-text)">
             {isCourseNode(node)
               ? `${(node.data as ShareableTreeCourse).shareable_count} assignment${
                   (node.data as ShareableTreeCourse).shareable_count === 1 ? "" : "s"
@@ -310,7 +310,7 @@ export const ImportAssignmentModal = ({ visible, onHide }: ImportAssignmentModal
         )
       },
       {
-        header: "",
+        header: <span className={styles.visuallyHidden}>Assignment actions</span>,
         width: "6rem",
         // A real button so the question list stays reachable from the keyboard;
         // the row itself has no click handler in this tree.
@@ -334,7 +334,13 @@ export const ImportAssignmentModal = ({ visible, onHide }: ImportAssignmentModal
   const totalPages = data?.pagination.pages ?? 0;
 
   return (
-    <Modal opened={visible} onClose={handleClose} title="Import assignments" size="72rem">
+    <Modal
+      opened={visible}
+      onClose={handleClose}
+      title="Import assignments"
+      closeButtonProps={{ "aria-label": "Close import assignments dialog" }}
+      size="72rem"
+    >
       <Stack gap="md">
         <Group justify="space-between" align="center">
           <SearchInput
@@ -407,7 +413,7 @@ export const ImportAssignmentModal = ({ visible, onHide }: ImportAssignmentModal
           </Group>
         ) : null}
 
-        <Text size="xs" c="dimmed">
+        <Text size="xs" c="var(--rs-text)">
           Checking a course takes everything it offers. Imports start hidden, exercises are used
           where they live rather than copied into your book, and anything you already have is
           skipped.
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportPreviewPanel.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportPreviewPanel.tsx
index a6e27382e..613840e32 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportPreviewPanel.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/importAssignment/ImportPreviewPanel.tsx
@@ -34,6 +34,7 @@ export const ImportPreviewPanel = ({ assignmentId, onClose }: ImportPreviewPanel
       opened={assignmentId !== null}
       onClose={onClose}
       title={preview ? preview.name : "Loading assignment…"}
+      closeButtonProps={{ "aria-label": "Close assignment preview dialog" }}
       size="42rem"
     >
       {isFetching || !preview ? (
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/AssignmentList.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/AssignmentList.tsx
index 49ee2442a..66ca69eb3 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/AssignmentList.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/AssignmentList.tsx
@@ -9,7 +9,8 @@ import {
   Skeleton,
   Switch,
   Text,
-  Tooltip
+  Tooltip,
+  VisuallyHidden
 } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { ColumnDef, OnChangeFn, RowSelectionState, SortingState } from "@tanstack/react-table";
@@ -191,7 +192,8 @@ export const AssignmentList = ({
       enableSorting: false,
       meta: {
         headerStyle: { width: 40 },
-        align: "center"
+        align: "center",
+        hiddenHeaderLabel: "Select assignments"
       },
       header: ({ table }) => (
         <Checkbox
@@ -288,7 +290,11 @@ export const AssignmentList = ({
             >
               <Switch
                 size="sm"
-                aria-label={`Allow late submissions for ${row.original.name}`}
+                label={
+                  <VisuallyHidden>
+                    Allow late submissions for {row.original.name}
+                  </VisuallyHidden>
+                }
                 checked={!row.original.enforce_due}
                 onChange={(e) => onEnforceDueChange(row.original, !e.currentTarget.checked)}
               />
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityDropdown.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityDropdown.spec.tsx
new file mode 100644
index 000000000..3f297a219
--- /dev/null
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityDropdown.spec.tsx
@@ -0,0 +1,113 @@
+import userEvent from "@testing-library/user-event";
+
+import { fireEvent, renderWithMantine, screen, waitFor } from "@/test/renderWithMantine";
+import { Assignment } from "@/types/assignment";
+
+import { VisibilityDropdown } from "./VisibilityDropdown";
+
+const assignment = {
+  id: 1,
+  name: "Scheduled assignment",
+  visible: true,
+  visible_on: null,
+  hidden_on: null
+} as Assignment;
+
+describe("VisibilityDropdown", () => {
+  let root: HTMLElement;
+
+  beforeEach(() => {
+    root = document.createElement("div");
+    root.id = "root";
+    document.body.appendChild(root);
+  });
+
+  afterEach(() => {
+    root.remove();
+  });
+
+  it("keeps the visibility menu open while selecting a date from the portaled calendar", async () => {
+    const onChange = vi.fn();
+
+    renderWithMantine(<VisibilityDropdown assignment={assignment} onChange={onChange} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Visible. Change visibility" }));
+    fireEvent.click(screen.getByRole("radio", { name: "Hidden on…" }));
+    fireEvent.click(screen.getByRole("textbox", { name: "Hidden on date" }));
+
+    const calendar = root.querySelector(".react-datepicker");
+
+    expect(calendar).toBeInTheDocument();
+
+    const availableDay = calendar?.querySelector<HTMLElement>(
+      ".react-datepicker__day:not(.react-datepicker__day--outside-month):not(.react-datepicker__day--selected)"
+    );
+
+    expect(availableDay).toBeTruthy();
+    fireEvent.mouseDown(availableDay!);
+    fireEvent.click(availableDay!);
+
+    expect(screen.getByText("Visibility status")).toBeVisible();
+    expect(onChange).toHaveBeenCalledTimes(2);
+  });
+
+  it("moves focus from a scheduled visibility option to its date field", async () => {
+    const user = userEvent.setup();
+
+    renderWithMantine(<VisibilityDropdown assignment={assignment} onChange={vi.fn()} />);
+
+    const trigger = screen.getByRole("button", { name: "Visible. Change visibility" });
+
+    trigger.focus();
+    await user.keyboard("{Enter}");
+    expect(screen.getByRole("radio", { name: "Hidden" })).toHaveFocus();
+
+    const hiddenOnOption = screen.getByRole("radio", { name: "Hidden on…" });
+
+    await user.click(hiddenOnOption);
+    hiddenOnOption.focus();
+    await user.tab();
+
+    const dateInput = screen.getByRole("textbox", { name: "Hidden on date" });
+
+    expect(dateInput).toHaveFocus();
+    await user.keyboard("{Enter}");
+    expect(root.querySelector(".react-datepicker")).toBeInTheDocument();
+  });
+
+  it("moves focus through both date fields for a visibility period", async () => {
+    const user = userEvent.setup();
+
+    renderWithMantine(<VisibilityDropdown assignment={assignment} onChange={vi.fn()} />);
+
+    const trigger = screen.getByRole("button", { name: "Visible. Change visibility" });
+
+    trigger.focus();
+    await user.keyboard("{Enter}");
+
+    const periodOption = screen.getByRole("radio", { name: "Visible during period" });
+
+    await user.click(periodOption);
+    periodOption.focus();
+    await user.tab();
+    expect(screen.getByRole("textbox", { name: "Visible from date" })).toHaveFocus();
+
+    await user.tab();
+    expect(screen.getByRole("textbox", { name: "Hidden after date" })).toHaveFocus();
+  });
+
+  it("closes the visibility menu with Escape and returns focus to its trigger", async () => {
+    const user = userEvent.setup();
+
+    renderWithMantine(<VisibilityDropdown assignment={assignment} onChange={vi.fn()} />);
+
+    const trigger = screen.getByRole("button", { name: "Visible. Change visibility" });
+
+    trigger.focus();
+    await user.keyboard("{Enter}");
+    await user.keyboard("{Escape}");
+
+    await waitFor(() => expect(screen.queryByText("Visibility status")).not.toBeInTheDocument());
+    expect(trigger).toHaveFocus();
+  });
+});
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityDropdown.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityDropdown.tsx
index 54660a747..d4ffc4f16 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityDropdown.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityDropdown.tsx
@@ -1,6 +1,6 @@
 import { Icon, PrimeIconName } from "@components/ui/Icon";
 import { Group, Popover, Radio, Stack, Text, UnstyledButton } from "@mantine/core";
-import { useState } from "react";
+import { KeyboardEvent, useEffect, useId, useRef, useState } from "react";
 
 import { Assignment } from "@/types/assignment";
 import { convertDateToISO, parseUTCDate } from "@/utils/date";
@@ -62,22 +62,67 @@ const radioLabel = (option: RadioOption) => (
 );
 
 export const VisibilityDropdown = ({ assignment, onChange }: VisibilityDropdownProps) => {
+  const periodInputId = useId();
   const [opened, setOpened] = useState(false);
   const [mode, setMode] = useState<VisibilityMode>(() => modeOf(assignment));
   const [visibleOn, setVisibleOn] = useState<string | null>(assignment.visible_on);
   const [hiddenOn, setHiddenOn] = useState<string | null>(assignment.hidden_on);
+  const [calendarOpened, setCalendarOpened] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const firstRadioRef = useRef<HTMLInputElement>(null);
+  const focusFirstRadioOnOpen = useRef(false);
 
   const status = getVisibilityStatus(assignment);
 
+  useEffect(() => {
+    if (opened && focusFirstRadioOnOpen.current) {
+      firstRadioRef.current?.focus();
+      focusFirstRadioOnOpen.current = false;
+    }
+  }, [opened]);
+
   const handleOpenChange = (next: boolean) => {
     if (next) {
       setMode(modeOf(assignment));
       setVisibleOn(assignment.visible_on);
       setHiddenOn(assignment.hidden_on);
+    } else {
+      setCalendarOpened(false);
     }
     setOpened(next);
   };
 
+  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (opened || !["Enter", " ", "ArrowDown"].includes(event.key)) {
+      return;
+    }
+
+    event.preventDefault();
+    focusFirstRadioOnOpen.current = true;
+    handleOpenChange(true);
+  };
+
+  const handleDropdownKeyDownCapture = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Escape") {
+      window.setTimeout(() => triggerRef.current?.focus(), 0);
+    }
+  };
+
+  const focusPeriodDateInput = (
+    event: KeyboardEvent<HTMLElement>,
+    targetId: string,
+    backwards = false
+  ) => {
+    if (
+      event.currentTarget.tagName === "INPUT" &&
+      event.key === "Tab" &&
+      event.shiftKey === backwards
+    ) {
+      event.preventDefault();
+      document.getElementById(targetId)?.focus();
+    }
+  };
+
   const handleModeChange = (newMode: VisibilityMode) => {
     let newVisibleOn = visibleOn;
     let newHiddenOn = hiddenOn;
@@ -138,16 +183,18 @@ export const VisibilityDropdown = ({ assignment, onChange }: VisibilityDropdownP
       width={300}
       position="bottom"
       withArrow
-      trapFocus
       returnFocus
+      closeOnClickOutside={!calendarOpened}
       opened={opened}
       onChange={handleOpenChange}
     >
       <Popover.Target>
         <UnstyledButton
+          ref={triggerRef}
           className={styles.trigger}
           data-expanded={opened || undefined}
           onClick={() => handleOpenChange(!opened)}
+          onKeyDown={handleTriggerKeyDown}
           aria-label={`${status.label}. Change visibility`}
           title={status.tooltip || "Click to change visibility"}
         >
@@ -157,14 +204,14 @@ export const VisibilityDropdown = ({ assignment, onChange }: VisibilityDropdownP
           </span>
         </UnstyledButton>
       </Popover.Target>
-      <Popover.Dropdown>
+      <Popover.Dropdown onKeyDownCapture={handleDropdownKeyDownCapture}>
         <Radio.Group value={mode} onChange={(value) => handleModeChange(value as VisibilityMode)}>
           <Stack gap="sm">
             <Text fw={600} size="sm">
               Visibility status
             </Text>
 
-            <Radio value="hidden" label={radioLabel(RADIO_OPTIONS[0])} />
+            <Radio ref={firstRadioRef} value="hidden" label={radioLabel(RADIO_OPTIONS[0])} />
             <Radio value="visible" label={radioLabel(RADIO_OPTIONS[1])} />
 
             <Radio value="scheduled_visible" label={radioLabel(RADIO_OPTIONS[2])} />
@@ -173,8 +220,9 @@ export const VisibilityDropdown = ({ assignment, onChange }: VisibilityDropdownP
                 <DateTimePicker
                   value={visibleOn}
                   onChange={handleVisibleOnChange}
-                  withinPortal={false}
                   ariaLabel="Visible on date"
+                  onCalendarOpen={() => setCalendarOpened(true)}
+                  onCalendarClose={() => setCalendarOpened(false)}
                 />
               </Stack>
             )}
@@ -185,8 +233,9 @@ export const VisibilityDropdown = ({ assignment, onChange }: VisibilityDropdownP
                 <DateTimePicker
                   value={hiddenOn}
                   onChange={handleHiddenOnChange}
-                  withinPortal={false}
                   ariaLabel="Hidden on date"
+                  onCalendarOpen={() => setCalendarOpened(true)}
+                  onCalendarClose={() => setCalendarOpened(false)}
                 />
               </Stack>
             )}
@@ -199,10 +248,13 @@ export const VisibilityDropdown = ({ assignment, onChange }: VisibilityDropdownP
                     From:
                   </Text>
                   <DateTimePicker
+                    id={`${periodInputId}-start`}
                     value={visibleOn}
                     onChange={handleVisibleOnChange}
-                    withinPortal={false}
                     ariaLabel="Visible from date"
+                    onCalendarOpen={() => setCalendarOpened(true)}
+                    onCalendarClose={() => setCalendarOpened(false)}
+                    onKeyDown={(event) => focusPeriodDateInput(event, `${periodInputId}-end`)}
                   />
                 </div>
                 <div>
@@ -210,10 +262,15 @@ export const VisibilityDropdown = ({ assignment, onChange }: VisibilityDropdownP
                     Until:
                   </Text>
                   <DateTimePicker
+                    id={`${periodInputId}-end`}
                     value={hiddenOn}
                     onChange={handleHiddenOnChange}
-                    withinPortal={false}
                     ariaLabel="Hidden after date"
+                    onCalendarOpen={() => setCalendarOpened(true)}
+                    onCalendarClose={() => setCalendarOpened(false)}
+                    onKeyDown={(event) =>
+                      focusPeriodDateInput(event, `${periodInputId}-start`, true)
+                    }
                   />
                 </div>
               </Stack>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.module.css
index 1371c7088..13432a2cd 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.module.css
@@ -13,6 +13,11 @@
   white-space: nowrap;
 }
 
+button.chip {
+  font-family: inherit;
+  cursor: help;
+}
+
 .chip[data-variant="success"] {
   background: var(--rs-success-bg);
   border-color: var(--rs-success-border);
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.spec.tsx
index 248e8b225..47bf87450 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.spec.tsx
@@ -128,7 +128,7 @@ describe("getVisibilityStatus", () => {
 });
 
 describe("VisibilityStatusBadge", () => {
-  it("makes the scheduled chip focusable so the tooltip opens without a mouse", () => {
+  it("renders the scheduled chip as a focusable tooltip button", () => {
     const future = new Date();
 
     future.setFullYear(future.getFullYear() + 1);
@@ -139,7 +139,10 @@ describe("VisibilityStatusBadge", () => {
       />
     );
 
-    expect(screen.getByText(/^From /)).toHaveAttribute("tabindex", "0");
+    expect(screen.getByRole("button", { name: /Will become visible on/ })).toHaveProperty(
+      "tabIndex",
+      0
+    );
   });
 
   it("renders an unfocusable plain chip when there is no schedule tooltip", () => {
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.tsx
index 889402ed9..88b8a1849 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.tsx
@@ -122,10 +122,15 @@ export const VisibilityStatusBadge = ({ assignment }: VisibilityStatusBadgeProps
       withArrow
       events={{ hover: true, focus: true, touch: true }}
     >
-      <span className={styles.chip} data-variant={status.variant} tabIndex={0}>
+      <button
+        type="button"
+        className={styles.chip}
+        data-variant={status.variant}
+        aria-label={`${status.label}. ${status.tooltip}`}
+      >
         <span className={styles.dot} />
         {status.label}
-      </span>
+      </button>
     </Tooltip>
   );
 };
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.tsx
index 377dfe6b7..b0805b6e4 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.tsx
@@ -92,10 +92,10 @@ export const AssignmentReadingsTable = ({
         width: "16rem",
         render: (row) => (
           <div className={styles.chapterCell}>
-            <div className={styles.sectionTitle} title={row.chapter_name || row.chapter}>
+            <div className={styles.sectionTitle}>
               {formatNumberedLabel(row.chapter_name || row.chapter, [row.chapter_num])}
             </div>
-            <div className={styles.sectionPath} title={row.chapter || undefined}>
+            <div className={styles.sectionPath}>
               {row.chapter}
             </div>
           </div>
@@ -107,16 +107,13 @@ export const AssignmentReadingsTable = ({
         width: "20rem",
         render: (row) => (
           <div className={styles.sectionCell}>
-            <div
-              className={styles.sectionTitle}
-              title={row.sub_chapter_name || row.title || row.name || row.subchapter}
-            >
+            <div className={styles.sectionTitle}>
               {formatNumberedLabel(
                 row.sub_chapter_name || row.title || row.name || row.subchapter,
                 [row.chapter_num, row.sub_chapter_num]
               )}
             </div>
-            <div className={styles.sectionPath} title={row.subchapter || undefined}>
+            <div className={styles.sectionPath}>
               {row.subchapter}
             </div>
           </div>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/ReadingsToolbar.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/ReadingsToolbar.tsx
index 8d3192955..8a892df55 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/ReadingsToolbar.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/ReadingsToolbar.tsx
@@ -64,6 +64,7 @@ export const ReadingsToolbar = ({
     <TabToolbar
       title={TITLE}
       count={totalCount}
+      headingLevel={2}
       scrolled={scrolled}
       titleExtra={
         <ActionIcon
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/components/EditAllReadings/withEditAllReadings.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/components/EditAllReadings/withEditAllReadings.tsx
index f8768edd6..db3bf0695 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/components/EditAllReadings/withEditAllReadings.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/components/EditAllReadings/withEditAllReadings.tsx
@@ -70,7 +70,7 @@ export function withEditAllReadings<T, P extends WithEditAllReadingsProps<T>>(
                 Edit &quot;{props.label}&quot; for all readings
               </Text>
               <Component {...props} handleSubmit={handleSubmit} onChange={setValue} value={value} />
-              <Text size="xs" c="dimmed">
+              <Text size="xs" c="var(--rs-text)">
                 {rowCount === 1 ? "Applies to 1 reading" : `Applies to ${rowCount} readings`}
               </Text>
               <Group justify="space-between">
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/wizard/AssignmentWizard.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/wizard/AssignmentWizard.module.css
index cca92ce39..aff2a2e55 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/wizard/AssignmentWizard.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/wizard/AssignmentWizard.module.css
@@ -194,7 +194,8 @@
   gap: var(--rs-space-4);
 }
 
-.settingRow > label {
+.settingRow > label,
+.settingRow > .controlLabel {
   font-size: var(--rs-font-size-sm);
   font-weight: var(--rs-font-weight-medium);
   color: var(--rs-text);
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/wizard/AssignmentWizard.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/wizard/AssignmentWizard.tsx
index 582a10672..27b541c8d 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/wizard/AssignmentWizard.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/wizard/AssignmentWizard.tsx
@@ -134,8 +134,7 @@ export const AssignmentWizard = ({
                 {...field}
                 id="wizard-assignment-description"
                 value={field.value || ""}
-                autosize
-                minRows={4}
+                rows={4}
                 placeholder="What is this assignment about?"
               />
             )}
@@ -207,14 +206,14 @@ export const AssignmentWizard = ({
         <div className={styles.typeSettings}>
           {watch("kind") === "Regular" && (
             <>
-              <h3 className={styles.settingsTitle}>Regular assignment settings</h3>
+              <h2 className={styles.settingsTitle}>Regular assignment settings</h2>
               <div className={styles.settingsNote}>No additional options</div>
             </>
           )}
 
           {watch("kind") === "Timed" && (
             <>
-              <h3 className={styles.settingsTitle}>Quiz/Exam settings</h3>
+              <h2 className={styles.settingsTitle}>Quiz/Exam settings</h2>
               <div className={styles.settingRows}>
                 <div className={styles.settingRow}>
                   <Checkbox
@@ -246,7 +245,7 @@ export const AssignmentWizard = ({
                   />
                 </div>
                 <div className={styles.settingRow}>
-                  <label>Allow pause</label>
+                  <span className={styles.controlLabel}>Allow pause</span>
                   <Controller
                     name="nopause"
                     control={control}
@@ -262,7 +261,7 @@ export const AssignmentWizard = ({
                   />
                 </div>
                 <div className={styles.settingRow}>
-                  <label>Allow feedback</label>
+                  <span className={styles.controlLabel}>Allow feedback</span>
                   <Controller
                     name="nofeedback"
                     control={control}
@@ -283,10 +282,10 @@ export const AssignmentWizard = ({
 
           {watch("kind") === "Peer" && (
             <>
-              <h3 className={styles.settingsTitle}>Peer instruction settings</h3>
+              <h2 className={styles.settingsTitle}>Peer instruction settings</h2>
               <div className={styles.settingRows}>
                 <div className={styles.settingRow}>
-                  <label>Show async peer</label>
+                  <span className={styles.controlLabel}>Show async peer</span>
                   <Controller
                     name="peer_async_visible"
                     control={control}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css
index b886eb751..972151fba 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css
@@ -508,7 +508,7 @@
 }
 .chipUnknown {
   background: var(--rs-neutral-200);
-  color: var(--rs-text-muted);
+  color: var(--rs-text);
 }
 
 .floatBtn {
@@ -572,7 +572,7 @@
 }
 .gradePaneMeta {
   font-size: 11px;
-  color: var(--rs-text-muted);
+  color: var(--rs-text);
 }
 .gradePaneMeta .mono {
   font-family: var(--rs-font-mono);
@@ -605,15 +605,17 @@
   text-align: center;
 }
 .autoAdvanceToggle {
-  display: flex;
-  align-items: center;
-  gap: var(--rs-space-2);
   font-size: 12px;
-  color: var(--rs-text-muted);
+  color: var(--rs-text);
   cursor: pointer;
   user-select: none;
 }
-.autoAdvanceToggle .pi {
+.autoAdvanceLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-2);
+}
+.autoAdvanceLabel .pi {
   color: var(--rs-brand-500);
 }
 
@@ -798,7 +800,7 @@
 }
 .attemptTimestamp {
   font-size: 11px;
-  color: var(--rs-text-muted);
+  color: var(--rs-text);
   font-variant-numeric: tabular-nums;
 }
 .latestBadge {
@@ -876,7 +878,7 @@
   gap: 8px;
   align-items: center;
   font-size: 11px;
-  color: var(--rs-text-muted);
+  color: var(--rs-text);
   margin-bottom: 4px;
 }
 .historyAnswer {
@@ -1079,16 +1081,22 @@
   margin: 0 6px;
   color: var(--rs-text-muted);
 }
-.shortcutTable {
+.shortcutList {
   width: 100%;
-  border-collapse: collapse;
+  margin: 0;
 }
 .shortcutRow {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--rs-space-2);
   border-top: 1px solid var(--rs-neutral-100);
-}
-.shortcutRow td {
   padding: 0.4rem 0.2rem;
 }
+.shortcutRow dt,
+.shortcutRow dd {
+  margin: 0;
+}
 .shortcutDesc {
   color: var(--rs-text-muted);
   text-align: right;
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/DeadlineExceptionDialog.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/DeadlineExceptionDialog.tsx
index 0977a4c1f..99f3c5ffd 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/DeadlineExceptionDialog.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/DeadlineExceptionDialog.tsx
@@ -3,7 +3,7 @@ import {
   AccommodationPayload,
   useUpsertAccommodationMutation
 } from "@store/grader/grader.logic.api";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useId, useState } from "react";
 
 import styles from "../Grader.module.css";
 
@@ -30,6 +30,8 @@ export const DeadlineExceptionDialog: React.FC<DeadlineExceptionDialogProps> = (
   const [timeMultiplier, setTimeMultiplier] = useState<number | null>(1);
   const [visibleFlag, setVisibleFlag] = useState(false);
   const [allowLink, setAllowLink] = useState(false);
+  const extraDaysInputId = useId();
+  const timeMultiplierInputId = useId();
 
   const [upsert, { isLoading }] = useUpsertAccommodationMutation();
 
@@ -66,6 +68,7 @@ export const DeadlineExceptionDialog: React.FC<DeadlineExceptionDialogProps> = (
       onClose={close}
       size="560px"
       centered
+      closeButtonProps={{ "aria-label": "Close deadline exception dialog" }}
     >
       <div className={styles.dialogStack}>
         <p className={styles.dialogIntro}>
@@ -77,7 +80,11 @@ export const DeadlineExceptionDialog: React.FC<DeadlineExceptionDialogProps> = (
           label="Students"
           height={180}
         />
-        <Radio.Group value={scope} onChange={(v) => setScope(v as "assignment" | "all")}>
+        <Radio.Group
+          label="Apply accommodation to"
+          value={scope}
+          onChange={(v) => setScope(v as "assignment" | "all")}
+        >
           <Group gap="lg">
             <Radio value="assignment" label="This assignment" />
             <Radio value="all" label="All of the student's assignments" />
@@ -85,16 +92,22 @@ export const DeadlineExceptionDialog: React.FC<DeadlineExceptionDialogProps> = (
         </Radio.Group>
         <div className={styles.numberFieldRow}>
           <div>
-            <label className={styles.fieldHint}>Extend deadline by (days)</label>
+            <label className={styles.fieldHint} htmlFor={extraDaysInputId}>
+              Extend deadline by (days)
+            </label>
             <NumberInput
+              id={extraDaysInputId}
               value={extraDays ?? ""}
               onChange={(v) => setExtraDays(typeof v === "number" ? v : 0)}
               min={0}
             />
           </div>
           <div>
-            <label className={styles.fieldHint}>Time-limit multiplier</label>
+            <label className={styles.fieldHint} htmlFor={timeMultiplierInputId}>
+              Time-limit multiplier
+            </label>
             <NumberInput
+              id={timeMultiplierInputId}
               value={timeMultiplier ?? ""}
               onChange={(v) => setTimeMultiplier(typeof v === "number" ? v : 1)}
               min={0}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/GradePanel.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/GradePanel.tsx
index fc7da58f5..11ddaff20 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/GradePanel.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/GradePanel.tsx
@@ -98,19 +98,20 @@ export const GradePanel = forwardRef<GradePanelHandle, Props>(function GradePane
       </div>
 
       {onAutoAdvanceChange && (
-        <label
+        <Switch
           data-tour="grader-auto-advance"
           className={styles.autoAdvanceToggle}
           title="When on, jumps to the next ungraded student a moment after saving. You can always undo from the toast."
-        >
-          <Switch
-            checked={!!autoAdvance}
-            onChange={(e) => onAutoAdvanceChange(e.currentTarget.checked)}
-            size="xs"
-          />
-          <Icon name="forward" />
-          <span>Auto-advance after save</span>
-        </label>
+          checked={!!autoAdvance}
+          onChange={(e) => onAutoAdvanceChange(e.currentTarget.checked)}
+          size="xs"
+          label={
+            <span className={styles.autoAdvanceLabel}>
+              <Icon name="forward" />
+              <span>Auto-advance after save</span>
+            </span>
+          }
+        />
       )}
 
       <div className={styles.gradePaneNav}>
@@ -142,9 +143,12 @@ export const GradePanel = forwardRef<GradePanelHandle, Props>(function GradePane
       </div>
 
       <div>
-        <label className={styles.fieldLabel}>Points (max {maxPoints})</label>
+        <label className={styles.fieldLabel} htmlFor="grader-points-input">
+          Points (max {maxPoints})
+        </label>
         <div data-tour="grader-points-input" className={styles.scoreRow}>
           <NumberInput
+            id="grader-points-input"
             ref={scoreInputRef}
             value={score}
             onChange={(v) => onScoreChange(typeof v === "number" ? v : 0)}
@@ -159,15 +163,17 @@ export const GradePanel = forwardRef<GradePanelHandle, Props>(function GradePane
       </div>
 
       <div>
-        <label className={styles.fieldLabel}>Comment</label>
+        <label className={styles.fieldLabel} htmlFor="grader-comment-input">
+          Comment
+        </label>
         <Textarea
+          id="grader-comment-input"
           ref={commentRef}
           data-tour="grader-comment-input"
           value={comment}
           onChange={(e) => onCommentChange(e.currentTarget.value)}
           onBlur={onCommentBlur}
-          autosize
-          minRows={4}
+          rows={4}
           disabled={isDisabled}
           placeholder={
             isDisabled
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/MultiGradeDialog.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/MultiGradeDialog.tsx
index badf58661..0ed63131c 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/MultiGradeDialog.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/MultiGradeDialog.tsx
@@ -307,10 +307,11 @@ export const MultiGradeDialog: React.FC<MultiGradeDialogProps> = ({
           <div className={styles.fieldStack}>
             <div className={styles.applyRow}>
               <div>
-                <label className={styles.fieldHint}>
+                <label className={styles.fieldHint} htmlFor="multi-grade-score-input">
                   Score (applied to every student × question)
                 </label>
                 <NumberInput
+                  id="multi-grade-score-input"
                   value={sameScore ?? ""}
                   onChange={(v) => setSameScore(typeof v === "number" ? v : null)}
                   min={0}
@@ -318,12 +319,14 @@ export const MultiGradeDialog: React.FC<MultiGradeDialogProps> = ({
                 />
               </div>
               <div className={styles.grow}>
-                <label className={styles.fieldHint}>Comment (optional)</label>
+                <label className={styles.fieldHint} htmlFor="multi-grade-comment-input">
+                  Comment (optional)
+                </label>
                 <Textarea
+                  id="multi-grade-comment-input"
                   value={sameComment}
                   onChange={(e) => setSameComment(e.currentTarget.value)}
-                  autosize
-                  minRows={1}
+                  rows={1}
                 />
               </div>
               <Button
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/RegradeWizard.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/RegradeWizard.tsx
index 902cbe492..0c9edc286 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/RegradeWizard.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/RegradeWizard.tsx
@@ -126,6 +126,7 @@ export const RegradeWizard: React.FC<RegradeWizardProps> = ({
       title="Regrade selected questions"
       opened={visible}
       onClose={close}
+      closeButtonProps={{ "aria-label": "Close regrade selected questions dialog" }}
       size="720px"
       centered
     >
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ReleaseGradesControl.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ReleaseGradesControl.tsx
index 091e807e7..3b0d3fcaf 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ReleaseGradesControl.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ReleaseGradesControl.tsx
@@ -52,6 +52,9 @@ export const ReleaseGradesControl: React.FC<ReleaseGradesControlProps> = ({
   const confirm = (next: boolean) => {
     modals.openConfirmModal({
       title: next ? "Release grades" : "Hide grades",
+      closeButtonProps: {
+        "aria-label": next ? "Close release grades dialog" : "Close hide grades dialog"
+      },
       children: (
         <Text size="sm">
           {next ? (
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ShortcutsHelpDialog.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ShortcutsHelpDialog.tsx
index 87c19f7f6..809a18240 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ShortcutsHelpDialog.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ShortcutsHelpDialog.tsx
@@ -60,30 +60,29 @@ export const ShortcutsHelpDialog: React.FC<Props> = ({ visible, onHide }) => {
       }
       size="min(560px, 95vw)"
       centered
+      closeButtonProps={{ "aria-label": "Close keyboard shortcuts" }}
     >
       <div className={styles.dialogStack}>
         {SECTIONS.map((s) => (
           <div key={s.title}>
-            <h4 className={styles.sectionLabel}>{s.title}</h4>
-            <table className={styles.shortcutTable}>
-              <tbody>
-                {s.rows.map((r, i) => (
-                  <tr key={i} className={styles.shortcutRow}>
-                    <td>
-                      {r.keys.map((k, j) => (
-                        <React.Fragment key={j}>
-                          {k === "–" ? <span className={styles.kbdSep}>–</span> : <Kbd>{k}</Kbd>}
-                          {j < r.keys.length - 1 && k !== "–" && r.keys[j + 1] !== "–" && (
-                            <span className={styles.kbdSep}>+</span>
-                          )}
-                        </React.Fragment>
-                      ))}
-                    </td>
-                    <td className={styles.shortcutDesc}>{r.label}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+            <h3 className={styles.sectionLabel}>{s.title}</h3>
+            <dl className={styles.shortcutList}>
+              {s.rows.map((r, i) => (
+                <div key={i} className={styles.shortcutRow}>
+                  <dt>
+                    {r.keys.map((k, j) => (
+                      <React.Fragment key={j}>
+                        {k === "–" ? <span className={styles.kbdSep}>–</span> : <Kbd>{k}</Kbd>}
+                        {j < r.keys.length - 1 && k !== "–" && r.keys[j + 1] !== "–" && (
+                          <span className={styles.kbdSep}>+</span>
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </dt>
+                  <dd className={styles.shortcutDesc}>{r.label}</dd>
+                </div>
+              ))}
+            </dl>
           </div>
         ))}
         <div className={styles.dialogFootnote}>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.module.css
index 1b58986ed..3cf59348b 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.module.css
@@ -174,7 +174,7 @@
   gap: 4px;
   align-items: center;
   font-size: 11px;
-  color: var(--rs-text-muted);
+  color: var(--rs-text);
   margin-top: 2px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.tsx
index 7c7e4d142..bb322c740 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.tsx
@@ -143,6 +143,7 @@ export const StudentListSidebar: React.FC<Props> = ({
             value={filter}
             onChange={(e) => setFilter(e.currentTarget.value)}
             placeholder="Search students…"
+            aria-label="Search students"
             leftSection={<Icon name="search" size={14} />}
             size="xs"
           />
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentMultiSelect.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentMultiSelect.tsx
index 60c8c9c23..910e7559a 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentMultiSelect.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentMultiSelect.tsx
@@ -1,6 +1,6 @@
 import { Center, Checkbox, Loader, TextInput } from "@mantine/core";
 import { RosterStudent, useGetCourseRosterQuery } from "@store/grader/grader.logic.api";
-import React, { useMemo, useState } from "react";
+import React, { useId, useMemo, useState } from "react";
 
 import { Icon } from "@/components/ui/Icon";
 
@@ -27,6 +27,7 @@ export const StudentMultiSelect: React.FC<StudentMultiSelectProps> = ({
 }) => {
   const { data: roster, isLoading, isError } = useGetCourseRosterQuery();
   const [search, setSearch] = useState("");
+  const searchInputId = useId();
 
   const students = useMemo(() => {
     const list = roster ?? [];
@@ -70,7 +71,7 @@ export const StudentMultiSelect: React.FC<StudentMultiSelectProps> = ({
   return (
     <div className={styles.multiSelectRoot}>
       <div className={`${styles.sectionCardHead} ${styles.multiSelectHead}`}>
-        <label className={styles.fieldHint}>
+        <label className={styles.fieldHint} htmlFor={searchInputId}>
           {label}
           {selected.length > 0 && (
             <span className={styles.textSubtle}> &middot; {selected.length} selected</span>
@@ -81,6 +82,7 @@ export const StudentMultiSelect: React.FC<StudentMultiSelectProps> = ({
         </button>
       </div>
       <TextInput
+        id={searchInputId}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
         placeholder="Search students…"
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ActiveCodeAnswerView/ActiveCodeAnswerView.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ActiveCodeAnswerView/ActiveCodeAnswerView.tsx
index e28dfdb12..d28e00e01 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ActiveCodeAnswerView/ActiveCodeAnswerView.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ActiveCodeAnswerView/ActiveCodeAnswerView.tsx
@@ -10,7 +10,7 @@ export const ActiveCodeAnswerView: React.FC<AnswerRendererProps> = (props) => {
   return (
     <div>
       <QuestionPreviewHeader {...props} />
-      <h4 className={styles.sectionTitle}>Submitted source</h4>
+      <h3 className={styles.sectionTitle}>Submitted source</h3>
       <pre className={styles.codeBlock}>{answer || "(empty)"}</pre>
     </div>
   );
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/AnswerRenderer/AnswerRenderer.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/AnswerRenderer/AnswerRenderer.tsx
index f3cc6c88e..ee82e5be6 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/AnswerRenderer/AnswerRenderer.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/AnswerRenderer/AnswerRenderer.tsx
@@ -29,9 +29,9 @@ export const AnswerRenderer: React.FC<AnswerRendererProps & { questionType: stri
   const interactive =
     htmlsrc && RUNESTONE_GRADER_TYPES.has(questionType) ? (
       <section className={styles.interactiveSection}>
-        <h4 className={styles.rendererTitle}>
+        <h2 className={styles.rendererTitle}>
           Question: <span className={styles.questionName}>{questionName}</span>
-        </h4>
+        </h2>
         <RunestoneGraderPreview
           key={`${sid}-${attempt?.id ?? "latest"}`}
           htmlsrc={htmlsrc}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/AssociationAnswerView/AssociationAnswerView.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/AssociationAnswerView/AssociationAnswerView.tsx
index a995f3183..a3f825e8f 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/AssociationAnswerView/AssociationAnswerView.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/AssociationAnswerView/AssociationAnswerView.tsx
@@ -15,7 +15,7 @@ export const AssociationAnswerView: React.FC<AssociationAnswerViewProps> = (prop
   return (
     <div>
       {showQuestionHeader && <QuestionPreviewHeader {...props} />}
-      <h4 className={styles.sectionTitle}>{title}</h4>
+      <h3 className={styles.sectionTitle}>{title}</h3>
       <div className={styles.blockList}>
         {associations.length === 0 ? (
           <span className={styles.mutedNote}>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/DefaultAnswerView/DefaultAnswerView.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/DefaultAnswerView/DefaultAnswerView.tsx
index f84c3d760..ec800407a 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/DefaultAnswerView/DefaultAnswerView.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/DefaultAnswerView/DefaultAnswerView.tsx
@@ -6,7 +6,7 @@ import { AnswerRendererProps } from "../types";
 export const DefaultAnswerView: React.FC<AnswerRendererProps> = ({ answer }) => {
   return (
     <div>
-      <h4 className={styles.rendererTitle}>Student answer</h4>
+      <h2 className={styles.rendererTitle}>Student answer</h2>
       <pre className={styles.codeBlock}>{answer || "(empty)"}</pre>
     </div>
   );
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/FitbAnswerView/FitbAnswerView.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/FitbAnswerView/FitbAnswerView.tsx
index 963226c5d..42099ad80 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/FitbAnswerView/FitbAnswerView.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/FitbAnswerView/FitbAnswerView.tsx
@@ -13,7 +13,7 @@ export const FitbAnswerView: React.FC<AnswerRendererProps> = (props) => {
   return (
     <div>
       <QuestionPreviewHeader {...props} />
-      <h4 className={styles.sectionTitle}>Blanks</h4>
+      <h3 className={styles.sectionTitle}>Blanks</h3>
       <ol className={styles.blankList}>
         {values.length === 0 && <li className={styles.mutedNote}>(empty)</li>}
         {values.map((v, i) => (
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/McqAnswerView/McqAnswerView.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/McqAnswerView/McqAnswerView.tsx
index f916ad37b..0354321dc 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/McqAnswerView/McqAnswerView.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/McqAnswerView/McqAnswerView.tsx
@@ -13,7 +13,7 @@ export const McqAnswerView: React.FC<AnswerRendererProps> = (props) => {
   return (
     <div>
       <QuestionPreviewHeader {...props} />
-      <h4 className={styles.sectionTitle}>Selected option{selected.length > 1 ? "s" : ""}</h4>
+      <h3 className={styles.sectionTitle}>Selected option{selected.length > 1 ? "s" : ""}</h3>
       <div className={styles.optionChips}>
         {selected.length === 0 ? (
           <span className={styles.mutedNote}>(no selection)</span>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ParsonsAnswerView/ParsonsAnswerView.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ParsonsAnswerView/ParsonsAnswerView.tsx
index 81adc642f..371483a59 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ParsonsAnswerView/ParsonsAnswerView.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ParsonsAnswerView/ParsonsAnswerView.tsx
@@ -14,7 +14,7 @@ export const ParsonsAnswerView: React.FC<AnswerRendererProps> = (props) => {
   return (
     <div>
       <QuestionPreviewHeader {...props} />
-      <h4 className={styles.sectionTitle}>Submitted source</h4>
+      <h3 className={styles.sectionTitle}>Submitted source</h3>
       <pre className={styles.codeBlock}>{displayedSource || "(empty)"}</pre>
     </div>
   );
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/RunestonePreview/RunestonePreview.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/RunestonePreview/RunestonePreview.tsx
index 7fe818aad..08e387ce2 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/RunestonePreview/RunestonePreview.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/RunestonePreview/RunestonePreview.tsx
@@ -72,8 +72,8 @@ export const QuestionPreviewHeader: React.FC<
   Pick<AnswerRendererProps, "htmlsrc" | "questionName">
 > = ({ questionName }) => (
   <section className={styles.previewTitleSection}>
-    <h4 className={styles.previewTitle}>
+    <h2 className={styles.previewTitle}>
       Question: <span className={styles.questionName}>{questionName}</span>
-    </h4>
+    </h2>
   </section>
 );
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ShortAnswerView/ShortAnswerView.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ShortAnswerView/ShortAnswerView.tsx
index 2c143036e..ce4e689a3 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ShortAnswerView/ShortAnswerView.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/questionTypes/ShortAnswerView/ShortAnswerView.tsx
@@ -10,7 +10,7 @@ export const ShortAnswerView: React.FC<AnswerRendererProps> = (props) => {
   return (
     <div>
       <QuestionPreviewHeader {...props} />
-      <h4 className={styles.sectionTitle}>Student response</h4>
+      <h3 className={styles.sectionTitle}>Student response</h3>
       <div className={styles.responseBox}>
         {answer || <em className={styles.emptyResponse}>(empty response)</em>}
       </div>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderAssignmentsPage/GraderAssignmentsPage.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderAssignmentsPage/GraderAssignmentsPage.tsx
index 937e1cdd0..f0d8ba2ed 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderAssignmentsPage/GraderAssignmentsPage.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderAssignmentsPage/GraderAssignmentsPage.tsx
@@ -115,9 +115,7 @@ export const GraderAssignmentsPage: React.FC = () => {
         meta: { filter: { variant: "text", placeholder: "Search description" } },
         cell: ({ row }) =>
           row.original.description ? (
-            <span className={styles.cellMuted} title={row.original.description}>
-              {row.original.description}
-            </span>
+            <span className={styles.cellMuted}>{row.original.description}</span>
           ) : (
             <span className={styles.cellDash}>—</span>
           )
@@ -146,6 +144,7 @@ export const GraderAssignmentsPage: React.FC = () => {
                 isClearable
                 dateFormat="MMM d, yyyy"
                 placeholderText="Pick range"
+                customInput={<input aria-label="Filter by Due date" />}
                 className={styles.dateFilterInput}
                 wrapperClassName={styles.dateFilterWrapper}
                 popperClassName={styles.dateFilterPopper}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderAssignmentsPage/spec/GraderAssignmentsPage.test.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderAssignmentsPage/spec/GraderAssignmentsPage.test.tsx
index 30de98b7e..eaa175b0b 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderAssignmentsPage/spec/GraderAssignmentsPage.test.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderAssignmentsPage/spec/GraderAssignmentsPage.test.tsx
@@ -78,4 +78,24 @@ describe("GraderAssignmentsPage table pagination", () => {
 
     expect(screen.getByText("Assignment 01")).toBeInTheDocument();
   });
+
+  it("does not duplicate visible descriptions in title attributes", () => {
+    const assignments = makeAssignments(1);
+
+    assignments[0].description = "Visible assignment description";
+    mockUseGetAssignmentsQuery.mockReturnValue({
+      data: assignments,
+      isLoading: false
+    });
+
+    renderWithMantine(<GraderAssignmentsPage />);
+
+    expect(screen.getByText("Visible assignment description")).not.toHaveAttribute("title");
+  });
+
+  it("gives the due date filter an accessible name", () => {
+    renderWithMantine(<GraderAssignmentsPage />);
+
+    expect(screen.getByRole("textbox", { name: "Filter by Due date" })).toBeInTheDocument();
+  });
 });
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/GraderQuestionsPage.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/GraderQuestionsPage.tsx
index 5571a7d05..a72e8419a 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/GraderQuestionsPage.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/GraderQuestionsPage.tsx
@@ -185,7 +185,7 @@ export const GraderQuestionsPage: React.FC = () => {
         id: "select",
         enableSorting: false,
         enableColumnFilter: false,
-        meta: { headerStyle: { width: 48 } },
+        meta: { headerStyle: { width: 48 }, hiddenHeaderLabel: "Select questions" },
         header: () => (
           <Checkbox
             aria-label="Select all questions"
@@ -215,11 +215,7 @@ export const GraderQuestionsPage: React.FC = () => {
         header: "Name",
         filterFn: "includesString",
         meta: { filter: { variant: "text", placeholder: "Search name" } },
-        cell: ({ row }) => (
-          <span className={styles.cellName} title={row.original.name}>
-            {row.original.name}
-          </span>
-        )
+        cell: ({ row }) => <span className={styles.cellName}>{row.original.name}</span>
       },
       {
         accessorKey: "question_type",
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/spec/GraderQuestionsPage.test.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/spec/GraderQuestionsPage.test.tsx
index d31a6637a..557f92003 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/spec/GraderQuestionsPage.test.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/spec/GraderQuestionsPage.test.tsx
@@ -78,6 +78,14 @@ describe("GraderQuestionsPage table pagination", () => {
     expect(screen.getByRole("textbox", { name: "Rows per page" })).toHaveValue("10");
   });
 
+  it("names the question selection column", () => {
+    renderWithMantine(<GraderQuestionsPage />);
+
+    expect(
+      screen.getByRole("columnheader", { name: /select all questions.*select questions/i })
+    ).toBeInTheDocument();
+  });
+
   it("persists the page and page size when they change", () => {
     renderWithMantine(<GraderQuestionsPage />);
 
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/state/graderSelectors.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/state/graderSelectors.ts
index 3c8e797c1..2bdc407d1 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/state/graderSelectors.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/state/graderSelectors.ts
@@ -127,11 +127,11 @@ export const effectiveViewMode = <TMode extends string>(
 ): TMode => (isDemo ? demoMode : storedMode);
 
 export const statusColor: Record<StudentGradingStatus, string> = {
-  graded: "var(--rs-status-graded)",
-  autograded: "var(--rs-status-autograded)",
-  in_progress: "var(--rs-status-in-progress)",
-  pending: "var(--rs-status-pending)",
-  no_submission: "var(--rs-status-no-submission)"
+  graded: "var(--rs-success-text)",
+  autograded: "var(--rs-info-text)",
+  in_progress: "var(--rs-warning-text)",
+  pending: "var(--rs-neutral-600)",
+  no_submission: "var(--rs-neutral-600)"
 };
 
 export type { GraderQuestionStats };
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.spec.tsx
index 21c75cfed..5c423fa46 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.spec.tsx
@@ -25,9 +25,16 @@ describe("AppNavBar", () => {
   it("renders top-level item labels as buttons", () => {
     renderWithMantine(<AppNavBar items={makeItems()} />);
 
-    expect(screen.getByRole("button", { name: /home/i })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: /back to course/i })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: /user/i })).toBeInTheDocument();
+    const home = screen.getByRole("button", { name: /home/i });
+    const backToCourse = screen.getByRole("button", { name: /back to course/i });
+    const user = screen.getByRole("button", { name: /user/i });
+
+    expect(home).toBeInTheDocument();
+    expect(backToCourse).toBeInTheDocument();
+    expect(user).toBeInTheDocument();
+    expect(home).not.toHaveAttribute("title");
+    expect(backToCourse).not.toHaveAttribute("title");
+    expect(user).not.toHaveAttribute("title");
   });
 
   it("invokes the command when a top-level item is clicked", async () => {
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.tsx
index 02d67955f..185a864a9 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.tsx
@@ -54,7 +54,6 @@ const renderTopItem = (item: NavItem, index: number, activePath: string) => {
             className={styles.navButton}
             leftSection={leftSection}
             rightSection={<Icon name="chevron-down" />}
-            title={item.label}
           >
             {item.label}
           </Button>
@@ -77,7 +76,6 @@ const renderTopItem = (item: NavItem, index: number, activePath: string) => {
       aria-current={active ? "page" : undefined}
       leftSection={leftSection}
       onClick={item.command}
-      title={item.label}
     >
       {item.label}
     </Button>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.spec.tsx
index 9bf0ef13e..3492a0cf0 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.spec.tsx
@@ -355,6 +355,19 @@ describe("DataGrid column filters", () => {
     expect(screen.getByRole("textbox", { name: "Filter by Score" })).toBeInTheDocument();
   });
 
+  it("does not expose filter cells as empty column headers", () => {
+    renderWithMantine(
+      <DataGrid<Row>
+        data={ROWS}
+        columns={FILTER_COLUMNS}
+        getRowId={(r) => r.id}
+        enableColumnFilters
+      />
+    );
+
+    expect(screen.getAllByRole("columnheader")).toHaveLength(FILTER_COLUMNS.length);
+  });
+
   it("renders a custom filter element", () => {
     const columns: ColumnDef<Row, unknown>[] = [
       {
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.tsx
index e7bb23103..87bf73ab1 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.tsx
@@ -318,12 +318,12 @@ export function DataGrid<T>({
                 const meta = header.column.columnDef.meta;
 
                 return (
-                  <Table.Th
+                  <Table.Td
                     key={header.id}
                     style={{ ...meta?.headerStyle, padding: "4px 8px", fontWeight: 400 }}
                   >
                     {meta?.filter ? <ColumnFilterControl column={header.column} /> : null}
-                  </Table.Th>
+                  </Table.Td>
                 );
               })}
             </Table.Tr>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.spec.tsx
index 66191255d..7a187bc67 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 
 import { DateTimePicker } from "./DateTimePicker";
 
@@ -9,6 +9,13 @@ const openCalendar = () => {
   fireEvent.click(input);
 };
 
+const getCalendarFocusables = (root: HTMLElement) =>
+  Array.from(
+    root.querySelectorAll<HTMLElement>(
+      "a[href], button:not([disabled]), input:not([disabled]):not([type='hidden']), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])"
+    )
+  );
+
 describe("DateTimePicker", () => {
   let root: HTMLElement;
 
@@ -55,4 +62,86 @@ describe("DateTimePicker", () => {
 
     expect(screen.getByRole("textbox", { name: "Visible on date" })).toBeInTheDocument();
   });
+
+  it("closes the calendar when focus leaves the input and calendar", async () => {
+    render(
+      <>
+        <DateTimePicker value={null} onChange={() => {}} />
+        <button type="button">After picker</button>
+      </>
+    );
+
+    openCalendar();
+    expect(root.querySelector(".react-datepicker")).toBeInTheDocument();
+
+    fireEvent.focus(screen.getByRole("button", { name: "After picker" }));
+
+    await waitFor(() => expect(root.querySelector(".react-datepicker")).not.toBeInTheDocument());
+  });
+
+  it("closes the first calendar before opening another picker", async () => {
+    render(
+      <>
+        <DateTimePicker value={null} onChange={() => {}} ariaLabel="First date" />
+        <DateTimePicker value={null} onChange={() => {}} ariaLabel="Second date" />
+      </>
+    );
+
+    const firstInput = screen.getByRole("textbox", { name: "First date" });
+    const secondInput = screen.getByRole("textbox", { name: "Second date" });
+
+    fireEvent.focus(firstInput);
+    fireEvent.click(firstInput);
+    expect(root.querySelectorAll(".react-datepicker")).toHaveLength(1);
+
+    fireEvent.focus(secondInput);
+    fireEvent.click(secondInput);
+
+    await waitFor(() => expect(root.querySelectorAll(".react-datepicker")).toHaveLength(1));
+    expect(secondInput).toHaveClass("react-datepicker-ignore-onclickoutside");
+  });
+
+  it("moves focus to the next form control after tabbing past the calendar", async () => {
+    render(
+      <>
+        <DateTimePicker value={null} onChange={() => {}} />
+        <button type="button">After picker</button>
+      </>
+    );
+
+    openCalendar();
+    const calendarFocusables = getCalendarFocusables(root);
+    const lastCalendarControl = calendarFocusables.at(-1);
+
+    expect(lastCalendarControl).toBeDefined();
+    lastCalendarControl?.focus();
+    fireEvent.keyDown(lastCalendarControl!, { key: "Tab" });
+
+    await waitFor(() => {
+      expect(root.querySelector(".react-datepicker")).not.toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "After picker" })).toHaveFocus();
+    });
+  });
+
+  it("moves focus to the previous form control after shift-tabbing past the calendar", async () => {
+    render(
+      <>
+        <button type="button">Before picker</button>
+        <DateTimePicker value={null} onChange={() => {}} />
+      </>
+    );
+
+    openCalendar();
+    const calendarFocusables = getCalendarFocusables(root);
+    const firstCalendarControl = calendarFocusables.at(0);
+
+    expect(firstCalendarControl).toBeDefined();
+    firstCalendarControl?.focus();
+    fireEvent.keyDown(firstCalendarControl!, { key: "Tab", shiftKey: true });
+
+    await waitFor(() => {
+      expect(root.querySelector(".react-datepicker")).not.toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Before picker" })).toHaveFocus();
+    });
+  });
 });
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.tsx
index 10301aebe..88fea169c 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.tsx
@@ -2,12 +2,30 @@ import "react-datepicker/dist/react-datepicker.css";
 
 import { Icon } from "@components/ui/Icon";
 import classNames from "classnames";
+import { KeyboardEvent, useEffect, useId, useRef, useState } from "react";
 import DatePicker from "react-datepicker";
 
 import { convertDateToISO, getDatePickerFormat, parseUTCDate } from "@/utils/date";
 
 import styles from "./DateTimePicker.module.css";
 
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+
+const getFocusableElements = (container: ParentNode) =>
+  Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
+    (element) =>
+      !element.hasAttribute("hidden") &&
+      element.getAttribute("aria-hidden") !== "true" &&
+      !element.closest("[hidden], [aria-hidden='true']")
+  );
+
 /**
  * The picker shows and edits dates in the viewer's local timezone, but every
  * datetime the backend stores -- duedate, visible_on, hidden_on -- is naive
@@ -22,6 +40,9 @@ interface DateTimePickerProps {
   withinPortal?: boolean;
   id?: string;
   ariaLabel?: string;
+  onCalendarOpen?: () => void;
+  onCalendarClose?: () => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
 }
 
 export const DateTimePicker = ({
@@ -31,8 +52,78 @@ export const DateTimePicker = ({
   className,
   withinPortal = true,
   id,
-  ariaLabel
+  ariaLabel,
+  onCalendarOpen,
+  onCalendarClose,
+  onKeyDown
 }: DateTimePickerProps) => {
+  const focusScopeClass = `date-time-picker-${useId().replaceAll(":", "")}`;
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const datePickerRef = useRef<DatePicker>(null);
+  const [calendarOpened, setCalendarOpened] = useState(false);
+
+  useEffect(() => {
+    if (!calendarOpened) {
+      return;
+    }
+
+    const handleFocusIn = (event: FocusEvent) => {
+      const target = event.target;
+
+      if (
+        !(target instanceof Element) ||
+        wrapperRef.current?.contains(target) ||
+        target.closest(`.${focusScopeClass}`)
+      ) {
+        return;
+      }
+
+      datePickerRef.current?.setOpen(false);
+    };
+
+    const handleDocumentKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key !== "Tab" || !(event.target instanceof HTMLElement)) {
+        return;
+      }
+
+      const calendar = event.target.closest<HTMLElement>(`.${focusScopeClass}`);
+
+      if (!calendar) {
+        return;
+      }
+
+      const calendarFocusables = getFocusableElements(calendar);
+      const boundaryElement = event.shiftKey ? calendarFocusables.at(0) : calendarFocusables.at(-1);
+
+      if (event.target !== boundaryElement) {
+        return;
+      }
+
+      const input = wrapperRef.current?.querySelector<HTMLElement>("input");
+      const pageFocusables = getFocusableElements(document).filter(
+        (element) => !element.closest(`.${focusScopeClass}`)
+      );
+      const inputIndex = input ? pageFocusables.indexOf(input) : -1;
+      const destination = pageFocusables[inputIndex + (event.shiftKey ? -1 : 1)];
+
+      if (!destination) {
+        return;
+      }
+
+      event.preventDefault();
+      datePickerRef.current?.setOpen(false);
+      destination.focus();
+    };
+
+    document.addEventListener("focusin", handleFocusIn);
+    document.addEventListener("keydown", handleDocumentKeyDown);
+
+    return () => {
+      document.removeEventListener("focusin", handleFocusIn);
+      document.removeEventListener("keydown", handleDocumentKeyDown);
+    };
+  }, [calendarOpened, focusScopeClass]);
+
   const handleChange = (date: Date | null) => {
     if (date) {
       onChange(convertDateToISO(date));
@@ -41,9 +132,20 @@ export const DateTimePicker = ({
 
   const parseDate = (val: string) => parseUTCDate(val);
 
+  const handleCalendarOpen = () => {
+    setCalendarOpened(true);
+    onCalendarOpen?.();
+  };
+
+  const handleCalendarClose = () => {
+    setCalendarOpened(false);
+    onCalendarClose?.();
+  };
+
   return (
-    <div className={classNames(styles.wrapper, className)}>
+    <div ref={wrapperRef} className={classNames(styles.wrapper, className)}>
       <DatePicker
+        ref={datePickerRef}
         selected={value ? parseDate(value) : null}
         onChange={handleChange}
         showTimeSelect
@@ -51,14 +153,18 @@ export const DateTimePicker = ({
         dateFormat={getDatePickerFormat()}
         placeholderText={placeholder}
         className={styles.input}
-        calendarClassName={styles.calendar}
+        calendarClassName={classNames(styles.calendar, focusScopeClass)}
         wrapperClassName={styles.datepickerWrapper}
         showIcon
         icon={<Icon name="calendar" />}
-        popperClassName={styles.popper}
+        popperClassName={classNames(styles.popper, focusScopeClass)}
+        enableTabLoop={false}
         portalId={withinPortal ? "root" : undefined}
         id={id}
         customInput={ariaLabel ? <input type="text" aria-label={ariaLabel} /> : undefined}
+        onCalendarOpen={handleCalendarOpen}
+        onCalendarClose={handleCalendarClose}
+        onKeyDown={onKeyDown}
       />
     </div>
   );
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/EditableTable/EditableDataTable.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/EditableTable/EditableDataTable.tsx
index 7c657ddc9..d661cc299 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/EditableTable/EditableDataTable.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/EditableTable/EditableDataTable.tsx
@@ -98,7 +98,7 @@ const EditableRow = <T extends RowEntity>({
           size="sm"
           checked={selected}
           onChange={() => onToggle(row)}
-          aria-label={`Select ${rowLabel}`}
+          label={<VisuallyHidden>{`Select ${rowLabel}`}</VisuallyHidden>}
         />
       </Table.Td>
       {columns.map((col) => (
@@ -195,7 +195,12 @@ export const EditableDataTable = <T extends RowEntity>({
         modifiers={[restrictToVerticalAxis]}
         onDragEnd={handleDragEnd}
       >
-        <Table stickyHeader verticalSpacing="xs" aria-label={ariaLabel}>
+        <Table stickyHeader verticalSpacing="xs">
+          {ariaLabel && (
+            <Table.Caption>
+              <VisuallyHidden>{ariaLabel}</VisuallyHidden>
+            </Table.Caption>
+          )}
           <Table.Thead>
             <Table.Tr>
               <Table.Th className={styles.controlCell}>
@@ -204,8 +209,9 @@ export const EditableDataTable = <T extends RowEntity>({
                   checked={allSelected}
                   indeterminate={someSelected && !allSelected}
                   onChange={toggleAll}
-                  aria-label="Select all rows"
+                  label={<VisuallyHidden>Select all rows</VisuallyHidden>}
                 />
+                <VisuallyHidden>Select rows</VisuallyHidden>
               </Table.Th>
               {columns.map((col) => (
                 <Table.Th
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/FilterMultiSelect/FilterMultiSelect.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/FilterMultiSelect/FilterMultiSelect.tsx
index 4a7245155..8746bb176 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/FilterMultiSelect/FilterMultiSelect.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/FilterMultiSelect/FilterMultiSelect.tsx
@@ -96,15 +96,15 @@ export const FilterMultiSelect = ({
               <span className={styles.empty}>No matches</span>
             ) : (
               visibleOptions.map((option) => (
-                <label key={option.value} className={styles.option}>
-                  <Checkbox
-                    size="sm"
-                    checked={selected.has(option.value)}
-                    onChange={() => toggle(option.value)}
-                    aria-label={option.label}
-                  />
-                  <span className={styles.optionLabel}>{option.label}</span>
-                </label>
+                <Checkbox
+                  key={option.value}
+                  className={styles.option}
+                  classNames={{ label: styles.optionLabel }}
+                  size="sm"
+                  checked={selected.has(option.value)}
+                  onChange={() => toggle(option.value)}
+                  label={option.label}
+                />
               ))
             )}
           </div>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TabToolbar/TabToolbar.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TabToolbar/TabToolbar.module.css
index 1ef4562f2..091d3b208 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TabToolbar/TabToolbar.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TabToolbar/TabToolbar.module.css
@@ -30,7 +30,7 @@
   font-size: var(--rs-font-size-sm);
   font-weight: var(--rs-font-weight-semibold);
   font-variant-numeric: tabular-nums;
-  color: var(--rs-text-muted);
+  color: var(--rs-text);
   background: var(--rs-neutral-100);
   border: 1px solid var(--rs-border-solid);
   border-radius: var(--rs-radius-pill);
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TabToolbar/TabToolbar.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TabToolbar/TabToolbar.tsx
index 429304363..e7c70c8f2 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TabToolbar/TabToolbar.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TabToolbar/TabToolbar.tsx
@@ -7,6 +7,7 @@ import styles from "./TabToolbar.module.css";
 interface TabToolbarProps {
   title: string;
   count: number;
+  headingLevel?: 2 | 3;
   scrolled?: boolean;
   leading?: ReactNode;
   titleExtra?: ReactNode;
@@ -16,11 +17,14 @@ interface TabToolbarProps {
 export const TabToolbar = ({
   title,
   count,
+  headingLevel = 3,
   scrolled = false,
   leading,
   titleExtra,
   children
 }: TabToolbarProps) => {
+  const Heading = headingLevel === 2 ? "h2" : "h3";
+
   return (
     <Toolbar
       className={styles.toolbar}
@@ -28,7 +32,7 @@ export const TabToolbar = ({
       start={
         <div className={styles.titleGroup}>
           {leading}
-          <h3 className={styles.title}>{title}</h3>
+          <Heading className={styles.title}>{title}</Heading>
           <span className={styles.countBadge}>{count}</span>
           {titleExtra}
         </div>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TreeTable.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TreeTable.tsx
index c43fa3af8..98f09d061 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TreeTable.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TreeTable.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, Table } from "@mantine/core";
+import { Checkbox, Table, VisuallyHidden } from "@mantine/core";
 import classNames from "classnames";
 import { ReactNode, RefCallback, useMemo, useState } from "react";
 
@@ -163,7 +163,7 @@ export const TreeTable = ({
                                 checked={checked}
                                 indeterminate={indeterminate}
                                 onChange={() => (checked ? onUnselect(node) : onSelect(node))}
-                                aria-label={`Select ${nodeLabel}`}
+                                label={<VisuallyHidden>{`Select ${nodeLabel}`}</VisuallyHidden>}
                               />
                             )}
                             {col.render(node)}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/vite.config.ts b/bases/rsptx/assignment_server_api/assignment_builder/vite.config.ts
index e36763d13..58006acb3 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/vite.config.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/vite.config.ts
@@ -4,6 +4,8 @@ import { defineConfig } from "vite";
 
 export default defineConfig(({ mode }: { mode: string }) => {
   let basedir = "/";
+  const assignmentProxy = process.env.ASSIGNMENT_PROXY_URL ?? "http://localhost";
+  const adminProxy = process.env.ADMIN_PROXY_URL ?? "http://localhost";
 
   if (mode === "production") {
     basedir = "/assignment/instructor/";
@@ -30,7 +32,8 @@ export default defineConfig(({ mode }: { mode: string }) => {
     server: {
       proxy: {
         "/ns": "http://localhost",
-        "/assignment": "http://localhost"
+        "/admin": adminProxy,
+        "/assignment": assignmentProxy
       }
     },
     base: basedir,
diff --git a/components/rsptx/templates/_react_base.html b/components/rsptx/templates/_react_base.html
index 33cbf3d1a..1dac1aea0 100644
--- a/components/rsptx/templates/_react_base.html
+++ b/components/rsptx/templates/_react_base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         <meta charset="utf-8" />
         <title>{% block title %}Runestone Academy{% endblock %}</title>

From b7c9b81f678c955589bf17ca6151b507c4f1f317 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <mauk.lekph@gmail.com>
Date: Sun, 18 Oct 2026 16:33:14 +0200
Subject: [PATCH 2/7] f-1579 fix prettier

---
 .../assignment_builder/src/App.css            |   4 +-
 .../components/edit/AssignmentEdit.tsx        |   4 +-
 .../AssignmentExercisesTable.tsx              |   8 +-
 .../ClickableAreaEditor.module.css            |  14 +-
 .../DragAndDropExercise.module.css            |  10 +-
 .../MatchingExercise.module.css               |  10 +-
 .../MultiChoiceOptionsWrapper.module.css      | 190 ++--
 .../ParsonsExercise/ParsonsStyles.css         |  16 +-
 .../components/ParsonsExercise.module.css     | 926 +++++++++---------
 .../components/QuestionListEditor.module.css  | 240 ++---
 .../ToggleOptionsSettings.module.css          |  52 +-
 .../components/list/AssignmentList.tsx        |   4 +-
 .../reading/AssignmentReadingsTable.tsx       |   8 +-
 .../DateTimePicker/DateTimePicker.module.css  |  37 +-
 .../assignment_builder/src/styles/tokens.css  |  27 +-
 15 files changed, 792 insertions(+), 758 deletions(-)

diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/App.css b/bases/rsptx/assignment_server_api/assignment_builder/src/App.css
index a488e31d8..1312f9b16 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/App.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/App.css
@@ -1,4 +1,6 @@
-html, body, #root {
+html,
+body,
+#root {
   margin: 0;
   padding: 0;
   height: 100vh;
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.tsx
index 2d3393fe0..0e03e9e69 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.tsx
@@ -433,9 +433,7 @@ export const AssignmentEdit = ({
               >
                 <Icon name="arrow-left" />
               </ActionIcon>
-              <h1 className={styles.assignmentName}>
-                {selectedAssignment?.name}
-              </h1>
+              <h1 className={styles.assignmentName}>{selectedAssignment?.name}</h1>
             </Group>
             <Tooltip label="Preview as student" position="bottom">
               <ActionIcon
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx
index f148656af..725717054 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx
@@ -308,12 +308,8 @@ export const AssignmentExercisesTable = ({
         width: "20rem",
         render: (row) => (
           <div>
-            <div className={styles.name}>
-              {row.name || row.title}
-            </div>
-            <div className={styles.sub}>
-              {row.qnumber}
-            </div>
+            <div className={styles.name}>{row.name || row.title}</div>
+            <div className={styles.sub}>{row.qnumber}</div>
           </div>
         )
       },
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ClickableAreaExercise/ClickableAreaEditor.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ClickableAreaExercise/ClickableAreaEditor.module.css
index ad704261d..4b51328fc 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ClickableAreaExercise/ClickableAreaEditor.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ClickableAreaExercise/ClickableAreaEditor.module.css
@@ -38,7 +38,7 @@
 
 .contentSeparator::before,
 .contentSeparator::after {
-  content: '';
+  content: "";
   flex: 1;
   height: 1px;
   background: var(--rs-border-solid);
@@ -289,7 +289,9 @@
   padding: 2px 4px;
   border-radius: 3px;
   cursor: pointer;
-  transition: background-color var(--rs-transition-fast), border-color var(--rs-transition-fast);
+  transition:
+    background-color var(--rs-transition-fast),
+    border-color var(--rs-transition-fast);
   position: relative;
 }
 
@@ -299,7 +301,7 @@
 }
 
 .editor :global(.clickable-area-correct)::after {
-  content: '\2713';
+  content: "\2713";
   color: var(--rs-success-text);
   font-size: 0.75em;
   font-weight: 600;
@@ -316,7 +318,7 @@
 }
 
 .editor :global(.clickable-area-incorrect)::after {
-  content: '\2715';
+  content: "\2715";
   color: var(--rs-danger-text);
   font-size: 0.75em;
   font-weight: 600;
@@ -377,7 +379,9 @@
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 500;
-  transition: background-color var(--rs-transition-fast), color var(--rs-transition-fast);
+  transition:
+    background-color var(--rs-transition-fast),
+    color var(--rs-transition-fast);
   white-space: nowrap;
 }
 
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/DragAndDropExercise/DragAndDropExercise.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/DragAndDropExercise/DragAndDropExercise.module.css
index 28f050ed5..376e09069 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/DragAndDropExercise/DragAndDropExercise.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/DragAndDropExercise/DragAndDropExercise.module.css
@@ -168,7 +168,7 @@
 }
 
 .column:first-child .blockContainer::after {
-  content: '';
+  content: "";
   position: absolute;
   right: -1px;
   top: 50%;
@@ -182,7 +182,7 @@
 }
 
 .column:last-child .blockContainer::before {
-  content: '';
+  content: "";
   position: absolute;
   left: -1px;
   top: 50%;
@@ -270,7 +270,7 @@
 }
 
 .rightTarget::before {
-  content: '';
+  content: "";
   position: absolute;
   left: -4px;
   top: 50%;
@@ -426,7 +426,7 @@
 }
 
 .column:first-child .connectedBlock::after {
-  content: '';
+  content: "";
   position: absolute;
   right: -4px;
   top: 50%;
@@ -441,7 +441,7 @@
 }
 
 .column:last-child .connectedBlock::before {
-  content: '';
+  content: "";
   position: absolute;
   left: -4px;
   top: 50%;
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MatchingExercise/MatchingExercise.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MatchingExercise/MatchingExercise.module.css
index f2995e3e1..e55931e62 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MatchingExercise/MatchingExercise.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MatchingExercise/MatchingExercise.module.css
@@ -115,7 +115,7 @@
 }
 
 .column:first-child .blockContainer::after {
-  content: '';
+  content: "";
   position: absolute;
   right: -1px;
   top: 50%;
@@ -129,7 +129,7 @@
 }
 
 .column:last-child .blockContainer::before {
-  content: '';
+  content: "";
   position: absolute;
   left: -1px;
   top: 50%;
@@ -217,7 +217,7 @@
 }
 
 .rightTarget::before {
-  content: '';
+  content: "";
   position: absolute;
   left: -4px;
   top: 50%;
@@ -393,7 +393,7 @@
 }
 
 .column:first-child .connectedBlock::after {
-  content: '';
+  content: "";
   position: absolute;
   right: -4px;
   top: 50%;
@@ -408,7 +408,7 @@
 }
 
 .column:last-child .connectedBlock::before {
-  content: '';
+  content: "";
   position: absolute;
   left: -4px;
   top: 50%;
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/components/MultiChoiceOptionsWrapper.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/components/MultiChoiceOptionsWrapper.module.css
index e3d7082db..7dc00a9d1 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/components/MultiChoiceOptionsWrapper.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/MultiChoiceExercise/components/MultiChoiceOptionsWrapper.module.css
@@ -1,149 +1,149 @@
 .verticalLayout {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    height: 100%;
-    overflow: visible;
-    max-width: 100vw;
-    box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  height: 100%;
+  overflow: visible;
+  max-width: 100vw;
+  box-sizing: border-box;
 }
 
 .statementSection {
-    flex-shrink: 0;
-    background: var(--rs-surface);
-    border-radius: var(--rs-radius-sm);
-    border: 1px solid var(--rs-border-solid);
-    overflow: visible;
-    box-sizing: border-box;
+  flex-shrink: 0;
+  background: var(--rs-surface);
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid var(--rs-border-solid);
+  overflow: visible;
+  box-sizing: border-box;
 }
 
 .optionsSection {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    background: var(--rs-surface);
-    border-radius: var(--rs-radius-sm);
-    border: 1px solid var(--rs-border-solid);
-    overflow: visible;
-    box-sizing: border-box;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--rs-surface);
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid var(--rs-border-solid);
+  overflow: visible;
+  box-sizing: border-box;
 }
 
 .statementPreview {
-    display: flex;
-    flex-direction: column;
-    overflow: visible;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
 }
 
 .statementHeader {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0;
-    padding: 1rem 1.5rem;
-    background: var(--rs-neutral-50);
-    flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+  padding: 1rem 1.5rem;
+  background: var(--rs-neutral-50);
+  flex-shrink: 0;
 }
 
 .statementHeader h4 {
-    margin: 0;
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: var(--rs-neutral-700);
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--rs-neutral-700);
 }
 
 .statementContent {
-    padding: 1.5rem;
-    background: var(--rs-surface);
-    overflow: visible;
-    line-height: 1.6;
-    box-sizing: border-box;
+  padding: 1.5rem;
+  background: var(--rs-surface);
+  overflow: visible;
+  line-height: 1.6;
+  box-sizing: border-box;
 }
 
 .statementContent :global(.prose) {
-    margin: 0;
-    line-height: 1.6;
+  margin: 0;
+  line-height: 1.6;
 }
 
 .statementContent :global(.prose p) {
-    margin: 0 0 0.75rem 0;
+  margin: 0 0 0.75rem 0;
 }
 
 .statementContent :global(.prose p:last-child) {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .statementContent :global(.prose pre) {
-    background: var(--rs-neutral-100);
-    padding: 1rem;
-    border-radius: var(--rs-radius-sm);
-    overflow-x: auto;
-    margin: 0.75rem 0;
+  background: var(--rs-neutral-100);
+  padding: 1rem;
+  border-radius: var(--rs-radius-sm);
+  overflow-x: auto;
+  margin: 0.75rem 0;
 }
 
 .statementContent :global(.prose code) {
-    background: var(--rs-neutral-100);
-    padding: 0.125rem 0.25rem;
-    border-radius: 0.25rem;
-    font-size: 0.875em;
+  background: var(--rs-neutral-100);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
 }
 
 .statementBody {
-    word-wrap: break-word;
-    overflow-wrap: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .statementBody :global(img) {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--rs-radius-sm);
-    margin: 0.5rem 0;
-    display: block;
-    object-fit: contain;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--rs-radius-sm);
+  margin: 0.5rem 0;
+  display: block;
+  object-fit: contain;
 }
 
 .statementBody :global(table) {
-    max-width: 100%;
-    overflow-x: auto;
-    display: block;
-    white-space: nowrap;
+  max-width: 100%;
+  overflow-x: auto;
+  display: block;
+  white-space: nowrap;
 }
 
 .statementBody :global(pre) {
-    overflow-x: auto;
-    max-width: 100%;
+  overflow-x: auto;
+  max-width: 100%;
 }
 
 .statementBody :global(video),
 .statementBody :global(iframe) {
-    max-width: 100%;
-    height: auto;
+  max-width: 100%;
+  height: auto;
 }
 
 @media (max-width: 768px) {
-    .verticalLayout {
-        gap: 0.75rem;
-        padding: 0.5rem;
-        overflow: visible;
-    }
-
-    .statementSection {
-        overflow: visible;
-    }
-
-    .optionsSection {
-        overflow: visible;
-    }
-
-    .statementHeader {
-        padding: 0.75rem 1rem;
-    }
-
-    .statementHeader h4 {
-        font-size: 1rem;
-    }
-
-    .statementContent {
-        padding: 1rem;
-        overflow: visible;
-    }
+  .verticalLayout {
+    gap: 0.75rem;
+    padding: 0.5rem;
+    overflow: visible;
+  }
+
+  .statementSection {
+    overflow: visible;
+  }
+
+  .optionsSection {
+    overflow: visible;
+  }
+
+  .statementHeader {
+    padding: 0.75rem 1rem;
+  }
+
+  .statementHeader h4 {
+    font-size: 1rem;
+  }
+
+  .statementContent {
+    padding: 1rem;
+    overflow: visible;
+  }
 }
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/ParsonsStyles.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/ParsonsStyles.css
index d06931c4a..5cdd427cf 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/ParsonsStyles.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/ParsonsStyles.css
@@ -4,7 +4,7 @@
   overflow: hidden;
   max-width: 100% !important;
 }
-  
+
 .parsons-editor-textarea {
   width: 100%;
   position: relative;
@@ -71,7 +71,7 @@
 }
 
 .parsons-editor .monaco-editor .view-lines {
-  width: 100% !important; 
+  width: 100% !important;
 }
 
 .parsons-editor .monaco-editor:not(.focused) .cursor {
@@ -105,7 +105,7 @@
 }
 
 .line-divider::before {
-  content: '';
+  content: "";
   position: absolute;
   top: -10px;
   left: 0;
@@ -128,7 +128,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   cursor: pointer;
 }
 
@@ -160,15 +160,15 @@
 .line-divider:hover {
   height: 4px;
   opacity: 1;
-  box-shadow: 0 0 3px rgba(0,0,0,0.2);
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
 }
 
 .split-button-container:hover {
-  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
 }
 
 .line-divider::after {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   right: 0;
@@ -176,4 +176,4 @@
   top: -5px;
   background-color: transparent;
   z-index: 99;
-} 
\ No newline at end of file
+}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/components/ParsonsExercise.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/components/ParsonsExercise.module.css
index e86b0fee4..f51741bf7 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/components/ParsonsExercise.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/ParsonsExercise/components/ParsonsExercise.module.css
@@ -1,752 +1,766 @@
 .optionsBar {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    gap: 0.75rem;
-    padding: 0.625rem 0.875rem;
-    background: var(--rs-neutral-50);
-    border: 1px solid var(--rs-border-solid);
-    border-radius: 10px;
-    margin: -2rem;
-    margin-bottom: 0.5rem;
-    flex-wrap: wrap;
-    box-shadow: var(--rs-shadow-sm);
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.625rem 0.875rem;
+  background: var(--rs-neutral-50);
+  border: 1px solid var(--rs-border-solid);
+  border-radius: 10px;
+  margin: -2rem;
+  margin-bottom: 0.5rem;
+  flex-wrap: wrap;
+  box-shadow: var(--rs-shadow-sm);
 }
 
 .optionsRow {
-    display: flex;
-    align-items: stretch;
-    gap: 0.625rem;
-    flex-wrap: wrap;
-    flex: 1;
+  display: flex;
+  align-items: stretch;
+  gap: 0.625rem;
+  flex-wrap: wrap;
+  flex: 1;
 }
 
 .optionSection {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    min-width: 0;
-    animation: fadeSlideIn 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  animation: fadeSlideIn 0.2s ease;
 }
 
 .optionSectionHeader {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
 .optionSectionIcon {
-    font-size: var(--rs-font-size-xs);
-    color: var(--rs-text-subtle);
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-text-subtle);
 }
 
 .optionSectionTitle {
-    font-size: var(--rs-font-size-xs);
-    font-weight: 700;
-    color: var(--rs-text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    white-space: nowrap;
+  font-size: var(--rs-font-size-xs);
+  font-weight: 700;
+  color: var(--rs-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
 }
 
 .optionDivider {
-    width: 1px;
-    align-self: stretch;
-    background: var(--rs-border-solid);
-    flex-shrink: 0;
-    margin: 0 0.125rem;
+  width: 1px;
+  align-self: stretch;
+  background: var(--rs-border-solid);
+  flex-shrink: 0;
+  margin: 0 0.125rem;
 }
 
 .togglesGroup {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
 }
 
 .toggleItem {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    transition: opacity var(--rs-transition-fast);
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  transition: opacity var(--rs-transition-fast);
 }
 
 .modernDropdown {
-    width: 6rem !important;
-    border-radius: var(--rs-radius-sm) !important;
-    position: relative !important;
+  width: 6rem !important;
+  border-radius: var(--rs-radius-sm) !important;
+  position: relative !important;
 }
 
 .optionsActions {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    gap: 0.5rem;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.5rem;
 }
 
 .addRow {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--rs-space-2);
-    width: 100%;
-    margin-top: var(--rs-space-3);
-    padding: var(--rs-space-3);
-    background: transparent;
-    border: 1px dashed var(--rs-border-strong);
-    border-radius: var(--rs-radius-sm);
-    color: var(--rs-text-muted);
-    font-size: var(--rs-font-size-sm);
-    font-weight: var(--rs-font-weight-medium);
-    cursor: pointer;
-    transition:
-        border-color var(--rs-transition-fast),
-        color var(--rs-transition-fast),
-        background-color var(--rs-transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rs-space-2);
+  width: 100%;
+  margin-top: var(--rs-space-3);
+  padding: var(--rs-space-3);
+  background: transparent;
+  border: 1px dashed var(--rs-border-strong);
+  border-radius: var(--rs-radius-sm);
+  color: var(--rs-text-muted);
+  font-size: var(--rs-font-size-sm);
+  font-weight: var(--rs-font-weight-medium);
+  cursor: pointer;
+  transition:
+    border-color var(--rs-transition-fast),
+    color var(--rs-transition-fast),
+    background-color var(--rs-transition-fast);
 }
 
 .addRow:hover {
-    border-color: var(--rs-brand-500);
-    color: var(--rs-brand-700);
-    background: var(--rs-brand-50);
+  border-color: var(--rs-brand-500);
+  color: var(--rs-brand-700);
+  background: var(--rs-brand-50);
 }
 
 .managerContainer {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    margin: -2rem;
-    margin-top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: -2rem;
+  margin-top: 0;
 }
 
 .statsBar {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.375rem 0.75rem;
-    background: var(--rs-neutral-50);
-    border: 1px solid var(--rs-border-solid);
-    border-bottom: none;
-    border-radius: var(--rs-radius-sm) var(--rs-radius-sm) 0 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  background: var(--rs-neutral-50);
+  border: 1px solid var(--rs-border-solid);
+  border-bottom: none;
+  border-radius: var(--rs-radius-sm) var(--rs-radius-sm) 0 0;
 }
 
 .statItem {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
 .statCount {
-    font-size: 0.75rem;
-    font-weight: 700;
-    color: var(--rs-neutral-700);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--rs-neutral-700);
 }
 
 .statLabel {
-    font-size: 0.7rem;
-    color: var(--rs-text-subtle);
-    font-weight: 500;
+  font-size: 0.7rem;
+  color: var(--rs-text-subtle);
+  font-weight: 500;
 }
 
 .statDivider {
-    width: 1px;
-    height: 14px;
-    background: var(--rs-neutral-200);
-    flex-shrink: 0;
+  width: 1px;
+  height: 14px;
+  background: var(--rs-neutral-200);
+  flex-shrink: 0;
 }
 
 .statDot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
 
 .statDotSolution {
-    background: var(--rs-success);
+  background: var(--rs-success);
 }
 
 .statDotDistractor {
-    background: var(--rs-danger);
+  background: var(--rs-danger);
 }
 
 .statDotGroup {
-    background: var(--rs-brand-500);
+  background: var(--rs-brand-500);
 }
 
 .workspace {
-    width: 100%;
-    position: relative;
+  width: 100%;
+  position: relative;
 }
 
 .blocksOuter {
-    min-height: 200px;
-    max-height: 600px;
-    position: relative;
-    padding: 0;
-    overflow: auto;
-    border: 1px solid var(--rs-border-solid);
-    border-radius: 0 0 var(--rs-radius-sm) var(--rs-radius-sm);
-    background: var(--rs-neutral-50);
+  min-height: 200px;
+  max-height: 600px;
+  position: relative;
+  padding: 0;
+  overflow: auto;
+  border: 1px solid var(--rs-border-solid);
+  border-radius: 0 0 var(--rs-radius-sm) var(--rs-radius-sm);
+  background: var(--rs-neutral-50);
 }
 
 .managerContainer > .workspace:first-child .blocksOuter {
-    border-radius: var(--rs-radius-sm);
+  border-radius: var(--rs-radius-sm);
 }
 
 .indentGuidesContainer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    z-index: 1;
-    pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 1;
+  pointer-events: none;
 }
 
 .indentGuide {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background-color: var(--rs-neutral-200);
-    z-index: 0;
-    transition: background-color var(--rs-transition-fast), width var(--rs-transition-fast), box-shadow var(--rs-transition-fast);
-    height: 100%;
-    pointer-events: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--rs-neutral-200);
+  z-index: 0;
+  transition:
+    background-color var(--rs-transition-fast),
+    width var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast);
+  height: 100%;
+  pointer-events: none;
 }
 
 .indentGuideHighlighted {
-    width: 2px;
-    background-color: var(--rs-brand-500);
-    z-index: 2;
-    box-shadow: 0 0 6px color-mix(in srgb, var(--rs-brand-500) 30%, transparent);
+  width: 2px;
+  background-color: var(--rs-brand-500);
+  z-index: 2;
+  box-shadow: 0 0 6px color-mix(in srgb, var(--rs-brand-500) 30%, transparent);
 }
 
 .blocksInner {
-    min-height: 150px;
-    position: relative;
-    z-index: 2;
-    min-width: max-content;
-    width: 100%;
-    overflow-x: auto;
+  min-height: 150px;
+  position: relative;
+  z-index: 2;
+  min-width: max-content;
+  width: 100%;
+  overflow-x: auto;
 }
 
 .emptyState {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 2.5rem 1.5rem;
-    text-align: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .emptyStateIcon {
-    width: 48px;
-    height: 48px;
-    border-radius: var(--rs-radius-md);
-    background: var(--rs-brand-50);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 0.75rem;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--rs-radius-md);
+  background: var(--rs-brand-50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.75rem;
 }
 
 .emptyStateIcon i {
-    font-size: 1.25rem;
-    color: var(--rs-brand-500);
+  font-size: 1.25rem;
+  color: var(--rs-brand-500);
 }
 
 .emptyStateTitle {
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: var(--rs-neutral-600);
-    margin: 0 0 0.25rem 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--rs-neutral-600);
+  margin: 0 0 0.25rem 0;
 }
 
 .emptyStateDesc {
-    font-size: 0.8rem;
-    color: var(--rs-text-subtle);
-    margin: 0 0 1rem 0;
-    max-width: 280px;
+  font-size: 0.8rem;
+  color: var(--rs-text-subtle);
+  margin: 0 0 1rem 0;
+  max-width: 280px;
 }
 
 .emptyStateBtn {
-    font-size: 0.8rem !important;
-    border-radius: var(--rs-radius-sm) !important;
+  font-size: 0.8rem !important;
+  border-radius: var(--rs-radius-sm) !important;
 }
 
 .blockRow {
-    display: flex;
-    align-items: stretch;
-    border: 1px solid var(--rs-border-solid);
-    border-radius: var(--rs-radius-sm);
-    background: var(--rs-surface);
-    transition: box-shadow var(--rs-transition-fast), border-color var(--rs-transition-fast);
-    position: relative;
+  display: flex;
+  align-items: stretch;
+  border: 1px solid var(--rs-border-solid);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-surface);
+  transition:
+    box-shadow var(--rs-transition-fast),
+    border-color var(--rs-transition-fast);
+  position: relative;
 }
 
 .blockRow:hover {
-    box-shadow: var(--rs-shadow-sm);
-    border-color: var(--rs-border-strong);
+  box-shadow: var(--rs-shadow-sm);
+  border-color: var(--rs-border-strong);
 }
 
 .blockCard[data-dragging] .blockRow {
-    border-color: var(--rs-brand-300);
-    box-shadow: var(--rs-shadow-md);
+  border-color: var(--rs-brand-300);
+  box-shadow: var(--rs-shadow-md);
 }
 
 .blockRowDistractor {
-    background: var(--rs-danger-bg);
+  background: var(--rs-danger-bg);
 }
 
 .blockStrip {
-    width: 4px;
-    flex-shrink: 0;
-    border-radius: var(--rs-radius-sm) 0 0 var(--rs-radius-sm);
+  width: 4px;
+  flex-shrink: 0;
+  border-radius: var(--rs-radius-sm) 0 0 var(--rs-radius-sm);
 }
 
 .stripSolution {
-    background: var(--rs-success);
+  background: var(--rs-success);
 }
 
 .stripDistractor {
-    background: var(--rs-danger);
+  background: var(--rs-danger);
 }
 
 .stripPaired {
-    background: var(--rs-accent-violet);
+  background: var(--rs-accent-violet);
 }
 
 .stripAlternative {
-    background: var(--rs-brand-500);
+  background: var(--rs-brand-500);
 }
 
 .dragHandle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    flex-shrink: 0;
-    cursor: grab;
-    color: var(--rs-neutral-300);
-    font-size: 0.75rem;
-    transition: color var(--rs-transition-fast), background var(--rs-transition-fast);
-    border-right: 1px solid var(--rs-neutral-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--rs-neutral-300);
+  font-size: 0.75rem;
+  transition:
+    color var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+  border-right: 1px solid var(--rs-neutral-100);
 }
 
 .dragHandle:hover {
-    color: var(--rs-text-muted);
-    background: var(--rs-neutral-50);
+  color: var(--rs-text-muted);
+  background: var(--rs-neutral-50);
 }
 
 .dragHandle:active {
-    cursor: grabbing;
+  cursor: grabbing;
 }
 
 .blockNum {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 20px;
-    height: 20px;
-    border-radius: 4px;
-    background: var(--rs-neutral-100);
-    color: var(--rs-text-muted);
-    font-size: var(--rs-font-size-xs);
-    font-weight: 700;
-    flex-shrink: 0;
-    margin: 0 3px;
-    align-self: center;
-    font-variant-numeric: tabular-nums;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  background: var(--rs-neutral-100);
+  color: var(--rs-text-muted);
+  font-size: var(--rs-font-size-xs);
+  font-weight: 700;
+  flex-shrink: 0;
+  margin: 0 3px;
+  align-self: center;
+  font-variant-numeric: tabular-nums;
 }
 
 .correctCheckboxWrapper {
-    display: flex;
-    align-items: center;
-    padding: 0 4px;
-    flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  flex-shrink: 0;
 }
 
 .blockEditor {
-    flex: 1;
-    min-width: 0;
-    padding: 2px 0;
+  flex: 1;
+  min-width: 0;
+  padding: 2px 0;
 }
 
 .blockActions {
-    display: flex;
-    align-items: center;
-    gap: 1px;
-    padding: 0 3px;
-    flex-shrink: 0;
-    border-left: 1px solid var(--rs-neutral-100);
-    position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding: 0 3px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--rs-neutral-100);
+  position: relative;
 }
 
 .actionBtn {
-    width: 24px !important;
-    height: 24px !important;
-    padding: 0 !important;
-    color: var(--rs-text-subtle) !important;
-    transition: color var(--rs-transition-fast), background var(--rs-transition-fast) !important;
+  width: 24px !important;
+  height: 24px !important;
+  padding: 0 !important;
+  color: var(--rs-text-subtle) !important;
+  transition:
+    color var(--rs-transition-fast),
+    background var(--rs-transition-fast) !important;
 }
 
 .actionBtn:hover {
-    color: var(--rs-text-muted) !important;
-    background: var(--rs-neutral-100) !important;
+  color: var(--rs-text-muted) !important;
+  background: var(--rs-neutral-100) !important;
 }
 
 .actionBtnDanger:hover {
-    color: var(--rs-danger) !important;
-    background: var(--rs-danger-bg) !important;
+  color: var(--rs-danger) !important;
+  background: var(--rs-danger-bg) !important;
 }
 
 .optionsPanelOverlay {
-    border-radius: var(--rs-radius-md) !important;
-    box-shadow: var(--rs-shadow-md) !important;
-    border: 1px solid var(--rs-border-solid) !important;
-    backdrop-filter: blur(8px);
+  border-radius: var(--rs-radius-md) !important;
+  box-shadow: var(--rs-shadow-md) !important;
+  border: 1px solid var(--rs-border-solid) !important;
+  backdrop-filter: blur(8px);
 }
 
 .optionsPanel {
-    width: 240px;
-    max-height: 400px;
-    overflow-y: auto;
+  width: 240px;
+  max-height: 400px;
+  overflow-y: auto;
 }
 
 .optionsPanelSection {
-    padding: 0.625rem 0.75rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .optionsPanelSectionTitle {
-    font-size: var(--rs-font-size-xs);
-    font-weight: 700;
-    color: var(--rs-text-subtle);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
+  font-size: var(--rs-font-size-xs);
+  font-weight: 700;
+  color: var(--rs-text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
 
 .optionsPanelDivider {
-    margin: 0 !important;
-    padding: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
 .optionsPanelDivider::before {
-    border-color: var(--rs-neutral-100) !important;
+  border-color: var(--rs-neutral-100) !important;
 }
 
 .blockTypeToggleWrapper {
-    width: 100%;
+  width: 100%;
 }
 
 .blockTypeToggle {
-    position: relative;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    background: var(--rs-neutral-100);
-    border-radius: 10px;
-    padding: 3px;
-    cursor: pointer;
-    user-select: none;
-    border: 1px solid var(--rs-border-solid);
-    transition: border-color var(--rs-transition-fast);
-    overflow: hidden;
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  background: var(--rs-neutral-100);
+  border-radius: 10px;
+  padding: 3px;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid var(--rs-border-solid);
+  transition: border-color var(--rs-transition-fast);
+  overflow: hidden;
 }
 
 .blockTypeToggle:hover {
-    border-color: var(--rs-border-strong);
+  border-color: var(--rs-border-strong);
 }
 
 .blockTypeToggle:focus-visible {
-    outline: 2px solid var(--rs-brand-500);
-    outline-offset: 2px;
+  outline: 2px solid var(--rs-brand-500);
+  outline-offset: 2px;
 }
 
 .blockTypeToggleLabel {
-    position: relative;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.3rem;
-    padding: 0.4rem 0.5rem;
-    font-size: 0.7rem;
-    font-weight: 600;
-    color: var(--rs-text-subtle);
-    border-radius: var(--rs-radius-sm);
-    transition: color var(--rs-transition);
-    white-space: nowrap;
-    line-height: 1;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  padding: 0.4rem 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--rs-text-subtle);
+  border-radius: var(--rs-radius-sm);
+  transition: color var(--rs-transition);
+  white-space: nowrap;
+  line-height: 1;
 }
 
 .blockTypeToggleLabel i {
-    font-size: 0.8rem;
-    transition: color var(--rs-transition);
+  font-size: 0.8rem;
+  transition: color var(--rs-transition);
 }
 
 .blockTypeToggleLabelActive {
-    color: var(--rs-neutral-0);
+  color: var(--rs-neutral-0);
 }
 
 .blockTypeToggleSlider {
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: calc(50% - 3px);
-    height: calc(100% - 6px);
-    border-radius: var(--rs-radius-sm);
-    background: var(--rs-success);
-    box-shadow: var(--rs-shadow-sm);
-    transition: all var(--rs-duration) var(--rs-ease-out);
-    z-index: 1;
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: calc(50% - 3px);
+  height: calc(100% - 6px);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-success);
+  box-shadow: var(--rs-shadow-sm);
+  transition: all var(--rs-duration) var(--rs-ease-out);
+  z-index: 1;
 }
 
 .blockTypeToggleSliderRight {
-    left: calc(50%);
-    background: var(--rs-danger);
-    box-shadow: var(--rs-shadow-sm);
+  left: calc(50%);
+  background: var(--rs-danger);
+  box-shadow: var(--rs-shadow-sm);
 }
 
 .pairedCheckboxRow {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.375rem 0.25rem 0;
-    margin-top: 0.125rem;
-    animation: fadeSlideIn 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.25rem 0;
+  margin-top: 0.125rem;
+  animation: fadeSlideIn 0.2s ease;
 }
 
 .pairedCheckboxLabel {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--rs-text-muted);
-    cursor: pointer;
-    user-select: none;
-    margin: 0;
-    transition: color var(--rs-transition-fast);
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--rs-text-muted);
+  cursor: pointer;
+  user-select: none;
+  margin: 0;
+  transition: color var(--rs-transition-fast);
 }
 
 .pairedCheckboxLabel:hover {
-    color: var(--rs-neutral-600);
+  color: var(--rs-neutral-600);
 }
 
 .pairedCheckboxLabel i {
-    font-size: 0.7rem;
-    color: var(--rs-accent-violet);
+  font-size: 0.7rem;
+  color: var(--rs-accent-violet);
 }
 
 @keyframes fadeSlideIn {
-    from {
-        opacity: 0;
-        transform: translateY(-4px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .optionsPanelField {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
 .optionsPanelLabel {
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--rs-neutral-600);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--rs-neutral-600);
 }
 
 .optionsPanelHint {
-    font-size: var(--rs-font-size-xs);
-    font-weight: 400;
-    color: var(--rs-text-subtle);
-    margin-left: 0.25rem;
+  font-size: var(--rs-font-size-xs);
+  font-weight: 400;
+  color: var(--rs-text-subtle);
+  margin-left: 0.25rem;
 }
 
 .optionsPanelInput {
-    height: 2rem !important;
-    padding: 0.25rem 0.5rem !important;
-    font-size: 0.8rem !important;
-    border-radius: var(--rs-radius-sm) !important;
-    border: 1px solid var(--rs-border-solid) !important;
-    background: var(--rs-neutral-50) !important;
-    width: 100% !important;
-    transition: border-color var(--rs-transition-fast), background var(--rs-transition-fast), box-shadow var(--rs-transition-fast) !important;
+  height: 2rem !important;
+  padding: 0.25rem 0.5rem !important;
+  font-size: 0.8rem !important;
+  border-radius: var(--rs-radius-sm) !important;
+  border: 1px solid var(--rs-border-solid) !important;
+  background: var(--rs-neutral-50) !important;
+  width: 100% !important;
+  transition:
+    border-color var(--rs-transition-fast),
+    background var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast) !important;
 }
 
 .optionsPanelInput:focus {
-    border-color: var(--rs-brand-300) !important;
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rs-brand-500) 10%, transparent) !important;
-    background: var(--rs-surface) !important;
+  border-color: var(--rs-brand-300) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rs-brand-500) 10%, transparent) !important;
+  background: var(--rs-surface) !important;
 }
 
 .optionsPanelAction {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    width: 100%;
-    padding: 0.5rem 0.375rem;
-    border: none;
-    border-radius: var(--rs-radius-sm);
-    background: transparent;
-    cursor: pointer;
-    font-size: 0.8rem;
-    font-weight: 500;
-    color: var(--rs-neutral-600);
-    transition: background var(--rs-transition-fast), color var(--rs-transition-fast);
-    text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.375rem;
+  border: none;
+  border-radius: var(--rs-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--rs-neutral-600);
+  transition:
+    background var(--rs-transition-fast),
+    color var(--rs-transition-fast);
+  text-align: left;
 }
 
 .optionsPanelAction i {
-    font-size: 0.85rem;
-    color: var(--rs-text-subtle);
-    width: 1.25rem;
-    text-align: center;
-    flex-shrink: 0;
+  font-size: 0.85rem;
+  color: var(--rs-text-subtle);
+  width: 1.25rem;
+  text-align: center;
+  flex-shrink: 0;
 }
 
 .optionsPanelAction:hover {
-    background: var(--rs-neutral-100);
-    color: var(--rs-neutral-800);
+  background: var(--rs-neutral-100);
+  color: var(--rs-neutral-800);
 }
 
 .optionsPanelAction:hover i {
-    color: var(--rs-text-muted);
+  color: var(--rs-text-muted);
 }
 
 .optionsPanelBadge {
-    margin-left: auto;
-    font-size: var(--rs-font-size-xs);
-    font-weight: 700;
-    background: var(--rs-warning);
-    color: var(--rs-neutral-0);
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
+  margin-left: auto;
+  font-size: var(--rs-font-size-xs);
+  font-weight: 700;
+  background: var(--rs-warning);
+  color: var(--rs-neutral-0);
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
 .explanationRow {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
-    padding: 0.25rem 0.5rem 0.375rem 0.75rem;
-    background: var(--rs-warning-bg);
-    border: 1px solid var(--rs-warning-border);
-    border-top: 1px dashed var(--rs-warning-border);
-    border-radius: 0 0 var(--rs-radius-sm) var(--rs-radius-sm);
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem 0.375rem 0.75rem;
+  background: var(--rs-warning-bg);
+  border: 1px solid var(--rs-warning-border);
+  border-top: 1px dashed var(--rs-warning-border);
+  border-radius: 0 0 var(--rs-radius-sm) var(--rs-radius-sm);
 }
 
 .explanationIcon {
-    font-size: 0.7rem;
-    color: var(--rs-warning);
-    margin-top: 0.35rem;
-    flex-shrink: 0;
+  font-size: 0.7rem;
+  color: var(--rs-warning);
+  margin-top: 0.35rem;
+  flex-shrink: 0;
 }
 
 .explanationInput {
-    width: 100%;
-    font-size: 0.75rem !important;
-    padding: 0.2rem 0.375rem !important;
-    min-height: 1.5rem !important;
-    resize: none;
-    border: 1px solid var(--rs-warning-border) !important;
-    border-radius: 4px !important;
-    background: var(--rs-surface) !important;
-    transition: border-color var(--rs-transition-fast) !important;
+  width: 100%;
+  font-size: 0.75rem !important;
+  padding: 0.2rem 0.375rem !important;
+  min-height: 1.5rem !important;
+  resize: none;
+  border: 1px solid var(--rs-warning-border) !important;
+  border-radius: 4px !important;
+  background: var(--rs-surface) !important;
+  transition: border-color var(--rs-transition-fast) !important;
 }
 
 .explanationInput:focus {
-    border-color: var(--rs-warning) !important;
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rs-warning) 10%, transparent) !important;
+  border-color: var(--rs-warning) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rs-warning) 10%, transparent) !important;
 }
 
 .inlineDistractorArea {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 0 3px;
-    flex-shrink: 0;
-    align-self: center;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 3px;
+  flex-shrink: 0;
+  align-self: center;
 }
 
 .inlineDistractorPill {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    border-radius: var(--rs-radius-sm);
-    font-size: var(--rs-font-size-xs);
-    font-weight: 700;
-    cursor: pointer;
-    user-select: none;
-    transition: all var(--rs-duration) var(--rs-ease-out);
-    background: var(--rs-success-bg);
-    color: var(--rs-success);
-    border: 1px solid var(--rs-success-border);
-    line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: var(--rs-radius-sm);
+  font-size: var(--rs-font-size-xs);
+  font-weight: 700;
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--rs-duration) var(--rs-ease-out);
+  background: var(--rs-success-bg);
+  color: var(--rs-success);
+  border: 1px solid var(--rs-success-border);
+  line-height: 1;
 }
 
 .inlineDistractorPill:hover {
-    transform: scale(1.1);
-    box-shadow: var(--rs-shadow-sm);
+  transform: scale(1.1);
+  box-shadow: var(--rs-shadow-sm);
 }
 
 .inlineDistractorPillActive {
-    background: var(--rs-danger-bg);
-    color: var(--rs-danger);
-    border-color: var(--rs-danger-border);
+  background: var(--rs-danger-bg);
+  color: var(--rs-danger);
+  border-color: var(--rs-danger-border);
 }
 
 .inlineDistractorPillActive:hover {
-    box-shadow: var(--rs-shadow-sm);
+  box-shadow: var(--rs-shadow-sm);
 }
 
 .inlinePairedWrapper {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 .actionBtnHighlight {
-    color: var(--rs-warning) !important;
+  color: var(--rs-warning) !important;
 }
 
 .actionBtnHighlight:hover {
-    color: var(--rs-warning-text) !important;
-    background: var(--rs-warning-bg) !important;
+  color: var(--rs-warning-text) !important;
+  background: var(--rs-warning-bg) !important;
 }
 
 .modeSwitcher {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-left: auto;
-    margin-right: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+  margin-right: 0.75rem;
 }
 
 .modeSwitcherLabel {
-    font-size: 0.7rem;
-    font-weight: 600;
-    color: var(--rs-text-subtle);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    white-space: nowrap;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--rs-text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
 }
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/SelectQuestionExercise/components/QuestionListEditor.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/SelectQuestionExercise/components/QuestionListEditor.module.css
index 255d1a7d2..96e2600a1 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/SelectQuestionExercise/components/QuestionListEditor.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/SelectQuestionExercise/components/QuestionListEditor.module.css
@@ -1,194 +1,194 @@
 .container {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    background: var(--rs-surface);
-    border-radius: var(--rs-radius-md);
-    border: 1px solid var(--rs-border-solid);
-    padding: 1rem;
-    box-shadow: var(--rs-shadow-sm);
-    height: fit-content;
-    max-height: none;
-    overflow: visible;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background: var(--rs-surface);
+  border-radius: var(--rs-radius-md);
+  border: 1px solid var(--rs-border-solid);
+  padding: 1rem;
+  box-shadow: var(--rs-shadow-sm);
+  height: fit-content;
+  max-height: none;
+  overflow: visible;
 }
 
 .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
 }
 
 .headerContent {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
 }
 
 .title {
-    margin: 0;
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: var(--rs-neutral-800);
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--rs-neutral-800);
 }
 
 .headerStats {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .inputSection {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    padding: 1rem;
-    background: var(--rs-neutral-50);
-    border-radius: var(--rs-radius-sm);
-    border: 1px solid var(--rs-border-solid);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: var(--rs-neutral-50);
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid var(--rs-border-solid);
 }
 
 .autocomplete {
-    flex: 1;
-    min-width: 0;
+  flex: 1;
+  min-width: 0;
 }
 
 .questionsList {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    max-height: none;
-    overflow: visible;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-height: none;
+  overflow: visible;
 }
 
 .questionsHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid var(--rs-border-solid);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--rs-border-solid);
 }
 
 .clearButton {
-    padding: 0.4rem 0.75rem !important;
-    font-size: 0.875rem !important;
-    border-radius: var(--rs-radius-sm) !important;
+  padding: 0.4rem 0.75rem !important;
+  font-size: 0.875rem !important;
+  border-radius: var(--rs-radius-sm) !important;
 }
 
 .emptyState {
-    text-align: center;
-    padding: 1.5rem 1rem;
-    color: var(--rs-text-muted);
-    background: var(--rs-neutral-50);
-    border-radius: var(--rs-radius-sm);
-    border: 2px dashed var(--rs-border-strong);
+  text-align: center;
+  padding: 1.5rem 1rem;
+  color: var(--rs-text-muted);
+  background: var(--rs-neutral-50);
+  border-radius: var(--rs-radius-sm);
+  border: 2px dashed var(--rs-border-strong);
 }
 
 .emptyIcon {
-    margin-bottom: 1rem;
+  margin-bottom: 1rem;
 }
 
 .emptyIcon i {
-    font-size: 2rem;
-    color: var(--rs-neutral-300);
+  font-size: 2rem;
+  color: var(--rs-neutral-300);
 }
 
 .emptyTitle {
-    margin: 0 0 0.5rem 0;
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--rs-neutral-600);
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--rs-neutral-600);
 }
 
 .emptyDescription {
-    margin: 0;
-    font-size: 0.875rem;
-    line-height: 1.5;
-    color: var(--rs-text-muted);
-    max-width: 28rem;
-    margin-left: auto;
-    margin-right: auto;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--rs-text-muted);
+  max-width: 28rem;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .suggestionItem {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    padding: 0.75rem 1rem;
-    border-radius: var(--rs-radius-sm);
-    transition: background-color var(--rs-transition-fast);
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--rs-radius-sm);
+  transition: background-color var(--rs-transition-fast);
 }
 
 .suggestionItem:hover {
-    background: var(--rs-neutral-50);
+  background: var(--rs-neutral-50);
 }
 
 .suggestionMain {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
 }
 
 .suggestionName {
-    font-weight: 500;
-    color: var(--rs-neutral-800);
-    font-size: 0.95rem;
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  font-weight: 500;
+  color: var(--rs-neutral-800);
+  font-size: 0.95rem;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .suggestionTag {
-    font-size: 0.75rem !important;
-    padding: 0.25rem 0.5rem !important;
-    border-radius: 4px !important;
-    font-weight: 500 !important;
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
+  font-size: 0.75rem !important;
+  padding: 0.25rem 0.5rem !important;
+  border-radius: 4px !important;
+  font-weight: 500 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
 }
 
 .suggestionMeta {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: 0.8rem;
-    color: var(--rs-text-muted);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.8rem;
+  color: var(--rs-text-muted);
 }
 
 .suggestionTopic {
-    font-weight: 500;
+  font-weight: 500;
 }
 
 .suggestionAuthor {
-    opacity: 0.8;
+  opacity: 0.8;
 }
 
 .questionRowId {
-    flex-shrink: 0;
+  flex-shrink: 0;
 }
 
 @media (max-width: 640px) {
-    .container {
-        padding: 1rem;
-        gap: 1rem;
-        height: fit-content;
-        max-height: none;
-        overflow: visible;
-    }
-
-    .inputSection {
-        padding: 1rem;
-    }
-
-    .emptyState {
-        padding: 2rem 1rem;
-    }
-
-    .questionsList {
-        max-height: none;
-        overflow: visible;
-    }
+  .container {
+    padding: 1rem;
+    gap: 1rem;
+    height: fit-content;
+    max-height: none;
+    overflow: visible;
+  }
+
+  .inputSection {
+    padding: 1rem;
+  }
+
+  .emptyState {
+    padding: 2rem 1rem;
+  }
+
+  .questionsList {
+    max-height: none;
+    overflow: visible;
+  }
 }
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/SelectQuestionExercise/components/ToggleOptionsSettings.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/SelectQuestionExercise/components/ToggleOptionsSettings.module.css
index 96a390068..9454345d7 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/SelectQuestionExercise/components/ToggleOptionsSettings.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/SelectQuestionExercise/components/ToggleOptionsSettings.module.css
@@ -1,43 +1,43 @@
 .container {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    background: var(--rs-surface);
-    border-radius: var(--rs-radius-md);
-    border: 1px solid var(--rs-border-solid);
-    padding: 1rem;
-    box-shadow: var(--rs-shadow-sm);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  background: var(--rs-surface);
+  border-radius: var(--rs-radius-md);
+  border: 1px solid var(--rs-border-solid);
+  padding: 1rem;
+  box-shadow: var(--rs-shadow-sm);
 }
 
 .header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
 }
 
 .title {
-    margin: 0;
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: var(--rs-neutral-800);
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--rs-neutral-800);
 }
 
 .description {
-    margin: 0;
-    color: var(--rs-text-muted);
-    line-height: 1.6;
-    font-size: 0.95rem;
+  margin: 0;
+  color: var(--rs-text-muted);
+  line-height: 1.6;
+  font-size: 0.95rem;
 }
 
 .optionsSection {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 @media (max-width: 640px) {
-    .container {
-        padding: 1rem;
-        gap: 1rem;
-    }
+  .container {
+    padding: 1rem;
+    gap: 1rem;
+  }
 }
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/AssignmentList.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/AssignmentList.tsx
index 66ca69eb3..09d701732 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/AssignmentList.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/AssignmentList.tsx
@@ -291,9 +291,7 @@ export const AssignmentList = ({
               <Switch
                 size="sm"
                 label={
-                  <VisuallyHidden>
-                    Allow late submissions for {row.original.name}
-                  </VisuallyHidden>
+                  <VisuallyHidden>Allow late submissions for {row.original.name}</VisuallyHidden>
                 }
                 checked={!row.original.enforce_due}
                 onChange={(e) => onEnforceDueChange(row.original, !e.currentTarget.checked)}
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.tsx
index b0805b6e4..326642d97 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.tsx
@@ -95,9 +95,7 @@ export const AssignmentReadingsTable = ({
             <div className={styles.sectionTitle}>
               {formatNumberedLabel(row.chapter_name || row.chapter, [row.chapter_num])}
             </div>
-            <div className={styles.sectionPath}>
-              {row.chapter}
-            </div>
+            <div className={styles.sectionPath}>{row.chapter}</div>
           </div>
         )
       },
@@ -113,9 +111,7 @@ export const AssignmentReadingsTable = ({
                 [row.chapter_num, row.sub_chapter_num]
               )}
             </div>
-            <div className={styles.sectionPath}>
-              {row.subchapter}
-            </div>
+            <div className={styles.sectionPath}>{row.subchapter}</div>
           </div>
         )
       },
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.module.css
index e1e1636a6..70e7e1aa4 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.module.css
@@ -153,15 +153,28 @@
   background: transparent !important;
 }
 
-.calendar :global(.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box) {
+.calendar
+  :global(.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box) {
   width: 88px !important;
 }
 
-.calendar :global(.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button)) {
+.calendar
+  :global(
+    .react-datepicker__navigation--next--with-time:not(
+        .react-datepicker__navigation--next--with-today-button
+      )
+  ) {
   right: 92px;
 }
 
-.calendar :global(.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item) {
+.calendar
+  :global(
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list
+      li.react-datepicker__time-list-item
+  ) {
   height: auto !important;
   padding: 6px 10px !important;
   font-size: var(--rs-font-size-sm) !important;
@@ -170,12 +183,26 @@
   transition: background-color var(--rs-transition-fast);
 }
 
-.calendar :global(.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover) {
+.calendar
+  :global(
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list
+      li.react-datepicker__time-list-item:hover
+  ) {
   background-color: var(--rs-neutral-100) !important;
   color: var(--rs-text) !important;
 }
 
-.calendar :global(.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected) {
+.calendar
+  :global(
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list
+      li.react-datepicker__time-list-item--selected
+  ) {
   background-color: var(--rs-brand-600) !important;
   color: var(--rs-text-on-brand) !important;
   font-weight: var(--rs-font-weight-semibold) !important;
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/styles/tokens.css b/bases/rsptx/assignment_server_api/assignment_builder/src/styles/tokens.css
index 6a2b4e931..2b4bb258d 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/styles/tokens.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/styles/tokens.css
@@ -107,24 +107,20 @@
 
   --rs-shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.05);
   --rs-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.04), 0 2px 4px rgba(2, 6, 23, 0.04);
-  --rs-shadow-md:
-    0 0 0 1px rgba(2, 6, 23, 0.04), 0 2px 4px rgba(2, 6, 23, 0.04), 0 4px 8px rgba(2, 6, 23, 0.04);
-  --rs-shadow-overlay:
-    0 0 0 1px rgba(2, 6, 23, 0.05), 0 4px 8px rgba(2, 6, 23, 0.06),
+  --rs-shadow-md: 0 0 0 1px rgba(2, 6, 23, 0.04), 0 2px 4px rgba(2, 6, 23, 0.04),
+    0 4px 8px rgba(2, 6, 23, 0.04);
+  --rs-shadow-overlay: 0 0 0 1px rgba(2, 6, 23, 0.05), 0 4px 8px rgba(2, 6, 23, 0.06),
     0 16px 32px rgba(2, 6, 23, 0.08);
-  --rs-shadow-modal:
-    0 0 0 1px rgba(2, 6, 23, 0.05), 0 8px 16px rgba(2, 6, 23, 0.08),
+  --rs-shadow-modal: 0 0 0 1px rgba(2, 6, 23, 0.05), 0 8px 16px rgba(2, 6, 23, 0.08),
     0 24px 48px rgba(2, 6, 23, 0.12);
   --rs-shadow-lg: var(--rs-shadow-overlay);
   --rs-shadow-brand: 0 8px 24px rgba(79, 70, 229, 0.16);
   --rs-shadow-brand-soft: 0 2px 8px rgba(79, 70, 229, 0.14);
 
-  --rs-font-sans:
-    "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
-    sans-serif;
-  --rs-font-mono:
-    "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
-    Consolas, monospace;
+  --rs-font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    Roboto, sans-serif;
+  --rs-font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular,
+    "SF Mono", Menlo, Consolas, monospace;
 
   --rs-font-size-xs: 0.75rem;
   --rs-font-size-sm: 0.8125rem;
@@ -150,8 +146,11 @@
     var(--rs-accent-pink)
   );
   --rs-gradient-header: linear-gradient(180deg, var(--rs-brand-50), var(--rs-neutral-50));
-  --rs-gradient-app-bg:
-    radial-gradient(1100px 480px at 12% -8%, rgba(99, 102, 241, 0.1), transparent 60%),
+  --rs-gradient-app-bg: radial-gradient(
+      1100px 480px at 12% -8%,
+      rgba(99, 102, 241, 0.1),
+      transparent 60%
+    ),
     linear-gradient(180deg, #fafbfc 0%, #f4f6fb 100%);
 
   --rs-ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);

From 664e14738493f43799d7747608a501be28d11f39 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <mauk.lekph@gmail.com>
Date: Sun, 18 Oct 2026 16:54:14 +0200
Subject: [PATCH 3/7] f-1579 fix tests

---
 .../components/edit/CourseTimezoneNotice.spec.tsx    |  2 +-
 .../AssignmentExercisesTable.tsx                     |  8 ++++++--
 .../routes/Grader/components/GradePanel.tsx          |  7 ++++++-
 .../routes/Grader/state/graderSelectors.spec.ts      | 12 ++++++------
 .../src/components/ui/TreeTable.spec.tsx             | 11 ++++++-----
 .../src/utils/courseTimezone.spec.ts                 |  2 +-
 .../assignment_builder/src/utils/courseTimezone.ts   |  2 +-
 7 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/CourseTimezoneNotice.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/CourseTimezoneNotice.spec.tsx
index 4759730c5..7a0edeb2a 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/CourseTimezoneNotice.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/CourseTimezoneNotice.spec.tsx
@@ -89,7 +89,7 @@ describe("CourseTimezoneNotice", () => {
     const notice = screen.getByTestId("course-timezone-notice");
 
     expect(notice).toHaveTextContent("in course time");
-    expect(notice).toHaveTextContent("09:59");
+    expect(notice).toHaveTextContent("09:59 PM");
   });
 
   it("still warns with no due date chosen yet, omitting the course time line", () => {
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx
index 725717054..aab74b00b 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx
@@ -308,8 +308,12 @@ export const AssignmentExercisesTable = ({
         width: "20rem",
         render: (row) => (
           <div>
-            <div className={styles.name}>{row.name || row.title}</div>
-            <div className={styles.sub}>{row.qnumber}</div>
+            <div className={styles.name} title={row.name || row.title}>
+              {row.name || row.title}
+            </div>
+            <div className={styles.sub} title={row.qnumber}>
+              {row.qnumber}
+            </div>
           </div>
         )
       },
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/GradePanel.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/GradePanel.tsx
index 11ddaff20..968bbadaa 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/GradePanel.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/GradePanel.tsx
@@ -77,7 +77,12 @@ export const GradePanel = forwardRef<GradePanelHandle, Props>(function GradePane
     <div className={styles.gradePane} data-tour="grader-grade-panel">
       <div className={styles.gradePaneHeader}>
         <Icon name="user" size={18} className={styles.gradePaneAvatar} />
-        <div className={styles.gradePaneIdentity}>
+        <div
+          className={styles.gradePaneIdentity}
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+        >
           <div className={styles.gradePaneName}>{studentName}</div>
           <div className={styles.gradePaneMeta}>
             {student ? (
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/state/graderSelectors.spec.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/state/graderSelectors.spec.ts
index 150ea7d29..c5d9ad43e 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/state/graderSelectors.spec.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/state/graderSelectors.spec.ts
@@ -355,12 +355,12 @@ describe("statusIcon glyph mapping", () => {
 });
 
 describe("statusColor", () => {
-  it("points every StudentGradingStatus at its --rs-status-* token", () => {
-    expect(statusColor.graded).toBe("var(--rs-status-graded)");
-    expect(statusColor.autograded).toBe("var(--rs-status-autograded)");
-    expect(statusColor.in_progress).toBe("var(--rs-status-in-progress)");
-    expect(statusColor.pending).toBe("var(--rs-status-pending)");
-    expect(statusColor.no_submission).toBe("var(--rs-status-no-submission)");
+  it("points every StudentGradingStatus at an accessible semantic text token", () => {
+    expect(statusColor.graded).toBe("var(--rs-success-text)");
+    expect(statusColor.autograded).toBe("var(--rs-info-text)");
+    expect(statusColor.in_progress).toBe("var(--rs-warning-text)");
+    expect(statusColor.pending).toBe("var(--rs-neutral-600)");
+    expect(statusColor.no_submission).toBe("var(--rs-neutral-600)");
   });
 
   it("contains no hardcoded hex colors", () => {
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TreeTable.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TreeTable.spec.tsx
index c925f5cd6..c0d3e11d2 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TreeTable.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/TreeTable.spec.tsx
@@ -86,12 +86,13 @@ describe("TreeTable", () => {
       "chapter-1": { checked: false, partialChecked: true },
       "ex-3": { checked: true, partialChecked: false }
     });
-    const checkboxes = screen.getAllByRole("checkbox") as HTMLInputElement[];
-    const chapter = checkboxes.find((c) => c.getAttribute("aria-label") === "Select chapter-1");
-    const ex3 = checkboxes.find((c) => c.getAttribute("aria-label") === "Select ex-3");
+    const chapter = screen.getByRole("checkbox", {
+      name: "Select chapter-1"
+    }) as HTMLInputElement;
+    const ex3 = screen.getByRole("checkbox", { name: "Select ex-3" }) as HTMLInputElement;
 
-    expect(chapter?.indeterminate).toBe(true);
-    expect(ex3?.checked).toBe(true);
+    expect(chapter.indeterminate).toBe(true);
+    expect(ex3.checked).toBe(true);
   });
 
   it("calls onSelect when toggling an unchecked node", async () => {
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/utils/courseTimezone.spec.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/utils/courseTimezone.spec.ts
index 622fa0aaa..d50963275 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/utils/courseTimezone.spec.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/utils/courseTimezone.spec.ts
@@ -78,7 +78,7 @@ describe("formatInTimezone", () => {
 
     expect(result).toContain("Sep");
     expect(result).toContain("01");
-    expect(result).toContain("09:59");
+    expect(result).toContain("09:59 PM");
     expect(result).toMatch(/PDT|GMT-7/);
   });
 
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/utils/courseTimezone.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/utils/courseTimezone.ts
index 7f4bd05da..5b73c4285 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/utils/courseTimezone.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/utils/courseTimezone.ts
@@ -98,7 +98,7 @@ export const getCourseTimezoneMismatch = (
 /** Render an instant as wall clock time in a specific timezone. */
 export const formatInTimezone = (date: Date, timeZone: string): string => {
   try {
-    return date.toLocaleString(undefined, {
+    return date.toLocaleString("en-US", {
       timeZone,
       year: "numeric",
       month: "short",

From b7145e88bbf6325bdafab91f2fa31adcdcaa6287 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <mauk.lekph@gmail.com>
Date: Sun, 18 Oct 2026 17:43:15 +0200
Subject: [PATCH 4/7] Fix Assignment Builder accessibility CI proxy routes

---
 .github/workflows/test-assignment-builder.yml    |  2 +-
 .../assignment_builder/vite.config.ts            | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/test-assignment-builder.yml b/.github/workflows/test-assignment-builder.yml
index acc6245b5..eaba66a55 100644
--- a/.github/workflows/test-assignment-builder.yml
+++ b/.github/workflows/test-assignment-builder.yml
@@ -120,7 +120,7 @@ jobs:
         run: |
           docker compose up -d --no-build redis jobe assignment admin
           for attempt in {1..60}; do
-            if curl --fail --silent http://localhost:8115/admin/auth/login >/dev/null \
+            if curl --fail --silent http://localhost:8115/auth/login >/dev/null \
               && curl --fail --silent http://localhost:8113/openapi.json >/dev/null; then
               exit 0
             fi
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/vite.config.ts b/bases/rsptx/assignment_server_api/assignment_builder/vite.config.ts
index 58006acb3..bad4fcba3 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/vite.config.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/vite.config.ts
@@ -4,8 +4,8 @@ import { defineConfig } from "vite";
 
 export default defineConfig(({ mode }: { mode: string }) => {
   let basedir = "/";
-  const assignmentProxy = process.env.ASSIGNMENT_PROXY_URL ?? "http://localhost";
-  const adminProxy = process.env.ADMIN_PROXY_URL ?? "http://localhost";
+  const assignmentProxy = process.env.ASSIGNMENT_PROXY_URL;
+  const adminProxy = process.env.ADMIN_PROXY_URL;
 
   if (mode === "production") {
     basedir = "/assignment/instructor/";
@@ -32,8 +32,18 @@ export default defineConfig(({ mode }: { mode: string }) => {
     server: {
       proxy: {
         "/ns": "http://localhost",
-        "/admin": adminProxy,
+        "/admin": adminProxy
+          ? {
+              target: adminProxy,
+              rewrite: (requestPath) => requestPath.replace(/^\/admin/, "")
+            }
+          : "http://localhost",
         "/assignment": assignmentProxy
+          ? {
+              target: assignmentProxy,
+              rewrite: (requestPath) => requestPath.replace(/^\/assignment/, "")
+            }
+          : "http://localhost"
       }
     },
     base: basedir,

From 421d8615679cf3e4ec8162d579e79bcd62189219 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <mauk.lekph@gmail.com>
Date: Sun, 18 Oct 2026 18:16:19 +0200
Subject: [PATCH 5/7] Fix accessibility CI test setup

---
 .github/workflows/test-assignment-builder.yml       |  2 ++
 .../e2e/consolidation/a11y-scan.spec.ts             | 13 +++++++++++--
 .../assignment_builder/e2e/global.setup.ts          |  5 ++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/test-assignment-builder.yml b/.github/workflows/test-assignment-builder.yml
index eaba66a55..5c6991f24 100644
--- a/.github/workflows/test-assignment-builder.yml
+++ b/.github/workflows/test-assignment-builder.yml
@@ -114,6 +114,8 @@ jobs:
             sleep 2
           done
           docker compose run --rm --no-deps --pull never rsmanage rsmanage initdb
+          docker compose run --rm --no-deps --pull never rsmanage \
+            rsmanage addinstructor testuser1 overview
 
       - name: Start API services
         working-directory: .
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/e2e/consolidation/a11y-scan.spec.ts b/bases/rsptx/assignment_server_api/assignment_builder/e2e/consolidation/a11y-scan.spec.ts
index bb6e47cf3..139144835 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/e2e/consolidation/a11y-scan.spec.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/e2e/consolidation/a11y-scan.spec.ts
@@ -53,7 +53,11 @@ test(
     await expect(page.getByRole("heading", { level: 1, name: "Assignment grader" })).toBeVisible();
     await expect(page.getByRole("heading", { level: 2, name: "Assignments" })).toBeAttached();
     await expect(page.getByRole("navigation", { name: "Breadcrumb" })).toContainText("Assignments");
-    await expect(page.locator('[data-tour="grader-assignment-picker"]')).toBeVisible();
+    await expect(
+      page
+        .locator('[data-tour="grader-assignment-picker"]')
+        .or(page.getByText("No assignments yet"))
+    ).toBeVisible();
 
     const results = await scan(page);
 
@@ -97,7 +101,12 @@ test(
   { tag: ["@p2", "@a11y", "@grader", "@gradebook"] },
   async ({ page }, testInfo) => {
     await gotoApp(page, "/gradebook");
-    await expect(page.getByRole("heading", { level: 2, name: "Gradebook" })).toBeVisible();
+    await expect(
+      page.getByRole("heading", { level: 2, name: "Gradebook", exact: true })
+    ).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: "Nothing to grade yet" }).or(page.getByRole("table"))
+    ).toBeVisible();
 
     const results = await scan(page);
 
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/e2e/global.setup.ts b/bases/rsptx/assignment_server_api/assignment_builder/e2e/global.setup.ts
index 3c5b291d6..9235067b2 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/e2e/global.setup.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/e2e/global.setup.ts
@@ -7,7 +7,10 @@ const STACK_DOWN_MESSAGE = (url: string) =>
   `(docker compose up -d at the repo root for the backend on :80, npm start in ` +
   `assignment_builder for the Vite dev server on :5173).`;
 
-const LOGIN_URL = `${BACKEND_URL}/admin/auth/login`;
+const LOGIN_URL =
+  process.env.CI_A11Y === "true"
+    ? `${BACKEND_URL}/admin/auth/login?next=${encodeURIComponent("/builder")}`
+    : `${BACKEND_URL}/admin/auth/login`;
 const E2E_USER = "testuser1";
 const E2E_PASSWORD = "xxx";
 

From cc03ae00111134ba86ad8737441679feea868d4b Mon Sep 17 00:00:00 2001
From: Andrey Morozov <mauk.lekph@gmail.com>
Date: Sun, 18 Oct 2026 18:40:05 +0200
Subject: [PATCH 6/7] Stabilize accessibility CI course context

---
 .../e2e/fixtures/scratch.ts                   | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/bases/rsptx/assignment_server_api/assignment_builder/e2e/fixtures/scratch.ts b/bases/rsptx/assignment_server_api/assignment_builder/e2e/fixtures/scratch.ts
index 959d3a702..2a37505b8 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/e2e/fixtures/scratch.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/e2e/fixtures/scratch.ts
@@ -63,7 +63,37 @@ export const deleteAssignmentViaApi = async (
   }
 };
 
-export const test = base.extend<{ scratchAssignment: ScratchAssignment }>({
+export const test = base.extend<{
+  ciCourseContext: void;
+  scratchAssignment: ScratchAssignment;
+}>({
+  ciCourseContext: [
+    async ({ page }, use) => {
+      if (process.env.CI_A11Y === "true") {
+        await page.addInitScript(() => {
+          const ciConfig = {
+            basecourse: "overview",
+            course: "overview",
+            isInstructor: true,
+            isLoggedIn: true,
+            username: "testuser1"
+          };
+          let stored = ciConfig;
+
+          Object.defineProperty(window, "eBookConfig", {
+            configurable: true,
+            get: () => stored,
+            set: (next: Partial<EBookConfig>) => {
+              stored = { ...next, ...ciConfig };
+            }
+          });
+        });
+      }
+
+      await use();
+    },
+    { auto: true }
+  ],
   scratchAssignment: async ({ page }, use, testInfo) => {
     const name = scratchName(testInfo.workerIndex, slugify(testInfo.title));
     const id = await createAssignmentViaWizard(page, name);

From 57ad21c6f3a320eef6d6a462288af30e9f8f1041 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <mauk.lekph@gmail.com>
Date: Tue, 20 Oct 2026 16:37:11 +0200
Subject: [PATCH 7/7] f-1579 fix copilot comments

---
 .../e2e/tiptap/tiptap.spec.ts                 |  4 +-
 .../components/InsertFormPopover.spec.tsx     | 19 ++++++
 .../TipTap/components/InsertFormPopover.tsx   |  8 ++-
 .../AssignmentReadingsTable.module.css        |  8 +--
 .../routes/Grader/Grader.module.css           |  8 +--
 .../ui/DateTimePicker/DateTimePicker.spec.tsx | 60 ++++++++++++++-----
 .../ui/DateTimePicker/DateTimePicker.tsx      |  1 +
 7 files changed, 79 insertions(+), 29 deletions(-)

diff --git a/bases/rsptx/assignment_server_api/assignment_builder/e2e/tiptap/tiptap.spec.ts b/bases/rsptx/assignment_server_api/assignment_builder/e2e/tiptap/tiptap.spec.ts
index 02819d923..833b7f215 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/e2e/tiptap/tiptap.spec.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/e2e/tiptap/tiptap.spec.ts
@@ -145,7 +145,7 @@ test(
     );
     await page.keyboard.press("Enter");
 
-    const form = page.getByRole("form", { name: "Insert code block" });
+    const form = page.getByRole("dialog", { name: "Insert code block" });
 
     await expect(form).toBeVisible();
     await form.getByLabel("Language (optional)").fill("python");
@@ -245,7 +245,7 @@ test(
     await arrowToOption(page, /Math expression/);
     await page.keyboard.press("Enter");
 
-    const form = page.getByRole("form", { name: "Insert math" });
+    const form = page.getByRole("dialog", { name: "Insert math" });
 
     await expect(form).toBeVisible();
     await form.getByRole("button", { name: "Insert" }).click();
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.spec.tsx
index 29af3ab3c..d438cf708 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.spec.tsx
@@ -212,4 +212,23 @@ describe("InsertFormPopover", () => {
     expect(onClose).toHaveBeenCalledTimes(1);
     expect(editor.commands.focus).toHaveBeenCalled();
   });
+
+  it("ignores Escape pressed outside the form", () => {
+    const { editor } = makeEditor();
+    const onClose = vi.fn();
+
+    renderWithMantine(
+      <>
+        <button type="button">Outside control</button>
+        <InsertFormPopover editor={editor} request={request("math")} onClose={onClose} />
+      </>
+    );
+
+    fireEvent.keyDown(screen.getByRole("button", { name: "Outside control" }), {
+      key: "Escape"
+    });
+
+    expect(onClose).not.toHaveBeenCalled();
+    expect(editor.commands.focus).not.toHaveBeenCalled();
+  });
 });
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.tsx
index d3b4c7fd0..72c06fc22 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/TipTap/components/InsertFormPopover.tsx
@@ -102,7 +102,13 @@ export const InsertFormPopover: FC<InsertFormPopoverProps> = ({ editor, request,
     if (!request) return;
 
     const handleEscape = (event: globalThis.KeyboardEvent) => {
-      if (event.key !== "Escape") return;
+      if (
+        event.key !== "Escape" ||
+        !(event.target instanceof Node) ||
+        !inputRef.current?.closest("form")?.contains(event.target)
+      ) {
+        return;
+      }
 
       event.preventDefault();
       event.stopPropagation();
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.module.css
index 798b49065..c71fc2cc4 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/reading/AssignmentReadingsTable.module.css
@@ -15,17 +15,13 @@
 .sectionTitle {
   font-weight: var(--rs-font-weight-medium);
   color: var(--rs-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
 }
 
 .sectionPath {
   font-size: var(--rs-font-size-xs);
   color: var(--rs-text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
 }
 
 .empty {
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css
index 60f90b7ee..5017192ee 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css
@@ -372,9 +372,7 @@
 .cellName {
   display: inline-block;
   max-width: 360px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
   font-weight: var(--rs-font-weight-semibold);
   color: var(--rs-text-strong);
   vertical-align: middle;
@@ -394,9 +392,7 @@
   font-size: 13px;
   display: inline-block;
   max-width: 420px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
   vertical-align: middle;
 }
 .cellDash {
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.spec.tsx
index 7a187bc67..b0ce8f96d 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.spec.tsx
@@ -1,4 +1,5 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import { DateTimePicker } from "./DateTimePicker";
 
@@ -14,7 +15,7 @@ const getCalendarFocusables = (root: HTMLElement) =>
     root.querySelectorAll<HTMLElement>(
       "a[href], button:not([disabled]), input:not([disabled]):not([type='hidden']), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])"
     )
-  );
+  ).filter((element) => element.tabIndex >= 0);
 
 describe("DateTimePicker", () => {
   let root: HTMLElement;
@@ -102,45 +103,76 @@ describe("DateTimePicker", () => {
   });
 
   it("moves focus to the next form control after tabbing past the calendar", async () => {
+    const user = userEvent.setup();
+
     render(
       <>
-        <DateTimePicker value={null} onChange={() => {}} />
+        <DateTimePicker value={null} onChange={() => {}} withinPortal={false} />
         <button type="button">After picker</button>
       </>
     );
 
     openCalendar();
-    const calendarFocusables = getCalendarFocusables(root);
-    const lastCalendarControl = calendarFocusables.at(-1);
-
-    expect(lastCalendarControl).toBeDefined();
-    lastCalendarControl?.focus();
-    fireEvent.keyDown(lastCalendarControl!, { key: "Tab" });
+    const calendar = document.querySelector<HTMLElement>(".react-datepicker");
+
+    calendar
+      ?.querySelectorAll<HTMLElement>(".react-datepicker__navigation")
+      .forEach((button) => (button.tabIndex = -1));
+    const calendarFocusables = getCalendarFocusables(calendar!);
+
+    expect(calendar).toBeInTheDocument();
+    expect(calendarFocusables.length).toBeGreaterThan(0);
+    await user.tab();
+    expect(calendar).toContainElement(document.activeElement as HTMLElement);
+    for (
+      let index = 0;
+      index <= calendarFocusables.length && calendar?.contains(document.activeElement);
+      index += 1
+    ) {
+      await user.tab();
+    }
 
     await waitFor(() => {
-      expect(root.querySelector(".react-datepicker")).not.toBeInTheDocument();
+      expect(document.querySelector(".react-datepicker")).not.toBeInTheDocument();
       expect(screen.getByRole("button", { name: "After picker" })).toHaveFocus();
     });
   });
 
   it("moves focus to the previous form control after shift-tabbing past the calendar", async () => {
+    const user = userEvent.setup();
+
     render(
       <>
         <button type="button">Before picker</button>
-        <DateTimePicker value={null} onChange={() => {}} />
+        <DateTimePicker value={null} onChange={() => {}} withinPortal={false} />
       </>
     );
 
     openCalendar();
-    const calendarFocusables = getCalendarFocusables(root);
+    const calendar = document.querySelector<HTMLElement>(".react-datepicker");
+
+    calendar
+      ?.querySelectorAll<HTMLElement>(".react-datepicker__navigation")
+      .forEach((button) => (button.tabIndex = -1));
+    const calendarFocusables = getCalendarFocusables(calendar!);
     const firstCalendarControl = calendarFocusables.at(0);
 
+    expect(calendar).toBeInTheDocument();
     expect(firstCalendarControl).toBeDefined();
-    firstCalendarControl?.focus();
-    fireEvent.keyDown(firstCalendarControl!, { key: "Tab", shiftKey: true });
+    await user.tab();
+    expect(calendar).toContainElement(document.activeElement as HTMLElement);
+    for (
+      let index = 0;
+      index <= calendarFocusables.length && document.activeElement !== firstCalendarControl;
+      index += 1
+    ) {
+      await user.tab({ shift: true });
+    }
+    expect(firstCalendarControl).toHaveFocus();
+    await user.tab({ shift: true });
 
     await waitFor(() => {
-      expect(root.querySelector(".react-datepicker")).not.toBeInTheDocument();
+      expect(document.querySelector(".react-datepicker")).not.toBeInTheDocument();
       expect(screen.getByRole("button", { name: "Before picker" })).toHaveFocus();
     });
   });
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.tsx
index 88fea169c..a7e440fb7 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DateTimePicker/DateTimePicker.tsx
@@ -21,6 +21,7 @@ const FOCUSABLE_SELECTOR = [
 const getFocusableElements = (container: ParentNode) =>
   Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
     (element) =>
+      element.tabIndex >= 0 &&
       !element.hasAttribute("hidden") &&
       element.getAttribute("aria-hidden") !== "true" &&
       !element.closest("[hidden], [aria-hidden='true']")