From 769c6329d8f67b097779463560f03e4ea2abd548 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Wed, 1 Apr 2026 08:35:54 -0700
Subject: [PATCH 01/11] VPR-104 fix(a11y): Effort area accessibility
 improvements (PR 4 of 6)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix heading hierarchy: h2 → h1 on all 24 Effort pages
- Add route focus management via useRouteFocus composable (C4)
- Add aria-label to 272 dense q-toggle switches in UnitList and
  EffortTypeList tables (S5) — labels include row context
- Existing C2 color-indicator and S7 table caption fixes in
  PercentAssignmentTable, CourseEffortTable, EffortRecordsTable
---
 VueApp/eslint.config.mjs                      | 10 ++++
 .../Effort/components/CourseEffortTable.vue   | 28 +++++++++++
 .../Effort/components/EffortRecordsTable.vue  | 14 ++++++
 .../components/PercentAssignmentTable.vue     | 47 ++++++++++++++++++-
 VueApp/src/Effort/pages/AuditList.vue         |  2 +-
 VueApp/src/Effort/pages/ClinicalEffort.vue    |  2 +-
 VueApp/src/Effort/pages/CourseList.vue        |  2 +-
 VueApp/src/Effort/pages/DeptSummary.vue       |  2 +-
 VueApp/src/Effort/pages/EffortHome.vue        |  2 +-
 VueApp/src/Effort/pages/EffortTypeList.vue    |  8 +++-
 VueApp/src/Effort/pages/EvalDetail.vue        |  2 +-
 VueApp/src/Effort/pages/EvalSummary.vue       |  2 +-
 VueApp/src/Effort/pages/InstructorList.vue    |  2 +-
 VueApp/src/Effort/pages/MeritAverage.vue      |  2 +-
 VueApp/src/Effort/pages/MeritDetail.vue       |  2 +-
 VueApp/src/Effort/pages/MeritSummary.vue      |  2 +-
 VueApp/src/Effort/pages/MultiYearReport.vue   |  2 +-
 VueApp/src/Effort/pages/MyEffort.vue          |  4 +-
 .../pages/PercentAssignTypeInstructors.vue    |  2 +-
 .../Effort/pages/PercentAssignTypeList.vue    |  2 +-
 VueApp/src/Effort/pages/ScheduledCliWeeks.vue |  2 +-
 VueApp/src/Effort/pages/SchoolSummary.vue     |  2 +-
 VueApp/src/Effort/pages/StaffDashboard.vue    |  2 +-
 .../Effort/pages/TeachingActivityGrouped.vue  |  2 +-
 .../pages/TeachingActivityIndividual.vue      |  2 +-
 VueApp/src/Effort/pages/TermManagement.vue    |  2 +-
 VueApp/src/Effort/pages/TermSelection.vue     |  2 +-
 VueApp/src/Effort/pages/UnitList.vue          |  3 +-
 VueApp/src/Effort/router/index.ts             |  3 ++
 VueApp/vite.config.ts                         |  4 +-
 30 files changed, 136 insertions(+), 27 deletions(-)

diff --git a/VueApp/eslint.config.mjs b/VueApp/eslint.config.mjs
index b2ad3ddf..8d3ba8d6 100644
--- a/VueApp/eslint.config.mjs
+++ b/VueApp/eslint.config.mjs
@@ -50,6 +50,16 @@ export default [
             },
         },
         rules: {
+            // Quasar components are auto-imported by the vite plugin — flag explicit imports for cleanup
+            "no-restricted-imports": ["warn", {
+                patterns: [{
+                    group: ["quasar"],
+                    importNamePattern: "^Q[A-Z]",
+                    allowTypeImports: true,
+                    message: "Quasar components are auto-imported — remove explicit imports (QBtn, QTable, etc.). Utilities like setCssVar, useQuasar, Notify are fine.",
+                }],
+            }],
+
             // Disable the base rule and enable TypeScript-aware version
             "no-unused-vars": "off",
             "@typescript-eslint/no-unused-vars": ["error", {
diff --git a/VueApp/src/Effort/components/CourseEffortTable.vue b/VueApp/src/Effort/components/CourseEffortTable.vue
index 8f6e2c2c..427a68ef 100644
--- a/VueApp/src/Effort/components/CourseEffortTable.vue
+++ b/VueApp/src/Effort/components/CourseEffortTable.vue
@@ -84,7 +84,21 @@
                             <div class="text-body2 q-mb-xs">
                                 {{ record.effortTypeDescription }} ({{ record.effortTypeId }}) &bull;
                                 <span :class="{ 'zero-effort-text': record.effortValue === 0 }">
+                                    <q-icon
+                                        v-if="record.effortValue === 0"
+                                        name="report_problem"
+                                        color="amber-8"
+                                        size="1rem"
+                                        class="q-mr-xs"
+                                        aria-hidden="true"
+                                    />
                                     {{ record.effortValue }} {{ record.effortLabel }}
+                                    <span
+                                        v-if="record.effortValue === 0"
+                                        class="sr-only"
+                                    >
+                                        (zero effort)
+                                    </span>
                                 </span>
                             </div>
                             <div
@@ -217,8 +231,22 @@
 
                             <!-- Effort cell with unit label -->
                             <template v-else-if="col.name === 'effort'">
+                                <q-icon
+                                    v-if="slotProps.row.effortValue === 0"
+                                    name="report_problem"
+                                    color="amber-8"
+                                    size="1rem"
+                                    class="q-mr-xs"
+                                    aria-hidden="true"
+                                />
                                 {{ slotProps.row.effortValue }}
                                 {{ slotProps.row.effortLabel }}
+                                <span
+                                    v-if="slotProps.row.effortValue === 0"
+                                    class="sr-only"
+                                >
+                                    (zero effort)
+                                </span>
                             </template>
 
                             <!-- Actions cell -->
diff --git a/VueApp/src/Effort/components/EffortRecordsTable.vue b/VueApp/src/Effort/components/EffortRecordsTable.vue
index 950f12da..6d9382ee 100644
--- a/VueApp/src/Effort/components/EffortRecordsTable.vue
+++ b/VueApp/src/Effort/components/EffortRecordsTable.vue
@@ -79,8 +79,22 @@
 
                     <!-- Effort cell with units label -->
                     <template v-else-if="col.name === 'effort'">
+                        <q-icon
+                            v-if="isZeroEffort(slotProps.row)"
+                            name="report_problem"
+                            color="amber-8"
+                            size="1rem"
+                            class="q-mr-xs"
+                            aria-hidden="true"
+                        />
                         {{ slotProps.row.effortValue ?? 0 }}
                         {{ slotProps.row.effortLabel === "weeks" ? "Weeks" : "Hours" }}
+                        <span
+                            v-if="isZeroEffort(slotProps.row)"
+                            class="sr-only"
+                        >
+                            (zero effort)
+                        </span>
                     </template>
 
                     <!-- Actions cell -->
diff --git a/VueApp/src/Effort/components/PercentAssignmentTable.vue b/VueApp/src/Effort/components/PercentAssignmentTable.vue
index 466ead95..cd0211bc 100644
--- a/VueApp/src/Effort/components/PercentAssignmentTable.vue
+++ b/VueApp/src/Effort/components/PercentAssignmentTable.vue
@@ -57,7 +57,16 @@
             >
                 <q-card-section class="q-py-sm">
                     <div class="row items-center justify-between q-mb-xs">
-                        <span class="text-weight-bold">{{ formatTypeWithModifier(pct.typeName, pct.modifier) }}</span>
+                        <span class="text-weight-bold">
+                            {{ formatTypeWithModifier(pct.typeName, pct.modifier) }}
+                            <q-badge
+                                v-if="!pct.isActive"
+                                color="grey-5"
+                                text-color="grey-9"
+                                label="Inactive"
+                                class="q-ml-sm"
+                            />
+                        </span>
                         <div v-if="canEdit">
                             <q-btn
                                 flat
@@ -99,7 +108,21 @@
                             {{ pct.endDate ? formatDate(pct.endDate) : "Present" }}</span
                         >
                         <span :class="{ 'text-warning text-weight-bold': pct.percentageValue > 100 }">
+                            <q-icon
+                                v-if="pct.percentageValue > 100"
+                                name="warning"
+                                color="warning"
+                                size="1rem"
+                                class="q-mr-xs"
+                                aria-hidden="true"
+                            />
                             {{ pct.percentageValue.toFixed(1) }}%
+                            <span
+                                v-if="pct.percentageValue > 100"
+                                class="sr-only"
+                            >
+                                (exceeds 100%)
+                            </span>
                         </span>
                         <span v-if="pct.compensated">
                             <q-icon
@@ -146,6 +169,13 @@
                             :color="getTypeClassColor(bodyProps.row.typeClass)"
                             :label="bodyProps.row.typeClass"
                         />
+                        <q-badge
+                            v-if="!bodyProps.row.isActive"
+                            color="grey-5"
+                            text-color="grey-9"
+                            label="Inactive"
+                            class="q-ml-xs"
+                        />
                     </q-td>
                     <q-td
                         key="typeName"
@@ -174,8 +204,23 @@
                     <q-td
                         key="percentageValue"
                         :props="bodyProps"
+                        :class="{ 'text-warning text-weight-bold': bodyProps.row.percentageValue > 100 }"
                     >
+                        <q-icon
+                            v-if="bodyProps.row.percentageValue > 100"
+                            name="warning"
+                            color="warning"
+                            size="1rem"
+                            class="q-mr-xs"
+                            aria-hidden="true"
+                        />
                         {{ bodyProps.row.percentageValue.toFixed(1) }}%
+                        <span
+                            v-if="bodyProps.row.percentageValue > 100"
+                            class="sr-only"
+                        >
+                            (exceeds 100%)
+                        </span>
                     </q-td>
                     <q-td
                         key="comment"
diff --git a/VueApp/src/Effort/pages/AuditList.vue b/VueApp/src/Effort/pages/AuditList.vue
index 54d77299..c45cee2a 100644
--- a/VueApp/src/Effort/pages/AuditList.vue
+++ b/VueApp/src/Effort/pages/AuditList.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Audit Trail</h2>
+        <h1>Audit Trail</h1>
 
         <!-- Filter Panel - Collapsible on mobile, always visible on desktop -->
         <q-expansion-item
diff --git a/VueApp/src/Effort/pages/ClinicalEffort.vue b/VueApp/src/Effort/pages/ClinicalEffort.vue
index ed0d3735..c9f1b6ab 100644
--- a/VueApp/src/Effort/pages/ClinicalEffort.vue
+++ b/VueApp/src/Effort/pages/ClinicalEffort.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Merit &amp; Promotion Report - Clinical Effort</h2>
+        <h1>Merit &amp; Promotion Report - Clinical Effort</h1>
 
         <!-- Custom filter form — academic year + clinical type only -->
         <div class="filter-form q-mb-md">
diff --git a/VueApp/src/Effort/pages/CourseList.vue b/VueApp/src/Effort/pages/CourseList.vue
index 1abdd727..10203229 100644
--- a/VueApp/src/Effort/pages/CourseList.vue
+++ b/VueApp/src/Effort/pages/CourseList.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Course List</h2>
+        <h1>Course List</h1>
 
         <!-- Term selector and filters -->
         <div class="row q-col-gutter-sm q-mb-md items-center">
diff --git a/VueApp/src/Effort/pages/DeptSummary.vue b/VueApp/src/Effort/pages/DeptSummary.vue
index 3d275703..22073457 100644
--- a/VueApp/src/Effort/pages/DeptSummary.vue
+++ b/VueApp/src/Effort/pages/DeptSummary.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Teaching Activity Report - Department Summary</h2>
+        <h1>Teaching Activity Report - Department Summary</h1>
 
         <ReportFilterForm
             :term-code="termCode"
diff --git a/VueApp/src/Effort/pages/EffortHome.vue b/VueApp/src/Effort/pages/EffortHome.vue
index 91d0cec4..16bbb00b 100644
--- a/VueApp/src/Effort/pages/EffortHome.vue
+++ b/VueApp/src/Effort/pages/EffortHome.vue
@@ -11,7 +11,7 @@
             <div class="q-mt-md text-body1">Loading...</div>
         </div>
         <template v-else>
-            <h2 class="text-grey-7">Select your action from the menu</h2>
+            <h1 class="text-grey-7">Select your action from the menu</h1>
         </template>
     </div>
 </template>
diff --git a/VueApp/src/Effort/pages/EffortTypeList.vue b/VueApp/src/Effort/pages/EffortTypeList.vue
index 47b83193..92dfe1b1 100644
--- a/VueApp/src/Effort/pages/EffortTypeList.vue
+++ b/VueApp/src/Effort/pages/EffortTypeList.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="q-pa-md">
         <div class="row items-center q-mb-md">
-            <h2 class="q-ma-none">Manage Effort Types</h2>
+            <h1 class="q-ma-none">Manage Effort Types</h1>
             <q-space />
             <q-btn
                 label="Add Effort Type"
@@ -143,6 +143,7 @@
                             <q-toggle
                                 :model-value="props.row.usesWeeks"
                                 dense
+                                :aria-label="`${props.row.description} uses weeks`"
                                 :disable="isTogglingId === props.row.id"
                                 @update:model-value="toggleProperty(props.row, 'usesWeeks')"
                             >
@@ -160,6 +161,7 @@
                             <q-toggle
                                 :model-value="props.row.isActive"
                                 dense
+                                :aria-label="`${props.row.description} active`"
                                 :disable="isTogglingId === props.row.id"
                                 @update:model-value="toggleProperty(props.row, 'isActive')"
                             />
@@ -173,6 +175,7 @@
                             <q-toggle
                                 :model-value="props.row.facultyCanEnter"
                                 dense
+                                :aria-label="`${props.row.description} faculty can enter`"
                                 :disable="isTogglingId === props.row.id"
                                 @update:model-value="toggleProperty(props.row, 'facultyCanEnter')"
                             />
@@ -186,6 +189,7 @@
                             <q-toggle
                                 :model-value="props.row.allowedOnDvm"
                                 dense
+                                :aria-label="`${props.row.description} allowed on DVM`"
                                 :disable="isTogglingId === props.row.id"
                                 @update:model-value="toggleProperty(props.row, 'allowedOnDvm')"
                             />
@@ -199,6 +203,7 @@
                             <q-toggle
                                 :model-value="props.row.allowedOn199299"
                                 dense
+                                :aria-label="`${props.row.description} allowed on 199/299`"
                                 :disable="isTogglingId === props.row.id"
                                 @update:model-value="toggleProperty(props.row, 'allowedOn199299')"
                             />
@@ -212,6 +217,7 @@
                             <q-toggle
                                 :model-value="props.row.allowedOnRCourses"
                                 dense
+                                :aria-label="`${props.row.description} allowed on R courses`"
                                 :disable="isTogglingId === props.row.id"
                                 @update:model-value="toggleProperty(props.row, 'allowedOnRCourses')"
                             />
diff --git a/VueApp/src/Effort/pages/EvalDetail.vue b/VueApp/src/Effort/pages/EvalDetail.vue
index a540f09b..f37867e4 100644
--- a/VueApp/src/Effort/pages/EvalDetail.vue
+++ b/VueApp/src/Effort/pages/EvalDetail.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Evaluation Report - Detail</h2>
+        <h1>Evaluation Report - Detail</h1>
 
         <ReportFilterForm
             :term-code="termCode"
diff --git a/VueApp/src/Effort/pages/EvalSummary.vue b/VueApp/src/Effort/pages/EvalSummary.vue
index 6b8e8ebf..82ee3724 100644
--- a/VueApp/src/Effort/pages/EvalSummary.vue
+++ b/VueApp/src/Effort/pages/EvalSummary.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Evaluation Report - Summary</h2>
+        <h1>Evaluation Report - Summary</h1>
 
         <ReportFilterForm
             :term-code="termCode"
diff --git a/VueApp/src/Effort/pages/InstructorList.vue b/VueApp/src/Effort/pages/InstructorList.vue
index fa53ef99..05dd26bb 100644
--- a/VueApp/src/Effort/pages/InstructorList.vue
+++ b/VueApp/src/Effort/pages/InstructorList.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Instructor List for {{ currentTermName }}</h2>
+        <h1>Instructor List for {{ currentTermName }}</h1>
 
         <!-- Term selector and filters -->
         <div class="row q-col-gutter-sm q-mb-md items-center">
diff --git a/VueApp/src/Effort/pages/MeritAverage.vue b/VueApp/src/Effort/pages/MeritAverage.vue
index 366abf29..fc99e2fb 100644
--- a/VueApp/src/Effort/pages/MeritAverage.vue
+++ b/VueApp/src/Effort/pages/MeritAverage.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Merit &amp; Promotion Report - Average</h2>
+        <h1>Merit &amp; Promotion Report - Average</h1>
 
         <ReportFilterForm
             :term-code="termCode"
diff --git a/VueApp/src/Effort/pages/MeritDetail.vue b/VueApp/src/Effort/pages/MeritDetail.vue
index 6b38a25e..da7dfa88 100644
--- a/VueApp/src/Effort/pages/MeritDetail.vue
+++ b/VueApp/src/Effort/pages/MeritDetail.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Merit &amp; Promotion Report - Detail</h2>
+        <h1>Merit &amp; Promotion Report - Detail</h1>
 
         <ReportFilterForm
             :term-code="termCode"
diff --git a/VueApp/src/Effort/pages/MeritSummary.vue b/VueApp/src/Effort/pages/MeritSummary.vue
index 974b5024..752ffa37 100644
--- a/VueApp/src/Effort/pages/MeritSummary.vue
+++ b/VueApp/src/Effort/pages/MeritSummary.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Merit &amp; Promotion Report - Summary</h2>
+        <h1>Merit &amp; Promotion Report - Summary</h1>
 
         <ReportFilterForm
             :term-code="termCode"
diff --git a/VueApp/src/Effort/pages/MultiYearReport.vue b/VueApp/src/Effort/pages/MultiYearReport.vue
index 372c0e4e..7477ec43 100644
--- a/VueApp/src/Effort/pages/MultiYearReport.vue
+++ b/VueApp/src/Effort/pages/MultiYearReport.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Merit &amp; Promotion Report - Multi-Year</h2>
+        <h1>Merit &amp; Promotion Report - Multi-Year</h1>
 
         <!-- Step 1: Select Instructor (shown when no instructor selected) -->
         <div
diff --git a/VueApp/src/Effort/pages/MyEffort.vue b/VueApp/src/Effort/pages/MyEffort.vue
index 9364a438..5b40d14c 100644
--- a/VueApp/src/Effort/pages/MyEffort.vue
+++ b/VueApp/src/Effort/pages/MyEffort.vue
@@ -52,7 +52,7 @@
         <template v-else-if="myEffort">
             <!-- Header -->
             <div class="q-mb-md row items-center justify-between">
-                <h2 class="q-my-none header-title">
+                <h1 class="q-my-none header-title">
                     My Effort<template v-if="myEffort.termName"> for {{ myEffort.termName }}</template>
                     <a
                         href="https://ucdsvm.knowledgeowl.com/help/how-do-i-update-and-verify-my-teaching-effort"
@@ -66,7 +66,7 @@
                             size="xs"
                         />
                     </a>
-                </h2>
+                </h1>
                 <a
                     href="https://ucdsvm.knowledgeowl.com/help/how-do-i-update-and-verify-my-teaching-effort"
                     target="_blank"
diff --git a/VueApp/src/Effort/pages/PercentAssignTypeInstructors.vue b/VueApp/src/Effort/pages/PercentAssignTypeInstructors.vue
index 6391fd4a..73979750 100644
--- a/VueApp/src/Effort/pages/PercentAssignTypeInstructors.vue
+++ b/VueApp/src/Effort/pages/PercentAssignTypeInstructors.vue
@@ -22,7 +22,7 @@
         </div>
 
         <template v-else-if="typeData">
-            <h2>Instructors tagged with {{ typeData.typeName }} ({{ typeData.typeClass }})</h2>
+            <h1>Instructors tagged with {{ typeData.typeName }} ({{ typeData.typeClass }})</h1>
 
             <q-table
                 :rows="typeData.instructors"
diff --git a/VueApp/src/Effort/pages/PercentAssignTypeList.vue b/VueApp/src/Effort/pages/PercentAssignTypeList.vue
index 09ab30d1..fb7d524d 100644
--- a/VueApp/src/Effort/pages/PercentAssignTypeList.vue
+++ b/VueApp/src/Effort/pages/PercentAssignTypeList.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Percent Assignment Types</h2>
+        <h1>Percent Assignment Types</h1>
 
         <div
             v-if="isLoading"
diff --git a/VueApp/src/Effort/pages/ScheduledCliWeeks.vue b/VueApp/src/Effort/pages/ScheduledCliWeeks.vue
index 422bb068..5287a1e2 100644
--- a/VueApp/src/Effort/pages/ScheduledCliWeeks.vue
+++ b/VueApp/src/Effort/pages/ScheduledCliWeeks.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Merit &amp; Promotion Report - Scheduled Clinical Weeks</h2>
+        <h1>Merit &amp; Promotion Report - Scheduled Clinical Weeks</h1>
 
         <ReportFilterForm
             :term-code="termCode"
diff --git a/VueApp/src/Effort/pages/SchoolSummary.vue b/VueApp/src/Effort/pages/SchoolSummary.vue
index 63938628..3fb9335d 100644
--- a/VueApp/src/Effort/pages/SchoolSummary.vue
+++ b/VueApp/src/Effort/pages/SchoolSummary.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Teaching Activity Report - School Summary</h2>
+        <h1>Teaching Activity Report - School Summary</h1>
 
         <ReportFilterForm
             :term-code="termCode"
diff --git a/VueApp/src/Effort/pages/StaffDashboard.vue b/VueApp/src/Effort/pages/StaffDashboard.vue
index eaeec80d..ccadfccd 100644
--- a/VueApp/src/Effort/pages/StaffDashboard.vue
+++ b/VueApp/src/Effort/pages/StaffDashboard.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Effort Dashboard</h2>
+        <h1>Effort Dashboard</h1>
 
         <!-- Loading state -->
         <div
diff --git a/VueApp/src/Effort/pages/TeachingActivityGrouped.vue b/VueApp/src/Effort/pages/TeachingActivityGrouped.vue
index 84f1226e..5b6dc97d 100644
--- a/VueApp/src/Effort/pages/TeachingActivityGrouped.vue
+++ b/VueApp/src/Effort/pages/TeachingActivityGrouped.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Teaching Activity Report - Grouped by Department</h2>
+        <h1>Teaching Activity Report - Grouped by Department</h1>
 
         <ReportFilterForm
             :term-code="termCode"
diff --git a/VueApp/src/Effort/pages/TeachingActivityIndividual.vue b/VueApp/src/Effort/pages/TeachingActivityIndividual.vue
index 01d8e65e..8094874b 100644
--- a/VueApp/src/Effort/pages/TeachingActivityIndividual.vue
+++ b/VueApp/src/Effort/pages/TeachingActivityIndividual.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Teaching Activity Report - Individual</h2>
+        <h1>Teaching Activity Report - Individual</h1>
 
         <ReportFilterForm
             :term-code="termCode"
diff --git a/VueApp/src/Effort/pages/TermManagement.vue b/VueApp/src/Effort/pages/TermManagement.vue
index 4a95ef67..39470b5c 100644
--- a/VueApp/src/Effort/pages/TermManagement.vue
+++ b/VueApp/src/Effort/pages/TermManagement.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Term Management</h2>
+        <h1>Term Management</h1>
 
         <div
             v-if="isLoading"
diff --git a/VueApp/src/Effort/pages/TermSelection.vue b/VueApp/src/Effort/pages/TermSelection.vue
index 8e0a201e..caaba04c 100644
--- a/VueApp/src/Effort/pages/TermSelection.vue
+++ b/VueApp/src/Effort/pages/TermSelection.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-md">
-        <h2>Select a Term</h2>
+        <h1>Select a Term</h1>
 
         <div
             v-if="isLoading"
diff --git a/VueApp/src/Effort/pages/UnitList.vue b/VueApp/src/Effort/pages/UnitList.vue
index 0c848200..b3b87f61 100644
--- a/VueApp/src/Effort/pages/UnitList.vue
+++ b/VueApp/src/Effort/pages/UnitList.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="q-pa-md">
         <div class="row items-center q-mb-md">
-            <h2 class="q-ma-none">Manage Units</h2>
+            <h1 class="q-ma-none">Manage Units</h1>
             <q-space />
             <q-btn
                 label="Add Unit"
@@ -104,6 +104,7 @@
                         <q-toggle
                             :model-value="props.row.isActive"
                             dense
+                            :aria-label="`${props.row.name} active`"
                             :disable="isTogglingId === props.row.id"
                             @update:model-value="toggleActive(props.row)"
                         />
diff --git a/VueApp/src/Effort/router/index.ts b/VueApp/src/Effort/router/index.ts
index 2555205c..402ada70 100644
--- a/VueApp/src/Effort/router/index.ts
+++ b/VueApp/src/Effort/router/index.ts
@@ -4,6 +4,7 @@ import { useRequireLogin } from "@/composables/RequireLogin"
 import { checkHasOnePermission } from "@/composables/CheckPagePermission"
 import { useFetch } from "@/composables/ViperFetch"
 import { useUserStore } from "@/store/UserStore"
+import { useRouteFocus } from "@/composables/use-route-focus"
 
 const baseUrl = import.meta.env.VITE_VIPER_HOME
 const router = createRouter({
@@ -62,4 +63,6 @@ router.beforeEach(async (to, from) => {
     }
 })
 
+useRouteFocus(router)
+
 export { router as effortRouter }
diff --git a/VueApp/vite.config.ts b/VueApp/vite.config.ts
index eeb2a9a0..f5b98d8f 100644
--- a/VueApp/vite.config.ts
+++ b/VueApp/vite.config.ts
@@ -93,7 +93,9 @@ export default defineConfig(({ mode }) => {
                 }),
             // @quasar/plugin-vite options list:
             // https://github.com/quasarframework/quasar/blob/dev/vite-plugin/index.d.ts
-            quasar(),
+            quasar({
+                sassVariables: false,
+            }),
             codecovVitePlugin({
                 enableBundleAnalysis: Boolean(process.env.CODECOV_TOKEN),
                 bundleName: "viper-frontend",

From 09f5cf866fabb1f1eff76e8b2fbe488bd28e8e64 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Wed, 1 Apr 2026 10:47:51 -0700
Subject: [PATCH 02/11] fix: address Copilot review feedback on Effort PR

- Consolidate isZeroEffort checks into single v-if/v-else template
  block to avoid redundant evaluations per row
---
 .../Effort/components/EffortRecordsTable.vue  | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/VueApp/src/Effort/components/EffortRecordsTable.vue b/VueApp/src/Effort/components/EffortRecordsTable.vue
index 6d9382ee..acaf894f 100644
--- a/VueApp/src/Effort/components/EffortRecordsTable.vue
+++ b/VueApp/src/Effort/components/EffortRecordsTable.vue
@@ -79,22 +79,22 @@
 
                     <!-- Effort cell with units label -->
                     <template v-else-if="col.name === 'effort'">
-                        <q-icon
-                            v-if="isZeroEffort(slotProps.row)"
-                            name="report_problem"
-                            color="amber-8"
-                            size="1rem"
-                            class="q-mr-xs"
-                            aria-hidden="true"
-                        />
-                        {{ slotProps.row.effortValue ?? 0 }}
-                        {{ slotProps.row.effortLabel === "weeks" ? "Weeks" : "Hours" }}
-                        <span
-                            v-if="isZeroEffort(slotProps.row)"
-                            class="sr-only"
-                        >
-                            (zero effort)
-                        </span>
+                        <template v-if="isZeroEffort(slotProps.row)">
+                            <q-icon
+                                name="report_problem"
+                                color="amber-8"
+                                size="1rem"
+                                class="q-mr-xs"
+                                aria-hidden="true"
+                            />
+                            {{ slotProps.row.effortValue ?? 0 }}
+                            {{ slotProps.row.effortLabel === "weeks" ? "Weeks" : "Hours" }}
+                            <span class="sr-only">(zero effort)</span>
+                        </template>
+                        <template v-else>
+                            {{ slotProps.row.effortValue ?? 0 }}
+                            {{ slotProps.row.effortLabel === "weeks" ? "Weeks" : "Hours" }}
+                        </template>
                     </template>
 
                     <!-- Actions cell -->

From d61789106d772d9807eb1366830e25a86825bcc6 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Thu, 2 Apr 2026 14:30:06 -0700
Subject: [PATCH 03/11] VPR-104 fix(a11y): align Effort button colors and
 migrate banners to StatusBanner

- Replace color="cyan-8"/"teal-8" with color="info" text-color="dark" (Tahoe)
- Replace color="orange"/"orange-8"/"orange-9" with color="warning" text-color="dark"
- Add text-color="dark" to existing color="info" buttons
- Fix duplicate text-color attributes from color migration
- Migrate 13 banners to StatusBanner component across 8 files:
  EffortRecordsDisplay, CourseImportDialog, CourseEffortTable,
  MyEffort, CourseList, CourseDetail, ScheduledCliWeeks,
  PercentAssignTypeInstructors
---
 .../components/ClinicalImportDialog.vue       | 17 ++++--
 .../Effort/components/CourseEffortTable.vue   | 15 ++---
 .../Effort/components/CourseImportDialog.vue  | 46 ++++++---------
 .../components/EffortRecordAddDialog.vue      |  3 +-
 .../components/EffortRecordEditDialog.vue     |  3 +-
 .../components/EffortRecordsDisplay.vue       | 11 ++--
 .../src/Effort/components/HarvestDialog.vue   |  3 +-
 .../components/PercentRolloverDialog.vue      | 15 +++--
 VueApp/src/Effort/pages/CourseDetail.vue      | 17 +++---
 VueApp/src/Effort/pages/CourseList.vue        | 15 ++---
 VueApp/src/Effort/pages/InstructorList.vue    | 10 ++--
 VueApp/src/Effort/pages/MyEffort.vue          | 58 ++++++++++---------
 .../pages/PercentAssignTypeInstructors.vue    |  5 +-
 VueApp/src/Effort/pages/ScheduledCliWeeks.vue |  9 +--
 VueApp/src/Effort/pages/StaffDashboard.vue    |  1 +
 VueApp/src/Effort/pages/TermManagement.vue    | 20 +++----
 16 files changed, 121 insertions(+), 127 deletions(-)

diff --git a/VueApp/src/Effort/components/ClinicalImportDialog.vue b/VueApp/src/Effort/components/ClinicalImportDialog.vue
index e54bbee4..5fd23476 100644
--- a/VueApp/src/Effort/components/ClinicalImportDialog.vue
+++ b/VueApp/src/Effort/components/ClinicalImportDialog.vue
@@ -42,13 +42,14 @@
                 <q-linear-progress
                     :value="importProgress"
                     size="25px"
-                    color="teal-8"
+                    color="info"
+                    text-color="dark"
                     class="q-mb-md"
                 >
                     <div class="absolute-full flex flex-center">
                         <q-badge
                             color="white"
-                            text-color="teal-8"
+                            text-color="info"
                             :label="`${Math.round(importProgress * 100)}%`"
                         />
                     </div>
@@ -90,7 +91,8 @@
                         <q-option-group
                             v-model="selectedMode"
                             :options="modeOptions"
-                            color="teal-8"
+                            color="info"
+                            text-color="dark"
                             :inline="$q.screen.gt.xs"
                             @update:model-value="onModeChange"
                         />
@@ -138,7 +140,8 @@
                         <div class="row items-center q-mb-xs">
                             <q-icon
                                 name="warning"
-                                color="orange"
+                                color="warning"
+                                text-color="dark"
                                 size="sm"
                                 class="q-mr-sm"
                             />
@@ -215,7 +218,8 @@
                         <div class="row items-center q-mb-xs">
                             <q-icon
                                 name="info"
-                                color="orange"
+                                color="warning"
+                                text-color="dark"
                                 size="sm"
                                 class="q-mr-sm"
                             />
@@ -248,7 +252,8 @@
                     />
                     <q-btn
                         label="Confirm Import"
-                        color="teal-8"
+                        color="info"
+                        text-color="dark"
                         :disable="totalChanges === 0 || isCommitting"
                         @click="confirmImport"
                     />
diff --git a/VueApp/src/Effort/components/CourseEffortTable.vue b/VueApp/src/Effort/components/CourseEffortTable.vue
index 427a68ef..103d3b77 100644
--- a/VueApp/src/Effort/components/CourseEffortTable.vue
+++ b/VueApp/src/Effort/components/CourseEffortTable.vue
@@ -10,20 +10,12 @@
         </div>
 
         <!-- Error state -->
-        <q-banner
+        <StatusBanner
             v-else-if="loadError"
-            class="bg-negative text-white q-mb-md"
-            rounded
-            role="alert"
+            type="error"
         >
-            <template #avatar>
-                <q-icon
-                    name="error"
-                    color="white"
-                />
-            </template>
             {{ loadError }}
-        </q-banner>
+        </StatusBanner>
 
         <template v-else-if="records.length > 0">
             <!-- Mobile Card View -->
@@ -307,6 +299,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue"
 import type { QTableColumn } from "quasar"
+import StatusBanner from "@/components/StatusBanner.vue"
 import type { CourseEffortRecordDto } from "../types"
 import { useEffortPermissions } from "../composables/use-effort-permissions"
 import "../effort-record-table.css"
diff --git a/VueApp/src/Effort/components/CourseImportDialog.vue b/VueApp/src/Effort/components/CourseImportDialog.vue
index c71ec648..0ae6a9f9 100644
--- a/VueApp/src/Effort/components/CourseImportDialog.vue
+++ b/VueApp/src/Effort/components/CourseImportDialog.vue
@@ -84,32 +84,18 @@
                     </div>
                 </div>
 
-                <q-banner
+                <StatusBanner
                     v-if="searchError"
-                    class="bg-negative text-white q-mb-md"
-                    rounded
+                    type="error"
                 >
-                    <template #avatar>
-                        <q-icon
-                            name="error"
-                            color="white"
-                        />
-                    </template>
                     {{ searchError }}
-                </q-banner>
+                </StatusBanner>
 
                 <!-- No results message (self mode - richer banner) -->
-                <q-banner
+                <StatusBanner
                     v-if="isSelfMode && hasSearched && !isSearching && searchResults.length === 0"
-                    class="bg-info text-white q-mb-md"
-                    rounded
+                    type="info"
                 >
-                    <template #avatar>
-                        <q-icon
-                            name="info"
-                            color="white"
-                        />
-                    </template>
                     <div>
                         No courses found.
                         <ul class="q-mt-sm q-mb-none">
@@ -117,7 +103,7 @@
                             <li>You may need to wait for Banner data to sync</li>
                         </ul>
                     </div>
-                </q-banner>
+                </StatusBanner>
 
                 <!-- Search Results - Card view for mobile -->
                 <div
@@ -144,7 +130,8 @@
                                 >
                                 <q-badge
                                     v-else-if="course.importedUnitValues.length > 0"
-                                    color="orange"
+                                    color="warning"
+                                    text-color="dark"
                                     >Imported: {{ course.importedUnitValues.join(", ") }} units</q-badge
                                 >
                                 <q-badge
@@ -160,6 +147,7 @@
                                     Units: {{ course.unitLow }}-{{ course.unitHigh }}
                                     <q-badge
                                         color="info"
+                                        text-color="dark"
                                         dense
                                         class="q-ml-xs"
                                         >Variable</q-badge
@@ -220,6 +208,7 @@
                                 {{ slotProps.row.unitLow }} - {{ slotProps.row.unitHigh }}
                                 <q-badge
                                     color="info"
+                                    text-color="dark"
                                     class="q-ml-xs"
                                     >Variable</q-badge
                                 >
@@ -235,7 +224,9 @@
                                 <q-badge color="grey">Already Imported</q-badge>
                             </template>
                             <template v-else-if="slotProps.row.importedUnitValues.length > 0">
-                                <q-badge color="orange"
+                                <q-badge
+                                    color="warning"
+                                    text-color="dark"
                                     >Imported: {{ slotProps.row.importedUnitValues.join(", ") }} units</q-badge
                                 >
                             </template>
@@ -326,16 +317,12 @@
                 </template>
 
                 <!-- Import error display -->
-                <q-banner
+                <StatusBanner
                     v-if="importError"
-                    class="bg-negative text-white q-mt-md"
-                    dense
+                    type="error"
                 >
-                    <template #avatar>
-                        <q-icon name="error" />
-                    </template>
                     {{ importError }}
-                </q-banner>
+                </StatusBanner>
             </q-card-section>
 
             <q-card-actions align="right">
@@ -367,6 +354,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue"
 import { useQuasar } from "quasar"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { courseService } from "../services/course-service"
 import type { BannerCourseDto } from "../types"
 import type { QTableColumn } from "quasar"
diff --git a/VueApp/src/Effort/components/EffortRecordAddDialog.vue b/VueApp/src/Effort/components/EffortRecordAddDialog.vue
index e62e3bc8..62bb37e9 100644
--- a/VueApp/src/Effort/components/EffortRecordAddDialog.vue
+++ b/VueApp/src/Effort/components/EffortRecordAddDialog.vue
@@ -33,7 +33,8 @@
                         <template #avatar>
                             <q-icon
                                 name="info"
-                                color="orange-9"
+                                color="warning"
+                                text-color="dark"
                             />
                         </template>
                         <span class="text-orange-9">
diff --git a/VueApp/src/Effort/components/EffortRecordEditDialog.vue b/VueApp/src/Effort/components/EffortRecordEditDialog.vue
index d1f7105f..4382f006 100644
--- a/VueApp/src/Effort/components/EffortRecordEditDialog.vue
+++ b/VueApp/src/Effort/components/EffortRecordEditDialog.vue
@@ -33,7 +33,8 @@
                         <template #avatar>
                             <q-icon
                                 name="info"
-                                color="orange-9"
+                                color="warning"
+                                text-color="dark"
                             />
                         </template>
                         <span class="text-orange-9">
diff --git a/VueApp/src/Effort/components/EffortRecordsDisplay.vue b/VueApp/src/Effort/components/EffortRecordsDisplay.vue
index f2c7f2db..612572e1 100644
--- a/VueApp/src/Effort/components/EffortRecordsDisplay.vue
+++ b/VueApp/src/Effort/components/EffortRecordsDisplay.vue
@@ -103,17 +103,13 @@
             <h4 class="q-mt-none q-mb-sm">Resident Teaching (R-Course)</h4>
 
             <!-- Generic R-course with zero effort info -->
-            <q-banner
+            <StatusBanner
                 v-if="hasGenericRCourseWithZeroEffort"
-                class="bg-info text-white q-mb-md"
-                rounded
+                type="info"
             >
-                <template #avatar>
-                    <q-icon name="info" />
-                </template>
                 The Resident (R) course was added automatically to allow recording of resident teaching effort. If left
                 with 0 effort and verified, it will be automatically removed.
-            </q-banner>
+            </StatusBanner>
 
             <!-- R-Course Mobile Card View -->
             <div class="lt-sm">
@@ -224,6 +220,7 @@
 import { computed } from "vue"
 import type { QTableColumn } from "quasar"
 import type { InstructorEffortRecordDto } from "../types"
+import StatusBanner from "@/components/StatusBanner.vue"
 import EffortRecordsTable from "./EffortRecordsTable.vue"
 import "../effort-record-table.css"
 
diff --git a/VueApp/src/Effort/components/HarvestDialog.vue b/VueApp/src/Effort/components/HarvestDialog.vue
index 4837c19d..c24c71fe 100644
--- a/VueApp/src/Effort/components/HarvestDialog.vue
+++ b/VueApp/src/Effort/components/HarvestDialog.vue
@@ -116,7 +116,8 @@
                         <div class="row items-center q-mb-xs">
                             <q-icon
                                 name="warning"
-                                color="orange"
+                                color="warning"
+                                text-color="dark"
                                 size="sm"
                                 class="q-mr-sm"
                             />
diff --git a/VueApp/src/Effort/components/PercentRolloverDialog.vue b/VueApp/src/Effort/components/PercentRolloverDialog.vue
index e9bc6d76..97e3fe32 100644
--- a/VueApp/src/Effort/components/PercentRolloverDialog.vue
+++ b/VueApp/src/Effort/components/PercentRolloverDialog.vue
@@ -33,7 +33,8 @@
                     <template #avatar>
                         <q-icon
                             name="warning"
-                            color="orange"
+                            color="warning"
+                            text-color="dark"
                         />
                     </template>
                     <div class="text-weight-medium text-orange-9">Unusual Timing</div>
@@ -147,7 +148,8 @@
                         <template #avatar>
                             <q-icon
                                 name="warning"
-                                color="orange"
+                                color="warning"
+                                text-color="dark"
                             />
                         </template>
                         <div class="text-weight-medium">No assignments to roll forward</div>
@@ -167,7 +169,8 @@
                             <div class="row items-center full-width">
                                 <q-icon
                                     name="event_repeat"
-                                    color="cyan-8"
+                                    color="info"
+                                    text-color="dark"
                                     size="24px"
                                     class="q-mr-sm"
                                 />
@@ -224,7 +227,8 @@
                             <div class="row items-center full-width">
                                 <q-icon
                                     name="block"
-                                    color="orange"
+                                    color="warning"
+                                    text-color="dark"
                                     size="24px"
                                     class="q-mr-sm"
                                 />
@@ -247,7 +251,8 @@
                                 <template #avatar>
                                     <q-icon
                                         name="info"
-                                        color="orange"
+                                        color="warning"
+                                        text-color="dark"
                                     />
                                 </template>
                                 These assignments will not be rolled forward because someone manually edited or deleted
diff --git a/VueApp/src/Effort/pages/CourseDetail.vue b/VueApp/src/Effort/pages/CourseDetail.vue
index 5068075d..1f639fa6 100644
--- a/VueApp/src/Effort/pages/CourseDetail.vue
+++ b/VueApp/src/Effort/pages/CourseDetail.vue
@@ -23,9 +23,9 @@
         </div>
 
         <!-- Error state -->
-        <q-banner
+        <StatusBanner
             v-else-if="loadError"
-            class="bg-negative text-white q-mb-md"
+            type="error"
         >
             {{ loadError }}
             <template #action>
@@ -35,7 +35,7 @@
                     :to="{ name: 'CourseList', params: { termCode } }"
                 />
             </template>
-        </q-banner>
+        </StatusBanner>
 
         <!-- Course content -->
         <template v-else-if="course">
@@ -69,17 +69,13 @@
             </div>
 
             <!-- R-Course Notice -->
-            <q-banner
+            <StatusBanner
                 v-if="isResidentCourse"
-                class="bg-info text-white q-mb-md"
-                rounded
+                type="info"
             >
-                <template #avatar>
-                    <q-icon name="info" />
-                </template>
                 The Resident (R) course was added automatically to allow recording of resident teaching effort. If left
                 with 0 effort and verified, it will be automatically removed.
-            </q-banner>
+            </StatusBanner>
 
             <!-- Course Info (hidden for resident teaching course) -->
             <div
@@ -388,6 +384,7 @@ import type {
     CourseEvaluationStatusDto,
     CourseEvalEntryDto,
 } from "../types"
+import StatusBanner from "@/components/StatusBanner.vue"
 import CourseEditDialog from "../components/CourseEditDialog.vue"
 import CourseLinkDialog from "../components/CourseLinkDialog.vue"
 import CourseEffortTable from "../components/CourseEffortTable.vue"
diff --git a/VueApp/src/Effort/pages/CourseList.vue b/VueApp/src/Effort/pages/CourseList.vue
index 10203229..44b330fa 100644
--- a/VueApp/src/Effort/pages/CourseList.vue
+++ b/VueApp/src/Effort/pages/CourseList.vue
@@ -158,8 +158,8 @@
                                 </q-badge>
                                 <q-badge
                                     v-if="props.row.enrollment === 0 && !props.row.isRCourse"
-                                    color="orange-8"
-                                    text-color="white"
+                                    color="warning"
+                                    text-color="dark"
                                 >
                                     0 Enrollment
                                     <q-tooltip>This course has zero enrollment</q-tooltip>
@@ -225,16 +225,10 @@
             <div class="dept-header text-white q-pa-sm row items-center">
                 <span class="text-weight-bold">Resident Teaching (R-Course) ({{ residentCourses.length }})</span>
             </div>
-            <q-banner
-                class="bg-info text-white q-mb-none"
-                square
-            >
-                <template #avatar>
-                    <q-icon name="info" />
-                </template>
+            <StatusBanner type="info">
                 The Resident (R) course was added automatically to allow recording of resident teaching effort. If left
                 with 0 effort and verified, it will be automatically removed.
-            </q-banner>
+            </StatusBanner>
             <q-table
                 :rows="residentCourses"
                 :columns="rCourseColumns"
@@ -316,6 +310,7 @@ import { termService } from "../services/term-service"
 import { useEffortPermissions } from "../composables/use-effort-permissions"
 import type { CourseDto, TermDto } from "../types"
 import type { QTableColumn } from "quasar"
+import StatusBanner from "@/components/StatusBanner.vue"
 import CourseImportDialog from "../components/CourseImportDialog.vue"
 import CourseEditDialog from "../components/CourseEditDialog.vue"
 import CourseAddDialog from "../components/CourseAddDialog.vue"
diff --git a/VueApp/src/Effort/pages/InstructorList.vue b/VueApp/src/Effort/pages/InstructorList.vue
index 05dd26bb..a8bb7149 100644
--- a/VueApp/src/Effort/pages/InstructorList.vue
+++ b/VueApp/src/Effort/pages/InstructorList.vue
@@ -149,6 +149,7 @@
                                     v-else-if="instructor.isVerified && instructor.recordCount === 0"
                                     name="check"
                                     color="info"
+                                    text-color="dark"
                                     size="sm"
                                     class="q-mr-sm"
                                 >
@@ -170,8 +171,8 @@
                                     </router-link>
                                     <q-badge
                                         v-if="instructor.recordCount === 0"
-                                        color="orange-8"
-                                        text-color="white"
+                                        color="warning"
+                                        text-color="dark"
                                     >
                                         No Effort
                                     </q-badge>
@@ -435,6 +436,7 @@
                                 v-else-if="props.row.isVerified && props.row.recordCount === 0"
                                 name="check"
                                 color="info"
+                                text-color="dark"
                                 size="xs"
                             >
                                 <q-tooltip>Verified no effort</q-tooltip>
@@ -458,8 +460,8 @@
                                 </router-link>
                                 <q-badge
                                     v-if="props.row.recordCount === 0"
-                                    color="orange-8"
-                                    text-color="white"
+                                    color="warning"
+                                    text-color="dark"
                                     class="no-effort-badge"
                                 >
                                     No Effort
diff --git a/VueApp/src/Effort/pages/MyEffort.vue b/VueApp/src/Effort/pages/MyEffort.vue
index 5b40d14c..2c62a74c 100644
--- a/VueApp/src/Effort/pages/MyEffort.vue
+++ b/VueApp/src/Effort/pages/MyEffort.vue
@@ -22,9 +22,9 @@
         </div>
 
         <!-- Error state -->
-        <q-banner
+        <StatusBanner
             v-else-if="loadError"
-            class="bg-negative text-white q-mb-md"
+            type="error"
         >
             {{ loadError }}
             <template #action>
@@ -34,19 +34,16 @@
                     :to="{ name: 'EffortHomeWithTerm', params: { termCode } }"
                 />
             </template>
-        </q-banner>
+        </StatusBanner>
 
         <!-- No instructor record for this term (empty DTO returned) -->
-        <q-banner
+        <StatusBanner
             v-else-if="myEffort && myEffort.effortRecords.length === 0 && !myEffort.instructor.personId"
-            class="bg-info text-white q-mb-md"
-            rounded
+            type="info"
+            icon="school"
         >
-            <template #avatar>
-                <q-icon name="school" />
-            </template>
             No effort records found for you in this term.
-        </q-banner>
+        </StatusBanner>
 
         <!-- Content when loaded -->
         <template v-else-if="myEffort">
@@ -90,16 +87,12 @@
             />
 
             <!-- Already verified banner -->
-            <q-banner
+            <StatusBanner
                 v-if="myEffort.instructor.isVerified"
-                class="bg-positive text-white q-mb-md"
-                rounded
+                type="success"
             >
-                <template #avatar>
-                    <q-icon name="check_circle" />
-                </template>
                 Your effort was verified on {{ formatEffortDate(myEffort.instructor.effortVerified) }}
-            </q-banner>
+            </StatusBanner>
 
             <!-- Zero effort warning -->
             <ZeroEffortBanner
@@ -116,19 +109,15 @@
             </p>
 
             <!-- No records message with verification option -->
-            <q-banner
+            <StatusBanner
                 v-if="myEffort.effortRecords.length === 0 && !myEffort.instructor.isVerified"
-                class="bg-info text-white q-mb-md"
-                rounded
+                type="info"
             >
-                <template #avatar>
-                    <q-icon name="info" />
-                </template>
                 <div>
                     No effort records found for you in this term. If this is correct, you can verify that you had no
                     teaching effort for {{ myEffort.termName }}.
                 </div>
-            </q-banner>
+            </StatusBanner>
 
             <!-- No records message (already verified) -->
             <div
@@ -256,6 +245,7 @@ import { recordService } from "../services/record-service"
 import { useEffortRecordManagement, formatEffortDate } from "../composables/use-effort-record-management"
 import type { MyEffortDto, EffortTypeOptionDto, InstructorEffortRecordDto } from "../types"
 import { VerificationErrorCodes } from "../types"
+import StatusBanner from "@/components/StatusBanner.vue"
 import EffortRecordAddDialog from "../components/EffortRecordAddDialog.vue"
 import EffortRecordEditDialog from "../components/EffortRecordEditDialog.vue"
 import CourseImportDialog from "../components/CourseImportDialog.vue"
@@ -421,6 +411,21 @@ onMounted(loadData)
     align-items: center;
 }
 
+@media screen and (prefers-reduced-motion: reduce) {
+    .help-link {
+        margin-left: 8px;
+        display: inline-flex;
+        align-items: center;
+        text-decoration: none;
+        font-size: 0.9rem;
+        font-weight: normal;
+        gap: 4px;
+        padding: 6px 12px;
+        border-radius: 4px;
+        transition: none;
+    }
+}
+
 .help-link {
     margin-left: 8px;
     display: inline-flex;
@@ -434,7 +439,8 @@ onMounted(loadData)
     transition: background-color 0.2s ease;
 }
 
-.help-link:hover {
-    background-color: rgba(0, 95, 153, 0.1);
+.help-link:hover,
+.help-link:focus {
+    background-color: rgb(0 95 153 / 10%);
 }
 </style>
diff --git a/VueApp/src/Effort/pages/PercentAssignTypeInstructors.vue b/VueApp/src/Effort/pages/PercentAssignTypeInstructors.vue
index 73979750..05d30fb9 100644
--- a/VueApp/src/Effort/pages/PercentAssignTypeInstructors.vue
+++ b/VueApp/src/Effort/pages/PercentAssignTypeInstructors.vue
@@ -60,7 +60,7 @@
 
         <!-- Error state -->
         <template v-else>
-            <q-banner class="bg-negative text-white q-mb-md">
+            <StatusBanner type="error">
                 Percent assignment type not found.
                 <template #action>
                     <q-btn
@@ -69,7 +69,7 @@
                         :to="backLink"
                     />
                 </template>
-            </q-banner>
+            </StatusBanner>
         </template>
     </div>
 </template>
@@ -77,6 +77,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue"
 import { useRoute } from "vue-router"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { percentAssignTypeService } from "../services/percent-assign-type-service"
 import type { InstructorsByPercentAssignTypeResponseDto, InstructorByPercentAssignTypeDto } from "../types"
 import type { QTableColumn } from "quasar"
diff --git a/VueApp/src/Effort/pages/ScheduledCliWeeks.vue b/VueApp/src/Effort/pages/ScheduledCliWeeks.vue
index 5287a1e2..47d30b79 100644
--- a/VueApp/src/Effort/pages/ScheduledCliWeeks.vue
+++ b/VueApp/src/Effort/pages/ScheduledCliWeeks.vue
@@ -63,13 +63,13 @@
 
         <!-- Report content -->
         <template v-else-if="report">
-            <q-banner
-                class="bg-info text-white q-my-md"
-                rounded
+            <StatusBanner
+                type="info"
+                class="q-mt-md"
             >
                 The following data is based on the instructor schedule pulled live from the Clinical Scheduler. It does
                 not contain the verified effort entered by faculty and departments.
-            </q-banner>
+            </StatusBanner>
 
             <template v-if="report.instructors.length === 0">
                 <div
@@ -108,6 +108,7 @@
 
 <script setup lang="ts">
 import { computed } from "vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { reportService } from "../services/report-service"
 import { useReportPage } from "../composables/use-report-page"
 import ReportFilterForm from "../components/ReportFilterForm.vue"
diff --git a/VueApp/src/Effort/pages/StaffDashboard.vue b/VueApp/src/Effort/pages/StaffDashboard.vue
index ccadfccd..765f1396 100644
--- a/VueApp/src/Effort/pages/StaffDashboard.vue
+++ b/VueApp/src/Effort/pages/StaffDashboard.vue
@@ -797,6 +797,7 @@
                                         <q-icon
                                             name="schedule"
                                             color="info"
+                                            text-color="dark"
                                         />
                                     </q-item-section>
                                     <q-item-section>
diff --git a/VueApp/src/Effort/pages/TermManagement.vue b/VueApp/src/Effort/pages/TermManagement.vue
index 39470b5c..1d7d6677 100644
--- a/VueApp/src/Effort/pages/TermManagement.vue
+++ b/VueApp/src/Effort/pages/TermManagement.vue
@@ -31,8 +31,8 @@
                 <q-btn
                     icon="event_repeat"
                     label="Percent Rollover"
-                    color="cyan-8"
-                    :text-color="showRolloverForm ? undefined : 'white'"
+                    color="info"
+                    :text-color="showRolloverForm ? undefined : 'dark'"
                     dense
                     no-caps
                     :outline="showRolloverForm"
@@ -86,8 +86,8 @@
                         <q-btn
                             icon="event_repeat"
                             label="Preview Rollover"
-                            color="cyan-8"
-                            text-color="white"
+                            color="info"
+                            text-color="dark"
                             dense
                             no-caps
                             :disable="!rolloverYear || rolloverYear < 2020 || rolloverYear > currentYear"
@@ -194,7 +194,7 @@
                                     icon="cloud_download"
                                     :label="props.row.harvestedDate ? 'Re-Harvest' : 'Harvest'"
                                     color="info"
-                                    text-color="white"
+                                    text-color="dark"
                                     dense
                                     no-caps
                                     size="sm"
@@ -212,8 +212,8 @@
                                     v-if="props.row.canImportClinical"
                                     icon="medical_services"
                                     label="Import Clinical"
-                                    color="teal-8"
-                                    text-color="white"
+                                    color="info"
+                                    text-color="dark"
                                     dense
                                     no-caps
                                     size="sm"
@@ -450,7 +450,7 @@
                                 icon="cloud_download"
                                 :label="term.harvestedDate ? 'Re-Harvest' : 'Harvest'"
                                 color="info"
-                                text-color="white"
+                                text-color="dark"
                                 dense
                                 no-caps
                                 size="sm"
@@ -464,8 +464,8 @@
                                 v-if="term.canImportClinical"
                                 icon="medical_services"
                                 label="Import Clinical"
-                                color="teal-8"
-                                text-color="white"
+                                color="info"
+                                text-color="dark"
                                 dense
                                 no-caps
                                 size="sm"

From f34b005fc7ad0d5e6bd6c4f25fc109343edf72b2 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Thu, 2 Apr 2026 15:33:50 -0700
Subject: [PATCH 04/11] fix: address Copilot review feedback on Effort PR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove invalid text-color="dark" prop from q-icon elements (7 files)
- Fix prefers-reduced-motion CSS ordering in MyEffort.vue — media query
  now follows base rule so transition:none takes effect
---
 .../components/ClinicalImportDialog.vue       |  5 -----
 .../components/EffortRecordAddDialog.vue      |  1 -
 .../components/EffortRecordEditDialog.vue     |  1 -
 .../src/Effort/components/HarvestDialog.vue   |  1 -
 .../components/PercentRolloverDialog.vue      |  5 -----
 VueApp/src/Effort/pages/InstructorList.vue    |  4 ----
 VueApp/src/Effort/pages/MyEffort.vue          | 21 ++++++-------------
 VueApp/src/Effort/pages/StaffDashboard.vue    |  1 -
 8 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/VueApp/src/Effort/components/ClinicalImportDialog.vue b/VueApp/src/Effort/components/ClinicalImportDialog.vue
index 5fd23476..fa5feb03 100644
--- a/VueApp/src/Effort/components/ClinicalImportDialog.vue
+++ b/VueApp/src/Effort/components/ClinicalImportDialog.vue
@@ -43,7 +43,6 @@
                     :value="importProgress"
                     size="25px"
                     color="info"
-                    text-color="dark"
                     class="q-mb-md"
                 >
                     <div class="absolute-full flex flex-center">
@@ -92,7 +91,6 @@
                             v-model="selectedMode"
                             :options="modeOptions"
                             color="info"
-                            text-color="dark"
                             :inline="$q.screen.gt.xs"
                             @update:model-value="onModeChange"
                         />
@@ -141,7 +139,6 @@
                             <q-icon
                                 name="warning"
                                 color="warning"
-                                text-color="dark"
                                 size="sm"
                                 class="q-mr-sm"
                             />
@@ -219,7 +216,6 @@
                             <q-icon
                                 name="info"
                                 color="warning"
-                                text-color="dark"
                                 size="sm"
                                 class="q-mr-sm"
                             />
@@ -253,7 +249,6 @@
                     <q-btn
                         label="Confirm Import"
                         color="info"
-                        text-color="dark"
                         :disable="totalChanges === 0 || isCommitting"
                         @click="confirmImport"
                     />
diff --git a/VueApp/src/Effort/components/EffortRecordAddDialog.vue b/VueApp/src/Effort/components/EffortRecordAddDialog.vue
index 62bb37e9..e2071ad2 100644
--- a/VueApp/src/Effort/components/EffortRecordAddDialog.vue
+++ b/VueApp/src/Effort/components/EffortRecordAddDialog.vue
@@ -34,7 +34,6 @@
                             <q-icon
                                 name="info"
                                 color="warning"
-                                text-color="dark"
                             />
                         </template>
                         <span class="text-orange-9">
diff --git a/VueApp/src/Effort/components/EffortRecordEditDialog.vue b/VueApp/src/Effort/components/EffortRecordEditDialog.vue
index 4382f006..71079129 100644
--- a/VueApp/src/Effort/components/EffortRecordEditDialog.vue
+++ b/VueApp/src/Effort/components/EffortRecordEditDialog.vue
@@ -34,7 +34,6 @@
                             <q-icon
                                 name="info"
                                 color="warning"
-                                text-color="dark"
                             />
                         </template>
                         <span class="text-orange-9">
diff --git a/VueApp/src/Effort/components/HarvestDialog.vue b/VueApp/src/Effort/components/HarvestDialog.vue
index c24c71fe..fa632da9 100644
--- a/VueApp/src/Effort/components/HarvestDialog.vue
+++ b/VueApp/src/Effort/components/HarvestDialog.vue
@@ -117,7 +117,6 @@
                             <q-icon
                                 name="warning"
                                 color="warning"
-                                text-color="dark"
                                 size="sm"
                                 class="q-mr-sm"
                             />
diff --git a/VueApp/src/Effort/components/PercentRolloverDialog.vue b/VueApp/src/Effort/components/PercentRolloverDialog.vue
index 97e3fe32..7f5d1f58 100644
--- a/VueApp/src/Effort/components/PercentRolloverDialog.vue
+++ b/VueApp/src/Effort/components/PercentRolloverDialog.vue
@@ -34,7 +34,6 @@
                         <q-icon
                             name="warning"
                             color="warning"
-                            text-color="dark"
                         />
                     </template>
                     <div class="text-weight-medium text-orange-9">Unusual Timing</div>
@@ -149,7 +148,6 @@
                             <q-icon
                                 name="warning"
                                 color="warning"
-                                text-color="dark"
                             />
                         </template>
                         <div class="text-weight-medium">No assignments to roll forward</div>
@@ -170,7 +168,6 @@
                                 <q-icon
                                     name="event_repeat"
                                     color="info"
-                                    text-color="dark"
                                     size="24px"
                                     class="q-mr-sm"
                                 />
@@ -228,7 +225,6 @@
                                 <q-icon
                                     name="block"
                                     color="warning"
-                                    text-color="dark"
                                     size="24px"
                                     class="q-mr-sm"
                                 />
@@ -252,7 +248,6 @@
                                     <q-icon
                                         name="info"
                                         color="warning"
-                                        text-color="dark"
                                     />
                                 </template>
                                 These assignments will not be rolled forward because someone manually edited or deleted
diff --git a/VueApp/src/Effort/pages/InstructorList.vue b/VueApp/src/Effort/pages/InstructorList.vue
index a8bb7149..468c93e6 100644
--- a/VueApp/src/Effort/pages/InstructorList.vue
+++ b/VueApp/src/Effort/pages/InstructorList.vue
@@ -149,7 +149,6 @@
                                     v-else-if="instructor.isVerified && instructor.recordCount === 0"
                                     name="check"
                                     color="info"
-                                    text-color="dark"
                                     size="sm"
                                     class="q-mr-sm"
                                 >
@@ -172,7 +171,6 @@
                                     <q-badge
                                         v-if="instructor.recordCount === 0"
                                         color="warning"
-                                        text-color="dark"
                                     >
                                         No Effort
                                     </q-badge>
@@ -436,7 +434,6 @@
                                 v-else-if="props.row.isVerified && props.row.recordCount === 0"
                                 name="check"
                                 color="info"
-                                text-color="dark"
                                 size="xs"
                             >
                                 <q-tooltip>Verified no effort</q-tooltip>
@@ -461,7 +458,6 @@
                                 <q-badge
                                     v-if="props.row.recordCount === 0"
                                     color="warning"
-                                    text-color="dark"
                                     class="no-effort-badge"
                                 >
                                     No Effort
diff --git a/VueApp/src/Effort/pages/MyEffort.vue b/VueApp/src/Effort/pages/MyEffort.vue
index 2c62a74c..586c733e 100644
--- a/VueApp/src/Effort/pages/MyEffort.vue
+++ b/VueApp/src/Effort/pages/MyEffort.vue
@@ -411,21 +411,6 @@ onMounted(loadData)
     align-items: center;
 }
 
-@media screen and (prefers-reduced-motion: reduce) {
-    .help-link {
-        margin-left: 8px;
-        display: inline-flex;
-        align-items: center;
-        text-decoration: none;
-        font-size: 0.9rem;
-        font-weight: normal;
-        gap: 4px;
-        padding: 6px 12px;
-        border-radius: 4px;
-        transition: none;
-    }
-}
-
 .help-link {
     margin-left: 8px;
     display: inline-flex;
@@ -443,4 +428,10 @@ onMounted(loadData)
 .help-link:focus {
     background-color: rgb(0 95 153 / 10%);
 }
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .help-link {
+        transition: none;
+    }
+}
 </style>
diff --git a/VueApp/src/Effort/pages/StaffDashboard.vue b/VueApp/src/Effort/pages/StaffDashboard.vue
index 765f1396..ccadfccd 100644
--- a/VueApp/src/Effort/pages/StaffDashboard.vue
+++ b/VueApp/src/Effort/pages/StaffDashboard.vue
@@ -797,7 +797,6 @@
                                         <q-icon
                                             name="schedule"
                                             color="info"
-                                            text-color="dark"
                                         />
                                     </q-item-section>
                                     <q-item-section>

From 97391258590be4216a762347c8592fc9dfade3dd Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Thu, 2 Apr 2026 15:36:47 -0700
Subject: [PATCH 05/11] fix: update useRouteFocus fallback to target
 #main-content

- Change fallback from #app (doesn't exist) to #main-content (the id
  we added to all <main> elements in the layout fixes)
---
 VueApp/src/composables/use-route-focus.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/VueApp/src/composables/use-route-focus.ts b/VueApp/src/composables/use-route-focus.ts
index 50c27039..be0f20f9 100644
--- a/VueApp/src/composables/use-route-focus.ts
+++ b/VueApp/src/composables/use-route-focus.ts
@@ -9,7 +9,7 @@ import { nextTick } from "vue"
 export function useRouteFocus(router: Router) {
     router.afterEach(() => {
         nextTick(() => {
-            const main = document.querySelector("main") || document.querySelector("#app")
+            const main = document.querySelector("#main-content") || document.querySelector("main")
             if (main instanceof HTMLElement) {
                 // Set tabindex temporarily so the element can receive focus
                 // without permanently joining the tab order

From c9a25b31f69be690f46b3a622c9f6a30386499db Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Tue, 7 Apr 2026 11:49:34 -0700
Subject: [PATCH 06/11] =?UTF-8?q?VPR-104=20fix(a11y):=20Effort=20followup?=
 =?UTF-8?q?=20=E2=80=94=20contrast,=20help=20link,=20dirty=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Keep text-color="dark" on Percent Rollover button in both states
  to fix WCAG AA contrast failure in outline/toggled mode
- Add open_in_new icon, sr-only text, and noreferrer to Effort Help
  link in EffortLeftNav (external non-UC Davis site)
- Fix false dirty state in EffortRecordAddDialog: move setInitialState
  to after loadOptions completes so async defaults don't trigger the
  unsaved changes prompt
---
 VueApp/src/Effort/components/EffortLeftNav.vue         | 9 ++++++++-
 VueApp/src/Effort/components/EffortRecordAddDialog.vue | 3 ++-
 VueApp/src/Effort/pages/TermManagement.vue             | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/VueApp/src/Effort/components/EffortLeftNav.vue b/VueApp/src/Effort/components/EffortLeftNav.vue
index 1cf2b97e..08e04a90 100644
--- a/VueApp/src/Effort/components/EffortLeftNav.vue
+++ b/VueApp/src/Effort/components/EffortLeftNav.vue
@@ -204,7 +204,7 @@
                     v-ripple
                     href="https://ucdsvm.knowledgeowl.com/help/effort-system-overview"
                     target="_blank"
-                    rel="noopener"
+                    rel="noopener noreferrer"
                     class="leftNavLink"
                 >
                     <q-item-section>
@@ -217,6 +217,13 @@
                                 size="xs"
                             />
                             <span>Help</span>
+                            <q-icon
+                                name="open_in_new"
+                                size="xs"
+                                class="q-ml-xs"
+                                aria-hidden="true"
+                            />
+                            <span class="sr-only">(opens in new window)</span>
                         </q-item-label>
                     </q-item-section>
                 </q-item>
diff --git a/VueApp/src/Effort/components/EffortRecordAddDialog.vue b/VueApp/src/Effort/components/EffortRecordAddDialog.vue
index e2071ad2..5f4a1607 100644
--- a/VueApp/src/Effort/components/EffortRecordAddDialog.vue
+++ b/VueApp/src/Effort/components/EffortRecordAddDialog.vue
@@ -463,6 +463,8 @@ watch(
         if (isOpen) {
             resetForm()
             await loadOptions()
+            syncFormData()
+            setInitialState()
         }
     },
 )
@@ -489,7 +491,6 @@ function resetForm() {
     errorMessage.value = ""
     warningMessage.value = ""
     syncFormData()
-    setInitialState()
     formRef.value?.resetValidation()
 }
 
diff --git a/VueApp/src/Effort/pages/TermManagement.vue b/VueApp/src/Effort/pages/TermManagement.vue
index 1d7d6677..5ecab99b 100644
--- a/VueApp/src/Effort/pages/TermManagement.vue
+++ b/VueApp/src/Effort/pages/TermManagement.vue
@@ -32,7 +32,7 @@
                     icon="event_repeat"
                     label="Percent Rollover"
                     color="info"
-                    :text-color="showRolloverForm ? undefined : 'dark'"
+                    text-color="dark"
                     dense
                     no-caps
                     :outline="showRolloverForm"

From c9d2ed2f4811c872bb6f639b897d687f1b598ebf Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Tue, 7 Apr 2026 21:57:49 -0700
Subject: [PATCH 07/11] =?UTF-8?q?VPR-104=20fix(a11y):=20Effort=20axe=20fix?=
 =?UTF-8?q?es=20=E2=80=94=20aria-labels,=20contrast,=20badge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add aria-label to 4 progress bars in StaffDashboard (WCAG 1.1.1)
- Change dept-count text-grey-6 to text-grey-8 for contrast (WCAG 1.4.3)
- Add text-color="dark" to "No Effort" badge in InstructorList (1.58:1)
- Add aria-labels to 6 icon-only buttons in TermManagement (WCAG 4.1.2)
---
 VueApp/src/Effort/pages/InstructorList.vue |  1 +
 VueApp/src/Effort/pages/StaffDashboard.vue | 10 +++++++---
 VueApp/src/Effort/pages/TermManagement.vue |  6 ++++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/VueApp/src/Effort/pages/InstructorList.vue b/VueApp/src/Effort/pages/InstructorList.vue
index 468c93e6..744990fb 100644
--- a/VueApp/src/Effort/pages/InstructorList.vue
+++ b/VueApp/src/Effort/pages/InstructorList.vue
@@ -458,6 +458,7 @@
                                 <q-badge
                                     v-if="props.row.recordCount === 0"
                                     color="warning"
+                                    text-color="dark"
                                     class="no-effort-badge"
                                 >
                                     No Effort
diff --git a/VueApp/src/Effort/pages/StaffDashboard.vue b/VueApp/src/Effort/pages/StaffDashboard.vue
index ccadfccd..ed02423d 100644
--- a/VueApp/src/Effort/pages/StaffDashboard.vue
+++ b/VueApp/src/Effort/pages/StaffDashboard.vue
@@ -30,6 +30,7 @@
                                 size="12px"
                                 class="q-mb-sm"
                                 rounded
+                                aria-label="Overall verification progress"
                             />
                             <div class="text-caption text-grey-7">
                                 {{ stats.verifiedInstructors }} of {{ stats.totalInstructors }} instructors verified
@@ -287,8 +288,9 @@
                                                     size="8px"
                                                     class="dept-bar"
                                                     rounded
+                                                    :aria-label="dept.departmentName + ' verification progress'"
                                                 />
-                                                <span class="dept-count text-caption text-grey-6">
+                                                <span class="dept-count text-caption text-grey-8">
                                                     ({{ dept.verifiedInstructors }}/{{ dept.totalInstructors }})
                                                 </span>
                                             </div>
@@ -335,8 +337,9 @@
                                                     size="8px"
                                                     class="dept-bar"
                                                     rounded
+                                                    :aria-label="dept.departmentName + ' verification progress'"
                                                 />
-                                                <span class="dept-count text-caption text-grey-6">
+                                                <span class="dept-count text-caption text-grey-8">
                                                     ({{ dept.verifiedInstructors }}/{{ dept.totalInstructors }})
                                                 </span>
                                             </div>
@@ -377,8 +380,9 @@
                                                 size="8px"
                                                 class="dept-bar"
                                                 rounded
+                                                :aria-label="dept.departmentName + ' verification progress'"
                                             />
-                                            <span class="dept-count text-caption text-grey-6">
+                                            <span class="dept-count text-caption text-grey-8">
                                                 ({{ dept.verifiedInstructors }}/{{ dept.totalInstructors }})
                                             </span>
                                         </div>
diff --git a/VueApp/src/Effort/pages/TermManagement.vue b/VueApp/src/Effort/pages/TermManagement.vue
index 5ecab99b..326cc969 100644
--- a/VueApp/src/Effort/pages/TermManagement.vue
+++ b/VueApp/src/Effort/pages/TermManagement.vue
@@ -175,6 +175,7 @@
                                 round
                                 size="sm"
                                 class="q-ml-sm"
+                                aria-label="Delete term"
                                 @click="confirmDeleteTerm(props.row)"
                                 @keyup.enter="confirmDeleteTerm(props.row)"
                                 @keyup.space="confirmDeleteTerm(props.row)"
@@ -331,6 +332,7 @@
                                     round
                                     size="sm"
                                     class="q-ml-xs"
+                                    aria-label="Save expected close date"
                                     @click="saveExpectedCloseDate(props.row)"
                                 >
                                     <q-tooltip>Save</q-tooltip>
@@ -342,6 +344,7 @@
                                     flat
                                     round
                                     size="sm"
+                                    aria-label="Cancel editing"
                                     @click="cancelEditExpectedCloseDate"
                                 >
                                     <q-tooltip>Cancel</q-tooltip>
@@ -357,6 +360,7 @@
                                     round
                                     size="sm"
                                     color="grey-7"
+                                    aria-label="Edit expected close date"
                                     @click="startEditExpectedCloseDate(props.row)"
                                     @keyup.enter="startEditExpectedCloseDate(props.row)"
                                     @keyup.space="startEditExpectedCloseDate(props.row)"
@@ -428,6 +432,7 @@
                                 flat
                                 round
                                 size="sm"
+                                aria-label="Save expected close date"
                                 @click="saveExpectedCloseDate(term)"
                             >
                                 <q-tooltip>Save</q-tooltip>
@@ -439,6 +444,7 @@
                                 flat
                                 round
                                 size="sm"
+                                aria-label="Cancel editing"
                                 @click="cancelEditExpectedCloseDate"
                             >
                                 <q-tooltip>Cancel</q-tooltip>

From c18d518ee9d46f2bf673c54772a16af2bd537ad0 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Tue, 7 Apr 2026 22:05:00 -0700
Subject: [PATCH 08/11] VPR-104 fix(a11y): migrate 38 Effort q-banners to
 StatusBanner

Replace all raw q-banner usage across 17 Effort files with the shared
StatusBanner component for consistent styling, role attributes, and
aria-hidden decorative icons. Maps warning/error/info/success types
and preserves custom icons, action slots, and complex content.
---
 .../components/AddCourseEffortDialog.vue      | 29 +++------
 .../components/ClinicalImportDialog.vue       | 61 +++++--------------
 .../components/EditEvaluationDialog.vue       | 15 ++---
 .../components/EffortRecordAddDialog.vue      | 46 ++++----------
 .../components/EffortRecordEditDialog.vue     | 46 ++++----------
 .../components/EvaluationStatusMatrix.vue     | 15 ++---
 .../src/Effort/components/HarvestDialog.vue   | 48 ++++-----------
 .../Effort/components/InstructorAddDialog.vue | 14 ++---
 .../InstructorPercentEditDialog.vue           | 28 +++------
 .../components/PercentAssignmentAddDialog.vue | 27 +++-----
 .../PercentAssignmentEditDialog.vue           | 27 +++-----
 .../components/PercentRolloverDialog.vue      | 56 ++++-------------
 .../Effort/components/ZeroEffortBanner.vue    | 15 ++---
 VueApp/src/Effort/pages/CourseDetail.vue      | 14 ++---
 VueApp/src/Effort/pages/InstructorDetail.vue  |  7 ++-
 VueApp/src/Effort/pages/InstructorEdit.vue    | 34 ++++-------
 VueApp/src/Effort/pages/MultiYearReport.vue   | 27 ++------
 17 files changed, 139 insertions(+), 370 deletions(-)

diff --git a/VueApp/src/Effort/components/AddCourseEffortDialog.vue b/VueApp/src/Effort/components/AddCourseEffortDialog.vue
index 22008c08..a7dcdc9d 100644
--- a/VueApp/src/Effort/components/AddCourseEffortDialog.vue
+++ b/VueApp/src/Effort/components/AddCourseEffortDialog.vue
@@ -122,36 +122,20 @@
                     />
 
                     <!-- Warning Message -->
-                    <q-banner
+                    <StatusBanner
                         v-if="warningMessage"
-                        class="bg-warning"
-                        rounded
-                        role="alert"
+                        type="warning"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="warning"
-                                color="dark"
-                            />
-                        </template>
                         {{ warningMessage }}
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Error Message -->
-                    <q-banner
+                    <StatusBanner
                         v-if="errorMessage"
-                        class="bg-negative text-white"
-                        rounded
-                        role="alert"
+                        type="error"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="error"
-                                color="white"
-                            />
-                        </template>
                         {{ errorMessage }}
-                    </q-banner>
+                    </StatusBanner>
                 </q-form>
             </q-card-section>
 
@@ -187,6 +171,7 @@ import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
 import { courseService } from "../services/course-service"
 import { recordService } from "../services/record-service"
 import type { CourseInstructorOptionDto, EffortTypeOptionDto, RoleOptionDto } from "../types"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { filterEffortTypesByCourse } from "../utils/effort-type-filters"
 import { effortValueRules, requiredRule, notesMaxHint } from "../validation"
 import "../effort-dialogs.css"
diff --git a/VueApp/src/Effort/components/ClinicalImportDialog.vue b/VueApp/src/Effort/components/ClinicalImportDialog.vue
index fa5feb03..650dad07 100644
--- a/VueApp/src/Effort/components/ClinicalImportDialog.vue
+++ b/VueApp/src/Effort/components/ClinicalImportDialog.vue
@@ -97,10 +97,7 @@
                     </div>
 
                     <!-- Summary Banner -->
-                    <q-banner
-                        class="bg-blue-1 q-mb-md"
-                        rounded
-                    >
+                    <StatusBanner type="info">
                         <div class="row q-col-gutter-md">
                             <div class="col-6 col-sm-3 text-center">
                                 <div class="text-h5 text-positive">{{ preview.addCount }}</div>
@@ -127,21 +124,14 @@
                         <div class="text-caption text-grey-7 q-mt-sm text-center">
                             Data as of {{ formatPreviewDateTime(preview.previewGeneratedAt) }}
                         </div>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Warnings Section -->
-                    <q-banner
+                    <StatusBanner
                         v-if="preview.warnings.length > 0"
-                        class="bg-orange-1 q-mb-md"
-                        rounded
+                        type="warning"
                     >
                         <div class="row items-center q-mb-xs">
-                            <q-icon
-                                name="warning"
-                                color="warning"
-                                size="sm"
-                                class="q-mr-sm"
-                            />
                             <span class="text-weight-medium">
                                 {{ preview.warnings.length }} {{ inflect("Warning", preview.warnings.length) }}
                             </span>
@@ -154,21 +144,15 @@
                                 {{ warning }}
                             </li>
                         </ul>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Delete Warning for Sync Mode with Empty Source -->
-                    <q-banner
+                    <StatusBanner
                         v-if="selectedMode === 'Sync' && preview.addCount === 0 && preview.deleteCount > 0"
-                        class="bg-red-1 q-mb-md"
-                        rounded
+                        type="error"
+                        icon="dangerous"
                     >
                         <div class="row items-center q-mb-xs">
-                            <q-icon
-                                name="dangerous"
-                                color="negative"
-                                size="sm"
-                                class="q-mr-sm"
-                            />
                             <span class="text-weight-medium text-negative"
                                 >Sync will delete ALL clinical effort records</span
                             >
@@ -177,21 +161,14 @@
                             The source returned 0 records. Syncing will delete all {{ preview.deleteCount }} existing
                             clinical effort records for this term.
                         </div>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Delete Warning Banner -->
-                    <q-banner
+                    <StatusBanner
                         v-else-if="preview.deleteCount > 0"
-                        class="bg-red-1 q-mb-md"
-                        rounded
+                        type="error"
                     >
                         <div class="row items-center q-mb-xs">
-                            <q-icon
-                                name="warning"
-                                color="negative"
-                                size="sm"
-                                class="q-mr-sm"
-                            />
                             <span class="text-weight-medium text-negative">
                                 {{ preview.deleteCount }} {{ inflect("record", preview.deleteCount) }} will be deleted
                             </span>
@@ -204,27 +181,20 @@
                                 Sync mode will remove clinical records that no longer exist in the source.
                             </template>
                         </div>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Nothing to Import Warning -->
-                    <q-banner
+                    <StatusBanner
                         v-if="totalChanges === 0"
-                        class="bg-orange-1 q-mb-md"
-                        rounded
+                        type="warning"
                     >
                         <div class="row items-center q-mb-xs">
-                            <q-icon
-                                name="info"
-                                color="warning"
-                                size="sm"
-                                class="q-mr-sm"
-                            />
                             <span class="text-weight-medium">Nothing to import</span>
                         </div>
                         <div class="text-caption text-grey-7">
                             There are no changes to make with the selected import mode.
                         </div>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Preview Table -->
                     <ClinicalEffortPreviewTable
@@ -264,6 +234,7 @@ import { useQuasar } from "quasar"
 import { clinicalService } from "../services/clinical-service"
 import type { ClinicalImportPreviewDto, ClinicalImportMode } from "../types"
 import { inflect } from "inflection"
+import StatusBanner from "@/components/StatusBanner.vue"
 import ClinicalEffortPreviewTable from "./ClinicalEffortPreviewTable.vue"
 
 const props = defineProps<{
diff --git a/VueApp/src/Effort/components/EditEvaluationDialog.vue b/VueApp/src/Effort/components/EditEvaluationDialog.vue
index f3c0048c..f888cb8d 100644
--- a/VueApp/src/Effort/components/EditEvaluationDialog.vue
+++ b/VueApp/src/Effort/components/EditEvaluationDialog.vue
@@ -129,20 +129,12 @@
                     </div>
 
                     <!-- Error Message -->
-                    <q-banner
+                    <StatusBanner
                         v-if="errorMessage"
-                        class="bg-negative text-white q-mt-sm"
-                        rounded
-                        role="alert"
+                        type="error"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="error"
-                                color="white"
-                            />
-                        </template>
                         {{ errorMessage }}
-                    </q-banner>
+                    </StatusBanner>
                 </q-form>
             </q-card-section>
 
@@ -177,6 +169,7 @@
 import { ref, computed, watch } from "vue"
 import { QForm } from "quasar"
 import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { courseService } from "../services/course-service"
 import type { CourseEvalEntryDto } from "../types"
 import "../effort-dialogs.css"
diff --git a/VueApp/src/Effort/components/EffortRecordAddDialog.vue b/VueApp/src/Effort/components/EffortRecordAddDialog.vue
index 5f4a1607..903347ae 100644
--- a/VueApp/src/Effort/components/EffortRecordAddDialog.vue
+++ b/VueApp/src/Effort/components/EffortRecordAddDialog.vue
@@ -25,22 +25,13 @@
                     greedy
                 >
                     <!-- Verification Warning -->
-                    <q-banner
+                    <StatusBanner
                         v-if="props.isVerified"
-                        class="bg-orange-2"
-                        rounded
+                        type="warning"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="info"
-                                color="warning"
-                            />
-                        </template>
-                        <span class="text-orange-9">
-                            This instructor's effort has been verified. Adding a new record will clear the verification
-                            status and require re-verification.
-                        </span>
-                    </q-banner>
+                        This instructor's effort has been verified. Adding a new record will clear the verification
+                        status and require re-verification.
+                    </StatusBanner>
 
                     <!-- Course Selection -->
                     <q-select
@@ -169,34 +160,20 @@
                     />
 
                     <!-- Warning Message -->
-                    <q-banner
+                    <StatusBanner
                         v-if="warningMessage"
-                        class="bg-warning"
-                        rounded
+                        type="warning"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="warning"
-                                color="dark"
-                            />
-                        </template>
                         {{ warningMessage }}
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Error Message -->
-                    <q-banner
+                    <StatusBanner
                         v-if="errorMessage"
-                        class="bg-negative text-white"
-                        rounded
+                        type="error"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="error"
-                                color="white"
-                            />
-                        </template>
                         {{ errorMessage }}
-                    </q-banner>
+                    </StatusBanner>
                 </q-form>
             </q-card-section>
 
@@ -229,6 +206,7 @@
 import { ref, computed, watch } from "vue"
 import { QForm } from "quasar"
 import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { recordService } from "../services/record-service"
 import type { CourseOptionDto, EffortTypeOptionDto, RoleOptionDto, InstructorEffortRecordDto } from "../types"
 import { filterEffortTypesByCourse } from "../utils/effort-type-filters"
diff --git a/VueApp/src/Effort/components/EffortRecordEditDialog.vue b/VueApp/src/Effort/components/EffortRecordEditDialog.vue
index 71079129..8d51611b 100644
--- a/VueApp/src/Effort/components/EffortRecordEditDialog.vue
+++ b/VueApp/src/Effort/components/EffortRecordEditDialog.vue
@@ -25,22 +25,13 @@
                     greedy
                 >
                     <!-- Verification Warning -->
-                    <q-banner
+                    <StatusBanner
                         v-if="props.isVerified"
-                        class="bg-orange-2"
-                        rounded
+                        type="warning"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="info"
-                                color="warning"
-                            />
-                        </template>
-                        <span class="text-orange-9">
-                            This instructor's effort has been verified. Editing this record will clear the verification
-                            status and require re-verification.
-                        </span>
-                    </q-banner>
+                        This instructor's effort has been verified. Editing this record will clear the verification
+                        status and require re-verification.
+                    </StatusBanner>
 
                     <!-- Course (read-only) -->
                     <q-input
@@ -113,34 +104,20 @@
                     />
 
                     <!-- Warning Message -->
-                    <q-banner
+                    <StatusBanner
                         v-if="warningMessage"
-                        class="bg-warning"
-                        rounded
+                        type="warning"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="warning"
-                                color="dark"
-                            />
-                        </template>
                         {{ warningMessage }}
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Error Message -->
-                    <q-banner
+                    <StatusBanner
                         v-if="errorMessage"
-                        class="bg-negative text-white"
-                        rounded
+                        type="error"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="error"
-                                color="white"
-                            />
-                        </template>
                         {{ errorMessage }}
-                    </q-banner>
+                    </StatusBanner>
                 </q-form>
             </q-card-section>
 
@@ -173,6 +150,7 @@
 import { ref, computed, watch } from "vue"
 import { QForm } from "quasar"
 import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { recordService } from "../services/record-service"
 import type { EffortTypeOptionDto, RoleOptionDto, InstructorEffortRecordDto } from "../types"
 import { effortValueRules, requiredRule, notesMaxHint } from "../validation"
diff --git a/VueApp/src/Effort/components/EvaluationStatusMatrix.vue b/VueApp/src/Effort/components/EvaluationStatusMatrix.vue
index b82dca81..60465a72 100644
--- a/VueApp/src/Effort/components/EvaluationStatusMatrix.vue
+++ b/VueApp/src/Effort/components/EvaluationStatusMatrix.vue
@@ -10,20 +10,12 @@
         </div>
 
         <!-- Error state -->
-        <q-banner
+        <StatusBanner
             v-else-if="loadError"
-            class="bg-negative text-white q-mb-md"
-            rounded
-            role="alert"
+            type="error"
         >
-            <template #avatar>
-                <q-icon
-                    name="error"
-                    color="white"
-                />
-            </template>
             {{ loadError }}
-        </q-banner>
+        </StatusBanner>
 
         <!-- Matrix content -->
         <template v-else-if="evaluationData.instructors.length > 0">
@@ -138,6 +130,7 @@
 <script setup lang="ts">
 import { computed } from "vue"
 import type { QTableColumn } from "quasar"
+import StatusBanner from "@/components/StatusBanner.vue"
 import type { CourseEvaluationStatusDto, InstructorEvalStatusDto, CourseEvalEntryDto } from "../types"
 import { useEffortPermissions } from "../composables/use-effort-permissions"
 import EvalStatusCell from "./EvalStatusCell.vue"
diff --git a/VueApp/src/Effort/components/HarvestDialog.vue b/VueApp/src/Effort/components/HarvestDialog.vue
index fa632da9..a4697832 100644
--- a/VueApp/src/Effort/components/HarvestDialog.vue
+++ b/VueApp/src/Effort/components/HarvestDialog.vue
@@ -87,10 +87,7 @@
             <template v-else-if="preview">
                 <q-card-section class="q-pt-sm">
                     <!-- Summary Banner -->
-                    <q-banner
-                        class="bg-blue-1 q-mb-md"
-                        rounded
-                    >
+                    <StatusBanner type="info">
                         <div class="row q-col-gutter-md">
                             <div class="col-6 col-sm-4 text-center">
                                 <div class="text-h5">{{ preview.summary.totalInstructors }}</div>
@@ -105,21 +102,14 @@
                                 <div class="text-caption">Effort Records</div>
                             </div>
                         </div>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Warnings -->
-                    <q-banner
+                    <StatusBanner
                         v-if="preview.warnings.length > 0"
-                        class="bg-orange-1 q-mb-md"
-                        rounded
+                        type="warning"
                     >
                         <div class="row items-center q-mb-xs">
-                            <q-icon
-                                name="warning"
-                                color="warning"
-                                size="sm"
-                                class="q-mr-sm"
-                            />
                             <span class="text-weight-medium">
                                 {{ preview.warnings.length }} {{ inflect("Warning", preview.warnings.length) }}
                             </span>
@@ -144,21 +134,14 @@
                         >
                             ...and {{ preview.warnings.length - 5 }} more
                         </div>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Errors -->
-                    <q-banner
+                    <StatusBanner
                         v-if="preview.errors.length > 0"
-                        class="bg-red-1 q-mb-md"
-                        rounded
+                        type="error"
                     >
                         <div class="row items-center q-mb-xs">
-                            <q-icon
-                                name="error"
-                                color="negative"
-                                size="sm"
-                                class="q-mr-sm"
-                            />
                             <span class="text-weight-medium text-negative">
                                 {{ preview.errors.length }} {{ inflect("Error", preview.errors.length) }} - Harvest may
                                 fail
@@ -172,21 +155,15 @@
                                 {{ error.phase }}: {{ error.message }}
                             </li>
                         </ul>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Removed Items Warning -->
-                    <q-banner
+                    <StatusBanner
                         v-if="hasRemovedItems"
-                        class="bg-purple-1 q-mb-md"
-                        rounded
+                        type="warning"
+                        icon="person_remove"
                     >
                         <div class="row items-center q-mb-xs">
-                            <q-icon
-                                name="person_remove"
-                                color="purple"
-                                size="sm"
-                                class="q-mr-sm"
-                            />
                             <span class="text-weight-medium">Items that will be removed</span>
                         </div>
                         <div class="text-caption text-grey-7">
@@ -223,7 +200,7 @@
                                 }}{{ preview.removedCourses.length > 3 ? "..." : "" }})
                             </span>
                         </div>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Tabs -->
                     <q-tabs
@@ -621,6 +598,7 @@ import { useQuasar } from "quasar"
 import { harvestService } from "../services/harvest-service"
 import type { HarvestPreviewDto } from "../types"
 import type { QTableColumn } from "quasar"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { inflect } from "inflection"
 import ClinicalEffortPreviewTable from "./ClinicalEffortPreviewTable.vue"
 
diff --git a/VueApp/src/Effort/components/InstructorAddDialog.vue b/VueApp/src/Effort/components/InstructorAddDialog.vue
index 0e83100c..20f66db7 100644
--- a/VueApp/src/Effort/components/InstructorAddDialog.vue
+++ b/VueApp/src/Effort/components/InstructorAddDialog.vue
@@ -97,19 +97,12 @@
                     </div>
                 </div>
 
-                <q-banner
+                <StatusBanner
                     v-if="errorMessage"
-                    class="bg-negative text-white q-mb-md"
-                    rounded
+                    type="error"
                 >
-                    <template #avatar>
-                        <q-icon
-                            name="error"
-                            color="white"
-                        />
-                    </template>
                     {{ errorMessage }}
-                </q-banner>
+                </StatusBanner>
             </q-card-section>
 
             <q-card-actions align="right">
@@ -141,6 +134,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue"
 import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { instructorService } from "../services/instructor-service"
 import type { AaudPersonDto } from "../types"
 
diff --git a/VueApp/src/Effort/components/InstructorPercentEditDialog.vue b/VueApp/src/Effort/components/InstructorPercentEditDialog.vue
index 7fd7a92f..bb4ff83e 100644
--- a/VueApp/src/Effort/components/InstructorPercentEditDialog.vue
+++ b/VueApp/src/Effort/components/InstructorPercentEditDialog.vue
@@ -79,13 +79,12 @@
                             @filter="filterTitleCodes"
                         >
                             <template #before-options>
-                                <q-banner
+                                <StatusBanner
                                     v-if="isOrphanedTitleCode"
-                                    class="bg-warning text-white q-mb-sm"
-                                    dense
+                                    type="warning"
                                 >
                                     Current value "{{ form.effortTitleCode }}" is not in the standard list
-                                </q-banner>
+                                </StatusBanner>
                             </template>
                             <template #no-option>
                                 <q-item>
@@ -108,13 +107,12 @@
                             clearable
                         >
                             <template #before-options>
-                                <q-banner
+                                <StatusBanner
                                     v-if="isOrphanedJobGroup"
-                                    class="bg-warning text-white q-mb-sm"
-                                    dense
+                                    type="warning"
                                 >
                                     Current value "{{ form.jobGroupId }}" is not in the standard list
-                                </q-banner>
+                                </StatusBanner>
                             </template>
                         </q-select>
 
@@ -140,19 +138,12 @@
                             </span>
                         </q-checkbox>
 
-                        <q-banner
+                        <StatusBanner
                             v-if="settingsErrorMessage"
-                            class="bg-negative text-white"
-                            rounded
+                            type="error"
                         >
-                            <template #avatar>
-                                <q-icon
-                                    name="error"
-                                    color="white"
-                                />
-                            </template>
                             {{ settingsErrorMessage }}
-                        </q-banner>
+                        </StatusBanner>
 
                         <div class="row justify-end">
                             <q-btn
@@ -256,6 +247,7 @@ import { useQuasar, QForm } from "quasar"
 import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
 import { requiredRule } from "../validation"
 import "../effort-forms.css"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { instructorService } from "../services/instructor-service"
 import { percentageService } from "../services/percentage-service"
 import { percentAssignTypeService } from "../services/percent-assign-type-service"
diff --git a/VueApp/src/Effort/components/PercentAssignmentAddDialog.vue b/VueApp/src/Effort/components/PercentAssignmentAddDialog.vue
index 38f9e3a8..b0261172 100644
--- a/VueApp/src/Effort/components/PercentAssignmentAddDialog.vue
+++ b/VueApp/src/Effort/components/PercentAssignmentAddDialog.vue
@@ -184,17 +184,10 @@
                     />
 
                     <!-- Warning Banner -->
-                    <q-banner
+                    <StatusBanner
                         v-if="warningMessage"
-                        class="bg-warning q-mb-md"
-                        rounded
+                        type="warning"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="warning"
-                                color="dark"
-                            />
-                        </template>
                         {{ warningMessage }}
                         <template #action>
                             <q-btn
@@ -204,22 +197,15 @@
                                 @click="saveWithWarning"
                             />
                         </template>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Error Banner -->
-                    <q-banner
+                    <StatusBanner
                         v-if="errorMessage"
-                        class="bg-negative text-white q-mb-md"
-                        rounded
+                        type="error"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="error"
-                                color="white"
-                            />
-                        </template>
                         {{ errorMessage }}
-                    </q-banner>
+                    </StatusBanner>
                 </q-form>
             </q-card-section>
 
@@ -252,6 +238,7 @@
 import { ref, computed, watch } from "vue"
 import { QForm } from "quasar"
 import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { percentageService } from "../services/percentage-service"
 import { usePercentageForm } from "../composables/use-percentage-form"
 import { requiredRule, percentRule } from "../validation"
diff --git a/VueApp/src/Effort/components/PercentAssignmentEditDialog.vue b/VueApp/src/Effort/components/PercentAssignmentEditDialog.vue
index 9da4ccc7..622dc6b1 100644
--- a/VueApp/src/Effort/components/PercentAssignmentEditDialog.vue
+++ b/VueApp/src/Effort/components/PercentAssignmentEditDialog.vue
@@ -184,17 +184,10 @@
                     />
 
                     <!-- Post-save Warning Banner -->
-                    <q-banner
+                    <StatusBanner
                         v-if="warningMessage"
-                        class="bg-warning q-mb-md"
-                        rounded
+                        type="warning"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="info"
-                                color="dark"
-                            />
-                        </template>
                         <div><strong>Saved with notice:</strong> {{ warningMessage }}</div>
                         <template #action>
                             <q-btn
@@ -204,22 +197,15 @@
                                 @click="acknowledgeWarning"
                             />
                         </template>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Error Banner -->
-                    <q-banner
+                    <StatusBanner
                         v-if="errorMessage"
-                        class="bg-negative text-white q-mb-md"
-                        rounded
+                        type="error"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="error"
-                                color="white"
-                            />
-                        </template>
                         {{ errorMessage }}
-                    </q-banner>
+                    </StatusBanner>
                 </q-form>
             </q-card-section>
 
@@ -252,6 +238,7 @@
 import { ref, computed, watch } from "vue"
 import { QForm } from "quasar"
 import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { percentageService } from "../services/percentage-service"
 import { usePercentageForm } from "../composables/use-percentage-form"
 import { requiredRule, percentRule } from "../validation"
diff --git a/VueApp/src/Effort/components/PercentRolloverDialog.vue b/VueApp/src/Effort/components/PercentRolloverDialog.vue
index 7f5d1f58..a0cfcf2c 100644
--- a/VueApp/src/Effort/components/PercentRolloverDialog.vue
+++ b/VueApp/src/Effort/components/PercentRolloverDialog.vue
@@ -26,22 +26,13 @@
                 v-if="isOutsideIdealMonths && !isLoading"
                 class="q-py-sm"
             >
-                <q-banner
-                    class="bg-orange-1"
-                    rounded
-                >
-                    <template #avatar>
-                        <q-icon
-                            name="warning"
-                            color="warning"
-                        />
-                    </template>
-                    <div class="text-weight-medium text-orange-9">Unusual Timing</div>
+                <StatusBanner type="warning">
+                    <div class="text-weight-medium">Unusual Timing</div>
                     <div class="text-caption text-grey-8">
                         Percent rollover is typically performed in June or July at the academic year boundary. The
                         current month is {{ currentMonthName }}.
                     </div>
-                </q-banner>
+                </StatusBanner>
             </q-card-section>
 
             <!-- Loading State (Preview) -->
@@ -108,16 +99,7 @@
             <template v-else-if="preview">
                 <q-card-section class="q-pt-sm">
                     <!-- Summary Banner -->
-                    <q-banner
-                        class="bg-blue-1 q-mb-md"
-                        rounded
-                    >
-                        <template #avatar>
-                            <q-icon
-                                name="info"
-                                color="primary"
-                            />
-                        </template>
+                    <StatusBanner type="info">
                         <div class="row q-col-gutter-md">
                             <div class="col-4 text-center">
                                 <div class="text-h5">{{ preview.assignments.length }}</div>
@@ -136,26 +118,19 @@
                             Rolling from {{ preview.sourceAcademicYearDisplay }} to
                             {{ preview.targetAcademicYearDisplay }}
                         </div>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Warning when nothing to rollover -->
-                    <q-banner
+                    <StatusBanner
                         v-if="preview.assignments.length === 0"
-                        class="bg-orange-1 q-mb-md"
-                        rounded
+                        type="warning"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="warning"
-                                color="warning"
-                            />
-                        </template>
                         <div class="text-weight-medium">No assignments to roll forward</div>
                         <div class="text-caption text-grey-7">
                             There are no percent assignments ending on {{ formatDate(preview.oldEndDate) }} that need to
                             be rolled forward.
                         </div>
-                    </q-banner>
+                    </StatusBanner>
 
                     <!-- Will be Rolled Forward Section (cyan, expanded by default) -->
                     <q-expansion-item
@@ -239,20 +214,10 @@
                             </div>
                         </template>
                         <div class="bg-orange-1 q-pa-sm">
-                            <q-banner
-                                class="bg-orange-2 q-mb-sm"
-                                rounded
-                                dense
-                            >
-                                <template #avatar>
-                                    <q-icon
-                                        name="info"
-                                        color="warning"
-                                    />
-                                </template>
+                            <StatusBanner type="warning">
                                 These assignments will not be rolled forward because someone manually edited or deleted
                                 a percent assignment of the same type for this instructor after the term was harvested.
-                            </q-banner>
+                            </StatusBanner>
                             <RolloverAssignmentTable :rows="preview.excludedByAudit" />
                         </div>
                     </q-expansion-item>
@@ -285,6 +250,7 @@ import { ref, computed, watch } from "vue"
 import { useQuasar } from "quasar"
 import { rolloverService } from "../services/rollover-service"
 import type { PercentRolloverPreviewDto } from "../types"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { inflect } from "inflection"
 import { useDateFunctions } from "@/composables/DateFunctions"
 import RolloverAssignmentTable from "./RolloverAssignmentTable.vue"
diff --git a/VueApp/src/Effort/components/ZeroEffortBanner.vue b/VueApp/src/Effort/components/ZeroEffortBanner.vue
index cf50d419..9ca2d85d 100644
--- a/VueApp/src/Effort/components/ZeroEffortBanner.vue
+++ b/VueApp/src/Effort/components/ZeroEffortBanner.vue
@@ -1,15 +1,8 @@
 <template>
-    <q-banner
+    <StatusBanner
         v-if="show"
-        class="bg-warning q-mb-md"
-        rounded
+        type="warning"
     >
-        <template #avatar>
-            <q-icon
-                name="warning"
-                color="dark"
-            />
-        </template>
         <div v-if="mode === 'self'">
             <strong>You have effort items with ZERO effort.</strong>
             You will not be able to verify your effort until these items have been updated to document hours/weeks or
@@ -19,10 +12,12 @@
             NOTE: This instructor has one or more effort items documented as ZERO effort. Effort cannot be verified
             until these items have been updated or removed.
         </template>
-    </q-banner>
+    </StatusBanner>
 </template>
 
 <script setup lang="ts">
+import StatusBanner from "@/components/StatusBanner.vue"
+
 defineProps<{
     show: boolean
     mode: "self" | "staff"
diff --git a/VueApp/src/Effort/pages/CourseDetail.vue b/VueApp/src/Effort/pages/CourseDetail.vue
index 1f639fa6..1703b873 100644
--- a/VueApp/src/Effort/pages/CourseDetail.vue
+++ b/VueApp/src/Effort/pages/CourseDetail.vue
@@ -97,17 +97,11 @@
             </div>
 
             <!-- Parent Relationship Banner -->
-            <q-banner
+            <StatusBanner
                 v-if="parentRelationship"
-                class="bg-blue-1 q-mb-md"
-                rounded
+                type="info"
+                icon="subdirectory_arrow_right"
             >
-                <template #avatar>
-                    <q-icon
-                        name="subdirectory_arrow_right"
-                        color="primary"
-                    />
-                </template>
                 This course is a
                 <q-badge
                     :color="parentRelationship.relationshipType === 'CrossList' ? 'positive' : 'info'"
@@ -126,7 +120,7 @@
                     {{ parentRelationship.parentCourse.courseCode }}-{{ parentRelationship.parentCourse.seqNumb }}
                 </router-link>
                 <span v-else>Course {{ parentRelationship.parentCourseId }}</span>
-            </q-banner>
+            </StatusBanner>
 
             <!-- Child Relationships Section -->
             <div
diff --git a/VueApp/src/Effort/pages/InstructorDetail.vue b/VueApp/src/Effort/pages/InstructorDetail.vue
index 19f29ec8..f55a348b 100644
--- a/VueApp/src/Effort/pages/InstructorDetail.vue
+++ b/VueApp/src/Effort/pages/InstructorDetail.vue
@@ -22,9 +22,9 @@
         </div>
 
         <!-- Error state -->
-        <q-banner
+        <StatusBanner
             v-else-if="loadError"
-            class="bg-negative text-white q-mb-md"
+            type="error"
         >
             {{ loadError }}
             <template #action>
@@ -34,7 +34,7 @@
                     :to="{ name: 'InstructorList', params: { termCode } }"
                 />
             </template>
-        </q-banner>
+        </StatusBanner>
 
         <!-- Instructor content -->
         <template v-else-if="instructor">
@@ -136,6 +136,7 @@ import { termService } from "../services/term-service"
 import { useEffortPermissions } from "../composables/use-effort-permissions"
 import { useEffortRecordManagement, formatEffortDate } from "../composables/use-effort-record-management"
 import type { PersonDto, TermDto, InstructorEffortRecordDto } from "../types"
+import StatusBanner from "@/components/StatusBanner.vue"
 import EffortRecordAddDialog from "../components/EffortRecordAddDialog.vue"
 import EffortRecordEditDialog from "../components/EffortRecordEditDialog.vue"
 import CourseImportDialog from "../components/CourseImportDialog.vue"
diff --git a/VueApp/src/Effort/pages/InstructorEdit.vue b/VueApp/src/Effort/pages/InstructorEdit.vue
index 0ca02422..c84b2cbb 100644
--- a/VueApp/src/Effort/pages/InstructorEdit.vue
+++ b/VueApp/src/Effort/pages/InstructorEdit.vue
@@ -26,9 +26,9 @@
         </div>
 
         <!-- Error state -->
-        <q-banner
+        <StatusBanner
             v-else-if="loadError"
-            class="bg-negative text-white q-mb-md"
+            type="error"
         >
             {{ loadError }}
             <template #action>
@@ -38,7 +38,7 @@
                     :to="{ name: 'InstructorList', params: { termCode } }"
                 />
             </template>
-        </q-banner>
+        </StatusBanner>
 
         <!-- Instructor content -->
         <template v-else-if="instructor">
@@ -138,13 +138,12 @@
                         @filter="filterTitleCodes"
                     >
                         <template #before-options>
-                            <q-banner
+                            <StatusBanner
                                 v-if="isOrphanedTitleCode"
-                                class="bg-warning text-white q-mb-sm"
-                                dense
+                                type="warning"
                             >
                                 Current value "{{ form.effortTitleCode }}" is not in the standard list
-                            </q-banner>
+                            </StatusBanner>
                         </template>
                         <template #no-option>
                             <q-item>
@@ -167,13 +166,12 @@
                         clearable
                     >
                         <template #before-options>
-                            <q-banner
+                            <StatusBanner
                                 v-if="isOrphanedJobGroup"
-                                class="bg-warning text-white q-mb-sm"
-                                dense
+                                type="warning"
                             >
                                 Current value "{{ form.jobGroupId }}" is not in the standard list
-                            </q-banner>
+                            </StatusBanner>
                         </template>
                     </q-select>
 
@@ -199,19 +197,12 @@
                         </span>
                     </q-checkbox>
 
-                    <q-banner
+                    <StatusBanner
                         v-if="settingsErrorMessage"
-                        class="bg-negative text-white"
-                        rounded
+                        type="error"
                     >
-                        <template #avatar>
-                            <q-icon
-                                name="error"
-                                color="white"
-                            />
-                        </template>
                         {{ settingsErrorMessage }}
-                    </q-banner>
+                    </StatusBanner>
                 </q-form>
 
                 <div class="row justify-end q-mt-sm">
@@ -317,6 +308,7 @@ import type {
     PercentAssignTypeDto,
     UnitDto,
 } from "../types"
+import StatusBanner from "@/components/StatusBanner.vue"
 import PercentAssignmentTable from "../components/PercentAssignmentTable.vue"
 import PercentAssignmentAddDialog from "../components/PercentAssignmentAddDialog.vue"
 import PercentAssignmentEditDialog from "../components/PercentAssignmentEditDialog.vue"
diff --git a/VueApp/src/Effort/pages/MultiYearReport.vue b/VueApp/src/Effort/pages/MultiYearReport.vue
index 7477ec43..533980a5 100644
--- a/VueApp/src/Effort/pages/MultiYearReport.vue
+++ b/VueApp/src/Effort/pages/MultiYearReport.vue
@@ -42,16 +42,7 @@
                 </div>
             </div>
             <div class="text-grey-7 text-center q-pa-lg">Select an instructor to configure the report.</div>
-            <q-banner
-                class="bg-blue-1 text-caption q-mt-md"
-                rounded
-            >
-                <template #avatar>
-                    <q-icon
-                        name="info"
-                        color="primary"
-                    />
-                </template>
+            <StatusBanner type="info">
                 <p class="q-mb-xs">
                     Faculty count for department averages is a sum of all faculty for the time period specified.
                 </p>
@@ -59,7 +50,7 @@
                     The "Department" used for that average is based on the LAST entry in the review period for the
                     reviewee.
                 </p>
-            </q-banner>
+            </StatusBanner>
         </div>
 
         <!-- Step 2: Configure & Generate (after instructor selected) -->
@@ -230,17 +221,10 @@
             </div>
 
             <!-- Bottom notes -->
-            <q-banner
+            <StatusBanner
                 v-if="!report && !loading"
-                class="bg-blue-1 text-caption q-mt-sm"
-                rounded
+                type="info"
             >
-                <template #avatar>
-                    <q-icon
-                        name="info"
-                        color="primary"
-                    />
-                </template>
                 <p class="q-mb-xs">
                     Faculty count for department averages is a sum of all faculty for the time period specified.
                 </p>
@@ -248,7 +232,7 @@
                     The "Department" used for that average is based on the LAST entry in the review period for the
                     reviewee.
                 </p>
-            </q-banner>
+            </StatusBanner>
         </div>
 
         <!-- Loading state -->
@@ -655,6 +639,7 @@ import {
     loadEffortTypeLabels,
 } from "../composables/use-effort-type-columns"
 import { useEffortPermissions } from "../composables/use-effort-permissions"
+import StatusBanner from "@/components/StatusBanner.vue"
 import ReportLayout from "../components/ReportLayout.vue"
 import LeaveEditorModal from "../components/LeaveEditorModal.vue"
 import type { MultiYearReport, PersonDto, TermDto, SabbaticalDto } from "../types"

From 68869da57cb03378fe9851d661dd0e4ee4c1d079 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Tue, 7 Apr 2026 22:40:31 -0700
Subject: [PATCH 09/11] VPR-104 fix(a11y): fix nested-interactive and
 aria-required-children

- Replace q-list with div for alert-sections in StaffDashboard to fix
  aria-required-children (expansion items inside role="list")
- Add tabindex="-1" to buttons nested inside role="button" containers
  in StaffDashboard and InstructorList to resolve nested-interactive
  (WCAG 1.3.1, 4.1.2)
---
 VueApp/src/Effort/pages/InstructorList.vue | 1 +
 VueApp/src/Effort/pages/StaffDashboard.vue | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/VueApp/src/Effort/pages/InstructorList.vue b/VueApp/src/Effort/pages/InstructorList.vue
index 744990fb..d10458c3 100644
--- a/VueApp/src/Effort/pages/InstructorList.vue
+++ b/VueApp/src/Effort/pages/InstructorList.vue
@@ -105,6 +105,7 @@
                         size="0.75rem"
                         color="white"
                         no-caps
+                        tabindex="-1"
                         :disable="sendingEmailDepts.has(deptGroup.dept)"
                         :loading="sendingEmailDepts.has(deptGroup.dept)"
                         @click.stop="confirmBulkEmail(deptGroup)"
diff --git a/VueApp/src/Effort/pages/StaffDashboard.vue b/VueApp/src/Effort/pages/StaffDashboard.vue
index ed02423d..aeb24121 100644
--- a/VueApp/src/Effort/pages/StaffDashboard.vue
+++ b/VueApp/src/Effort/pages/StaffDashboard.vue
@@ -498,6 +498,7 @@
                                 dense
                                 size="sm"
                                 :label="showIgnoredAlerts ? 'Hide Ignored' : 'Show Ignored'"
+                                tabindex="-1"
                                 @click.stop="showIgnoredAlerts = !showIgnoredAlerts"
                             />
                         </q-item-section>
@@ -507,7 +508,7 @@
                             <div class="text-grey-6 text-center q-pa-md">No alerts to display</div>
                         </template>
 
-                        <q-list
+                        <div
                             v-else
                             class="alert-sections"
                         >
@@ -857,7 +858,7 @@
                                     </q-item>
                                 </q-list>
                             </q-expansion-item>
-                        </q-list>
+                        </div>
                     </q-card-section>
                 </q-expansion-item>
             </q-card>

From ba2010cf46e0912b3777278dbe48d79696a78ab2 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Thu, 9 Apr 2026 19:46:06 -0700
Subject: [PATCH 10/11] VPR-104 fix(a11y): Effort brand colors and dialog
 accessibility

- Replace Quasar palette colors with brand colors across Effort
- Add close affordances and aria-labels to dialogs
---
 VueApp/src/Effort/components/CourseImportDialog.vue      | 2 +-
 VueApp/src/Effort/components/CourseLinkDialog.vue        | 2 +-
 VueApp/src/Effort/components/HarvestDialog.vue           | 2 +-
 .../Effort/components/InstructorPercentEditDialog.vue    | 1 +
 VueApp/src/Effort/components/LeaveEditorModal.vue        | 1 +
 VueApp/src/Effort/components/ReportDeptTabs.vue          | 3 ++-
 VueApp/src/Effort/pages/AuditList.vue                    | 5 +++--
 VueApp/src/Effort/pages/CourseDetail.vue                 | 4 ++--
 VueApp/src/Effort/pages/EffortTypeList.vue               | 9 ++++++---
 VueApp/src/Effort/pages/PercentAssignTypeList.vue        | 2 +-
 VueApp/src/Effort/pages/StaffDashboard.vue               | 5 ++++-
 VueApp/src/Effort/pages/TermManagement.vue               | 4 ++--
 12 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/VueApp/src/Effort/components/CourseImportDialog.vue b/VueApp/src/Effort/components/CourseImportDialog.vue
index 0ae6a9f9..c53b6539 100644
--- a/VueApp/src/Effort/components/CourseImportDialog.vue
+++ b/VueApp/src/Effort/components/CourseImportDialog.vue
@@ -433,7 +433,7 @@ const columns: QTableColumn[] = [
     { name: "enrollment", label: "Enrollment", field: "enrollment", align: "center" },
     { name: "units", label: "Units", field: "unitLow", align: "center" },
     { name: "status", label: "Status", field: "alreadyImported", align: "center" },
-    { name: "actions", label: "", field: "actions", align: "center" },
+    { name: "actions", label: "Actions", field: "actions", align: "center" },
 ]
 
 // Reset search when dialog opens
diff --git a/VueApp/src/Effort/components/CourseLinkDialog.vue b/VueApp/src/Effort/components/CourseLinkDialog.vue
index 50145199..e23f2e32 100644
--- a/VueApp/src/Effort/components/CourseLinkDialog.vue
+++ b/VueApp/src/Effort/components/CourseLinkDialog.vue
@@ -233,7 +233,7 @@ const columns = computed<QTableColumn[]>(() => [
     },
     {
         name: "actions",
-        label: "",
+        label: "Actions",
         field: "actions",
         align: "center",
     },
diff --git a/VueApp/src/Effort/components/HarvestDialog.vue b/VueApp/src/Effort/components/HarvestDialog.vue
index a4697832..7bde7f32 100644
--- a/VueApp/src/Effort/components/HarvestDialog.vue
+++ b/VueApp/src/Effort/components/HarvestDialog.vue
@@ -207,7 +207,7 @@
                         v-model="activeTab"
                         dense
                         align="left"
-                        class="text-grey"
+                        class="text-grey-8 tabs-no-fade"
                         active-color="primary"
                         indicator-color="primary"
                         narrow-indicator
diff --git a/VueApp/src/Effort/components/InstructorPercentEditDialog.vue b/VueApp/src/Effort/components/InstructorPercentEditDialog.vue
index bb4ff83e..bca60bc6 100644
--- a/VueApp/src/Effort/components/InstructorPercentEditDialog.vue
+++ b/VueApp/src/Effort/components/InstructorPercentEditDialog.vue
@@ -22,6 +22,7 @@
             <q-card-section
                 class="scroll"
                 style="max-height: calc(90vh - 120px)"
+                tabindex="0"
             >
                 <!-- Read-only instructor info header -->
                 <div class="q-mb-md q-pa-sm bg-grey-2 rounded-borders">
diff --git a/VueApp/src/Effort/components/LeaveEditorModal.vue b/VueApp/src/Effort/components/LeaveEditorModal.vue
index 80865a33..99843f07 100644
--- a/VueApp/src/Effort/components/LeaveEditorModal.vue
+++ b/VueApp/src/Effort/components/LeaveEditorModal.vue
@@ -12,6 +12,7 @@
             <q-card-section
                 class="q-pt-none scroll"
                 style="max-height: 60vh"
+                tabindex="0"
             >
                 <table class="leave-table">
                     <thead>
diff --git a/VueApp/src/Effort/components/ReportDeptTabs.vue b/VueApp/src/Effort/components/ReportDeptTabs.vue
index 3b003c8f..affa8853 100644
--- a/VueApp/src/Effort/components/ReportDeptTabs.vue
+++ b/VueApp/src/Effort/components/ReportDeptTabs.vue
@@ -3,7 +3,7 @@
         v-model="activeDept"
         dense
         align="left"
-        class="text-grey"
+        class="text-grey-8 tabs-no-fade"
         active-color="primary"
         active-bg-color="grey-2"
         indicator-color="primary"
@@ -28,6 +28,7 @@
             :key="dept.department"
             :name="idx"
             class="q-px-none"
+            tabindex="0"
         >
             <!-- Only render content for active panel to avoid browser freeze -->
             <template v-if="idx === activeDept">
diff --git a/VueApp/src/Effort/pages/AuditList.vue b/VueApp/src/Effort/pages/AuditList.vue
index c45cee2a..e3ad836d 100644
--- a/VueApp/src/Effort/pages/AuditList.vue
+++ b/VueApp/src/Effort/pages/AuditList.vue
@@ -137,7 +137,7 @@
                         <div class="col-12 text-right">
                             <q-btn
                                 label="Clear Filters"
-                                color="grey"
+                                color="secondary"
                                 dense
                                 flat
                                 @click="clearFilter"
@@ -552,7 +552,8 @@ function getActionColor(action: string): string {
     if (action.startsWith("Open") || action.startsWith("Reopen")) return "secondary"
     if (action.startsWith("Close")) return "warning"
     if (action.startsWith("Import")) return "info"
-    return "grey"
+    if (action.startsWith("Verify")) return "positive"
+    return "grey-8"
 }
 
 function filterModifiers(val: string, update: (fn: () => void) => void) {
diff --git a/VueApp/src/Effort/pages/CourseDetail.vue b/VueApp/src/Effort/pages/CourseDetail.vue
index 1703b873..65789463 100644
--- a/VueApp/src/Effort/pages/CourseDetail.vue
+++ b/VueApp/src/Effort/pages/CourseDetail.vue
@@ -225,7 +225,7 @@
                     active-color="primary"
                     indicator-color="primary"
                     no-caps
-                    class="text-grey-7"
+                    class="text-grey-8 tabs-no-fade"
                 >
                     <q-tab
                         name="effort"
@@ -561,7 +561,7 @@ const childColumns = computed<QTableColumn[]>(() => [
     },
     {
         name: "actions",
-        label: "",
+        label: "Actions",
         field: "actions",
         align: "center",
     },
diff --git a/VueApp/src/Effort/pages/EffortTypeList.vue b/VueApp/src/Effort/pages/EffortTypeList.vue
index 92dfe1b1..13490e62 100644
--- a/VueApp/src/Effort/pages/EffortTypeList.vue
+++ b/VueApp/src/Effort/pages/EffortTypeList.vue
@@ -26,7 +26,10 @@
 
         <template v-else>
             <!-- Effort Types Table - wrapped for horizontal scroll on tablets -->
-            <div class="table-scroll-container">
+            <div
+                class="table-scroll-container"
+                tabindex="0"
+            >
                 <q-table
                     :rows="effortTypes"
                     :columns="columns"
@@ -115,7 +118,7 @@
                             </template>
                             <template v-else>
                                 <div class="row items-center no-wrap">
-                                    <span :class="{ 'text-grey': !props.row.isActive }">{{
+                                    <span :class="{ 'text-strike text-grey-8': !props.row.isActive }">{{
                                         props.row.description
                                     }}</span>
                                     <q-btn
@@ -300,7 +303,7 @@
                                         <template v-else>
                                             <div
                                                 class="col text-grey-8"
-                                                :class="{ 'text-grey': !props.row.isActive }"
+                                                :class="{ 'text-strike': !props.row.isActive }"
                                             >
                                                 {{ props.row.description }}
                                             </div>
diff --git a/VueApp/src/Effort/pages/PercentAssignTypeList.vue b/VueApp/src/Effort/pages/PercentAssignTypeList.vue
index fb7d524d..d3966411 100644
--- a/VueApp/src/Effort/pages/PercentAssignTypeList.vue
+++ b/VueApp/src/Effort/pages/PercentAssignTypeList.vue
@@ -45,7 +45,7 @@
                         <q-td :props="props">
                             <q-icon
                                 :name="props.row.showOnTemplate ? 'check_circle' : 'cancel'"
-                                :color="props.row.showOnTemplate ? 'positive' : 'grey'"
+                                :color="props.row.showOnTemplate ? 'positive' : 'negative'"
                                 size="sm"
                             />
                         </q-td>
diff --git a/VueApp/src/Effort/pages/StaffDashboard.vue b/VueApp/src/Effort/pages/StaffDashboard.vue
index aeb24121..e5bbcfe0 100644
--- a/VueApp/src/Effort/pages/StaffDashboard.vue
+++ b/VueApp/src/Effort/pages/StaffDashboard.vue
@@ -900,7 +900,10 @@
                     />
                 </q-card-section>
                 <q-separator />
-                <q-card-section style="max-height: 70vh; overflow: auto">
+                <q-card-section
+                    style="max-height: 70vh; overflow: auto"
+                    tabindex="0"
+                >
                     <template v-if="allAlerts.length === 0">
                         <div class="text-grey-6 text-center q-pa-md">No alerts</div>
                     </template>
diff --git a/VueApp/src/Effort/pages/TermManagement.vue b/VueApp/src/Effort/pages/TermManagement.vue
index 326cc969..84bb2cd9 100644
--- a/VueApp/src/Effort/pages/TermManagement.vue
+++ b/VueApp/src/Effort/pages/TermManagement.vue
@@ -59,7 +59,7 @@
                                 dense
                                 no-caps
                                 size="sm"
-                                color="grey-7"
+                                color="secondary"
                                 @click="rolloverYearOverride = true"
                             />
                         </template>
@@ -79,7 +79,7 @@
                                 dense
                                 no-caps
                                 size="sm"
-                                color="grey-7"
+                                color="secondary"
                                 @click="resetRolloverYear"
                             />
                         </template>

From 3ba08d215c950df059f3fc39fd922e9535ab629b Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 10 Apr 2026 09:00:30 -0700
Subject: [PATCH 11/11] VPR-104 fix(a11y): Effort report contrast fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "No data found" messages: text-grey-6 (#9e9e9e, 2.7:1) → text-grey-7
  (#757575, 4.6:1) across EvalSummary, TeachingActivityIndividual,
  TeachingActivityGrouped, MeritSummary, MeritAverage, ClinicalEffort,
  DeptSummary — now passes WCAG AA for small text
- TeachingActivityIndividual department caption on bg-grey-2: text-grey-7
  → text-grey-8 (#616161, 5.1:1) — grey-7 fails on grey-2 background
- InstructorPercentEditDialog person info caption on bg-grey-2: same
  text-grey-7 → text-grey-8 fix
---
 VueApp/src/Effort/components/InstructorPercentEditDialog.vue | 2 +-
 VueApp/src/Effort/pages/ClinicalEffort.vue                   | 2 +-
 VueApp/src/Effort/pages/DeptSummary.vue                      | 2 +-
 VueApp/src/Effort/pages/EvalSummary.vue                      | 2 +-
 VueApp/src/Effort/pages/MeritAverage.vue                     | 2 +-
 VueApp/src/Effort/pages/MeritSummary.vue                     | 2 +-
 VueApp/src/Effort/pages/TeachingActivityGrouped.vue          | 2 +-
 VueApp/src/Effort/pages/TeachingActivityIndividual.vue       | 4 ++--
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/VueApp/src/Effort/components/InstructorPercentEditDialog.vue b/VueApp/src/Effort/components/InstructorPercentEditDialog.vue
index bca60bc6..8fde2f8f 100644
--- a/VueApp/src/Effort/components/InstructorPercentEditDialog.vue
+++ b/VueApp/src/Effort/components/InstructorPercentEditDialog.vue
@@ -27,7 +27,7 @@
                 <!-- Read-only instructor info header -->
                 <div class="q-mb-md q-pa-sm bg-grey-2 rounded-borders">
                     <div class="text-subtitle2">{{ instructor?.fullName }}</div>
-                    <div class="text-caption text-grey-7">
+                    <div class="text-caption text-grey-8">
                         Person ID: {{ instructor?.personId }} | Dept: {{ instructor?.effortDept }}
                     </div>
                 </div>
diff --git a/VueApp/src/Effort/pages/ClinicalEffort.vue b/VueApp/src/Effort/pages/ClinicalEffort.vue
index c9f1b6ab..5148509f 100644
--- a/VueApp/src/Effort/pages/ClinicalEffort.vue
+++ b/VueApp/src/Effort/pages/ClinicalEffort.vue
@@ -106,7 +106,7 @@
             <template v-if="report.jobGroups.length === 0">
                 <div
                     role="status"
-                    class="text-grey-6 text-center q-pa-lg"
+                    class="text-grey-7 text-center q-pa-lg"
                 >
                     No data found for the selected filters.
                 </div>
diff --git a/VueApp/src/Effort/pages/DeptSummary.vue b/VueApp/src/Effort/pages/DeptSummary.vue
index 22073457..1116a6ba 100644
--- a/VueApp/src/Effort/pages/DeptSummary.vue
+++ b/VueApp/src/Effort/pages/DeptSummary.vue
@@ -67,7 +67,7 @@
             <template v-if="report.departments.length === 0">
                 <div
                     role="status"
-                    class="text-grey-6 text-center q-pa-lg"
+                    class="text-grey-7 text-center q-pa-lg"
                 >
                     No data found for the selected filters.
                 </div>
diff --git a/VueApp/src/Effort/pages/EvalSummary.vue b/VueApp/src/Effort/pages/EvalSummary.vue
index 82ee3724..05d08c0e 100644
--- a/VueApp/src/Effort/pages/EvalSummary.vue
+++ b/VueApp/src/Effort/pages/EvalSummary.vue
@@ -68,7 +68,7 @@
             <template v-if="report.departments.length === 0">
                 <div
                     role="status"
-                    class="text-grey-6 text-center q-pa-lg"
+                    class="text-grey-7 text-center q-pa-lg"
                 >
                     No data found for the selected filters.
                 </div>
diff --git a/VueApp/src/Effort/pages/MeritAverage.vue b/VueApp/src/Effort/pages/MeritAverage.vue
index fc99e2fb..b4826e28 100644
--- a/VueApp/src/Effort/pages/MeritAverage.vue
+++ b/VueApp/src/Effort/pages/MeritAverage.vue
@@ -69,7 +69,7 @@
             <template v-if="report.jobGroups.length === 0">
                 <div
                     role="status"
-                    class="text-grey-6 text-center q-pa-lg"
+                    class="text-grey-7 text-center q-pa-lg"
                 >
                     No data found for the selected filters.
                 </div>
diff --git a/VueApp/src/Effort/pages/MeritSummary.vue b/VueApp/src/Effort/pages/MeritSummary.vue
index 752ffa37..ec4ec93e 100644
--- a/VueApp/src/Effort/pages/MeritSummary.vue
+++ b/VueApp/src/Effort/pages/MeritSummary.vue
@@ -69,7 +69,7 @@
             <template v-if="report.jobGroups.length === 0">
                 <div
                     role="status"
-                    class="text-grey-6 text-center q-pa-lg"
+                    class="text-grey-7 text-center q-pa-lg"
                 >
                     No data found for the selected filters.
                 </div>
diff --git a/VueApp/src/Effort/pages/TeachingActivityGrouped.vue b/VueApp/src/Effort/pages/TeachingActivityGrouped.vue
index 5b6dc97d..44aa37a5 100644
--- a/VueApp/src/Effort/pages/TeachingActivityGrouped.vue
+++ b/VueApp/src/Effort/pages/TeachingActivityGrouped.vue
@@ -67,7 +67,7 @@
             <template v-if="report.departments.length === 0">
                 <div
                     role="status"
-                    class="text-grey-6 text-center q-pa-lg"
+                    class="text-grey-7 text-center q-pa-lg"
                 >
                     No data found for the selected filters.
                 </div>
diff --git a/VueApp/src/Effort/pages/TeachingActivityIndividual.vue b/VueApp/src/Effort/pages/TeachingActivityIndividual.vue
index 8094874b..acf70c92 100644
--- a/VueApp/src/Effort/pages/TeachingActivityIndividual.vue
+++ b/VueApp/src/Effort/pages/TeachingActivityIndividual.vue
@@ -69,7 +69,7 @@
             <template v-if="allInstructors.length === 0">
                 <div
                     role="status"
-                    class="text-grey-6 text-center q-pa-lg"
+                    class="text-grey-7 text-center q-pa-lg"
                 >
                     No data found for the selected filters.
                 </div>
@@ -88,7 +88,7 @@
                         <div class="text-weight-bold">{{ instructor.instructor }}</div>
                         <div
                             v-if="instructor.department"
-                            class="text-caption text-grey-7"
+                            class="text-caption text-grey-8"
                         >
                             {{ instructor.department }}
                         </div>