From 5c8eeb49ac94ae55c59a7c38c578ea6e9b4094fa Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Tue, 31 Mar 2026 21:32:12 -0700
Subject: [PATCH 01/13] VPR-104 fix(a11y): CTS area accessibility improvements
 (PR 3 of 6)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix heading hierarchy: h2 → h1 on all 16 Vue pages, add h1 to Razor views
- Add route focus management via useRouteFocus composable (C4)
- Add aria-label to icon-only edit buttons on ManageDomains, ManageEpas,
  ManageLevels, ManageBundles, ManageRoles (Vue + Razor)
- Add aria-label to bundle competencies link buttons
- Fix ManageDomains.cshtml: add label props to inputs, move h3 outside q-list
- Add alt text to student photo in AssessmentEpaEdit
- Strict equality fixes and code quality cleanup in Razor views
---
 VueApp/src/CTS/pages/AssessmentCompetency.vue |  2 +-
 VueApp/src/CTS/pages/AssessmentEpaEdit.vue    |  1 +
 VueApp/src/CTS/pages/AssessmentList.vue       |  2 +-
 VueApp/src/CTS/pages/AuditList.vue            |  2 +-
 VueApp/src/CTS/pages/CourseStudents.vue       |  2 +-
 VueApp/src/CTS/pages/CtsHome.vue              |  2 +-
 .../CTS/pages/ManageBundleCompetencies.vue    |  2 +-
 VueApp/src/CTS/pages/ManageBundles.vue        |  4 +-
 VueApp/src/CTS/pages/ManageCompetencies.vue   |  2 +-
 VueApp/src/CTS/pages/ManageDomains.vue        |  3 +-
 VueApp/src/CTS/pages/ManageEpas.vue           |  3 +-
 VueApp/src/CTS/pages/ManageLevels.vue         |  3 +-
 VueApp/src/CTS/pages/ManageMilestones.vue     |  2 +-
 VueApp/src/CTS/pages/ManageRoles.vue          |  3 +-
 .../CTS/pages/ManageSessionCompetencies.vue   |  2 +-
 VueApp/src/CTS/pages/MyAssessmentCharts.vue   |  2 +-
 VueApp/src/CTS/router/index.ts                |  3 ++
 web/Areas/CTS/Views/Assessments.cshtml        |  6 +--
 web/Areas/CTS/Views/Epa.cshtml                | 30 +++++++-----
 web/Areas/CTS/Views/EpaEdit.cshtml            |  1 +
 web/Areas/CTS/Views/Index.cshtml              |  2 +-
 web/Areas/CTS/Views/ManageDomains.cshtml      | 49 +++++++++----------
 web/Areas/CTS/Views/ManageEpas.cshtml         |  4 +-
 web/Areas/CTS/Views/ManageLevels.cshtml       |  8 +--
 24 files changed, 76 insertions(+), 64 deletions(-)

diff --git a/VueApp/src/CTS/pages/AssessmentCompetency.vue b/VueApp/src/CTS/pages/AssessmentCompetency.vue
index 5c46c03f..5352fa15 100644
--- a/VueApp/src/CTS/pages/AssessmentCompetency.vue
+++ b/VueApp/src/CTS/pages/AssessmentCompetency.vue
@@ -63,7 +63,7 @@ const milestoneLevels = ref([
 function submitMilestone() {}
 </script>
 <template>
-    <h2>Competency Assessment</h2>
+    <h1>Competency Assessment</h1>
     <div class="row justify-between items-center q-mb-lg">
         <div class="col-12 col-md-6">
             <h2 class="epa text-weight-regular">{{ competency.number }} {{ competency.name }}</h2>
diff --git a/VueApp/src/CTS/pages/AssessmentEpaEdit.vue b/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
index ca1bd0a7..6a49b27e 100644
--- a/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
+++ b/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
@@ -109,6 +109,7 @@ getStudentEpa()
                                     class="smallPhoto rounded-borders"
                                     loading="eager"
                                     :no-spinner="true"
+                                    :alt="`${studentEpa.studentName}'s photo`"
                                 ></q-img>
                             </q-avatar>
                         </div>
diff --git a/VueApp/src/CTS/pages/AssessmentList.vue b/VueApp/src/CTS/pages/AssessmentList.vue
index f7b77766..8cc6a810 100644
--- a/VueApp/src/CTS/pages/AssessmentList.vue
+++ b/VueApp/src/CTS/pages/AssessmentList.vue
@@ -138,7 +138,7 @@ loadPageData()
 </script>
 
 <template>
-    <h2>View Assessments</h2>
+    <h1>View Assessments</h1>
 
     <q-form>
         <div class="row">
diff --git a/VueApp/src/CTS/pages/AuditList.vue b/VueApp/src/CTS/pages/AuditList.vue
index dc5d8c0b..e07fd243 100644
--- a/VueApp/src/CTS/pages/AuditList.vue
+++ b/VueApp/src/CTS/pages/AuditList.vue
@@ -121,7 +121,7 @@ loadAreas()
 </script>
 
 <template>
-    <h2>View Audit Log</h2>
+    <h1>View Audit Log</h1>
     <q-form>
         <div class="row">
             <div class="col-12 col-md-6 col-lg-3">
diff --git a/VueApp/src/CTS/pages/CourseStudents.vue b/VueApp/src/CTS/pages/CourseStudents.vue
index 7d914e28..f276dfa8 100644
--- a/VueApp/src/CTS/pages/CourseStudents.vue
+++ b/VueApp/src/CTS/pages/CourseStudents.vue
@@ -3,7 +3,7 @@ import { ref } from "vue"
 const student = ref("")
 </script>
 <template>
-    <h2>Students for VET430 Lab 1 Challenging Communication - Simulated Lab with Actors and Video</h2>
+    <h1>Students for VET430 Lab 1 Challenging Communication - Simulated Lab with Actors and Video</h1>
 
     <h3>Add Student(s)</h3>
     <div class="row q-mb-md">
diff --git a/VueApp/src/CTS/pages/CtsHome.vue b/VueApp/src/CTS/pages/CtsHome.vue
index 8a8b092e..7c3ec069 100644
--- a/VueApp/src/CTS/pages/CtsHome.vue
+++ b/VueApp/src/CTS/pages/CtsHome.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="loadHome">
-        <h2>Competency Tracking System (CTS)</h2>
+        <h1>Competency Tracking System (CTS)</h1>
         <p>
             The Council on Education has mandated that veterinary graduates must have the basic scientific knowledge,
             skills and values to practice veterinary medicine, independently, at the time of graduation. At a minimum,
diff --git a/VueApp/src/CTS/pages/ManageBundleCompetencies.vue b/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
index 8416466a..c112c29c 100644
--- a/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
@@ -199,7 +199,7 @@ load()
 </script>
 <template>
     <div v-if="bundle != null">
-        <h2>Competencies for Bundle {{ bundle?.name }}</h2>
+        <h1>Competencies for Bundle {{ bundle?.name }}</h1>
         <q-btn
             dense
             no-caps
diff --git a/VueApp/src/CTS/pages/ManageBundles.vue b/VueApp/src/CTS/pages/ManageBundles.vue
index 65431a18..c9deb2f1 100644
--- a/VueApp/src/CTS/pages/ManageBundles.vue
+++ b/VueApp/src/CTS/pages/ManageBundles.vue
@@ -82,7 +82,7 @@ async function removeBundle() {
 load()
 </script>
 <template>
-    <h2>Manage Bundles</h2>
+    <h1>Manage Bundles</h1>
     <q-card flat>
         <q-form @submit="save()">
             <h3>{{ bundle?.bundleId == null ? "Add Bundle" : "Update Bundle" }}</h3>
@@ -176,6 +176,7 @@ load()
                     dense
                     size="sm"
                     icon="edit"
+                    aria-label="Edit bundle"
                     @click="selectBundle(props.row)"
                     color="primary"
                 ></q-btn>
@@ -199,6 +200,7 @@ load()
                     class="q-mr-md"
                     icon="list"
                     color="primary"
+                    aria-label="View competencies"
                     :to="'ManageBundleCompetencies?bundleId=' + props.row.bundleId"
                 ></q-btn>
                 {{ props.row.competencyCount }}
diff --git a/VueApp/src/CTS/pages/ManageCompetencies.vue b/VueApp/src/CTS/pages/ManageCompetencies.vue
index 438761e0..78e6776c 100644
--- a/VueApp/src/CTS/pages/ManageCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageCompetencies.vue
@@ -111,7 +111,7 @@ watch(
 load()
 </script>
 <template>
-    <h2>Manage Competencies</h2>
+    <h1>Manage Competencies</h1>
     <q-dialog
         v-model="showForm"
         @hide="clearComp()"
diff --git a/VueApp/src/CTS/pages/ManageDomains.vue b/VueApp/src/CTS/pages/ManageDomains.vue
index 1a0f924d..1722ecd1 100644
--- a/VueApp/src/CTS/pages/ManageDomains.vue
+++ b/VueApp/src/CTS/pages/ManageDomains.vue
@@ -51,7 +51,7 @@ getDomains()
 </script>
 
 <template>
-    <h2>Manage Domains</h2>
+    <h1>Manage Domains</h1>
     <q-form
         method="post"
         @submit="save"
@@ -142,6 +142,7 @@ getDomains()
                         dense
                         flat
                         class="secondary"
+                        aria-label="Edit domain"
                         @click="domain = d"
                     ></q-btn>
                 </q-item-section>
diff --git a/VueApp/src/CTS/pages/ManageEpas.vue b/VueApp/src/CTS/pages/ManageEpas.vue
index e1950d87..6d13a46d 100644
--- a/VueApp/src/CTS/pages/ManageEpas.vue
+++ b/VueApp/src/CTS/pages/ManageEpas.vue
@@ -80,7 +80,7 @@ getEpas()
         v-if="showForm"
         class="q-mb-md"
     >
-        <h2>{{ epa.epaId ? "Updating EPA" : "Creating EPA" }}</h2>
+        <h1>{{ epa.epaId ? "Updating EPA" : "Creating EPA" }}</h1>
 
         <div class="row">
             <q-input
@@ -226,6 +226,7 @@ getEpas()
                                 size="md"
                                 icon="edit"
                                 color="primary"
+                                aria-label="Edit EPA"
                                 @click="selectEpa(epaItem)"
                             />
                         </span>
diff --git a/VueApp/src/CTS/pages/ManageLevels.vue b/VueApp/src/CTS/pages/ManageLevels.vue
index d9fdbd38..6f0d6a8d 100644
--- a/VueApp/src/CTS/pages/ManageLevels.vue
+++ b/VueApp/src/CTS/pages/ManageLevels.vue
@@ -102,7 +102,7 @@ loadLevels()
 </script>
 
 <template>
-    <h2>Manage Levels</h2>
+    <h1>Manage Levels</h1>
     <q-form
         action=""
         @submit="submitLevel"
@@ -216,6 +216,7 @@ loadLevels()
                         size="md"
                         color="primary"
                         icon="edit"
+                        aria-label="Edit level"
                         @click="editLevel(l)"
                     ></q-btn>
                 </q-item-section>
diff --git a/VueApp/src/CTS/pages/ManageMilestones.vue b/VueApp/src/CTS/pages/ManageMilestones.vue
index 606322d9..dcf4840b 100644
--- a/VueApp/src/CTS/pages/ManageMilestones.vue
+++ b/VueApp/src/CTS/pages/ManageMilestones.vue
@@ -101,7 +101,7 @@ async function createMilestone() {
 load()
 </script>
 <template>
-    <h2>Edit Milestones</h2>
+    <h1>Edit Milestones</h1>
 
     <q-form @submit="createMilestone">
         <div class="row items-center">
diff --git a/VueApp/src/CTS/pages/ManageRoles.vue b/VueApp/src/CTS/pages/ManageRoles.vue
index 46f06f73..82a46c1f 100644
--- a/VueApp/src/CTS/pages/ManageRoles.vue
+++ b/VueApp/src/CTS/pages/ManageRoles.vue
@@ -36,7 +36,7 @@ function clearRole() {
 load()
 </script>
 <template>
-    <h2>Add/Edit Roles</h2>
+    <h1>Add/Edit Roles</h1>
     <q-form
         @submit="save()"
         class="q-mb-md"
@@ -89,6 +89,7 @@ load()
             size="sm"
             icon="edit"
             color="primary"
+            aria-label="Edit role"
             @click="role = r"
             class="q-mt-xs q-mr-md"
         ></q-btn>
diff --git a/VueApp/src/CTS/pages/ManageSessionCompetencies.vue b/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
index 0f691b95..469fe8bb 100644
--- a/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
@@ -177,7 +177,7 @@ if (!courseId || !sessionId) {
 }
 </script>
 <template>
-    <h2>Competencies for {{ session.courseTitle }} {{ session.type }} {{ session.typeOrder }} {{ session.title }}</h2>
+    <h1>Competencies for {{ session.courseTitle }} {{ session.type }} {{ session.typeOrder }} {{ session.title }}</h1>
 
     <q-dialog v-model="showCompForm">
         <q-card
diff --git a/VueApp/src/CTS/pages/MyAssessmentCharts.vue b/VueApp/src/CTS/pages/MyAssessmentCharts.vue
index 4ea69ba7..1a4007c7 100644
--- a/VueApp/src/CTS/pages/MyAssessmentCharts.vue
+++ b/VueApp/src/CTS/pages/MyAssessmentCharts.vue
@@ -108,7 +108,7 @@ ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend
 </script>
 <template>
     <div v-if="epaAssessments.length">
-        <h2>Assessments for {{ epaAssessments[0]?.studentName }}</h2>
+        <h1>Assessments for {{ epaAssessments[0]?.studentName }}</h1>
         <div class="row">
             <div class="col-12 col-lg-2"><strong>EPA</strong></div>
             <div class="col-12 col-lg-4"><strong>Level</strong></div>
diff --git a/VueApp/src/CTS/router/index.ts b/VueApp/src/CTS/router/index.ts
index 397dc7c8..f78847ea 100644
--- a/VueApp/src/CTS/router/index.ts
+++ b/VueApp/src/CTS/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router"
 import { routes } from "./routes"
 import { useRequireLogin } from "@/composables/RequireLogin"
 import { checkHasOnePermission } from "@/composables/CheckPagePermission"
+import { useRouteFocus } from "@/composables/use-route-focus"
 
 const baseUrl = import.meta.env.VITE_VIPER_HOME
 const router = createRouter({
@@ -24,4 +25,6 @@ router.beforeEach(async (to) => {
     }
 })
 
+useRouteFocus(router)
+
 export { router }
diff --git a/web/Areas/CTS/Views/Assessments.cshtml b/web/Areas/CTS/Views/Assessments.cshtml
index 154a93fb..e64ed049 100644
--- a/web/Areas/CTS/Views/Assessments.cshtml
+++ b/web/Areas/CTS/Views/Assessments.cshtml
@@ -1,5 +1,5 @@
 
-<h2>View Assessments</h2>
+<h1>View Assessments</h1>
 
 <q-form>
     <div class="row">
@@ -94,7 +94,7 @@
             methods: {
                 loadAssessments: async function() {
                     const y = Object.fromEntries(
-                      Object.entries(this.searchForm).filter(([key, value]) => value !== null)
+                      Object.entries(this.searchForm).filter(([_key, value]) => value !== null)
                     );
                     var u = null;
                     switch(this.assessmentType) {
@@ -107,7 +107,7 @@
                         default: break;
                     }
 
-                    if(u != null) {
+                    if(u !== null) {
                         u.search = new URLSearchParams(y)
                         this.assessmentsTable.urlBase = u
                         this.assessmentsTable.load()
diff --git a/web/Areas/CTS/Views/Epa.cshtml b/web/Areas/CTS/Views/Epa.cshtml
index c5911f47..ba99a4a4 100644
--- a/web/Areas/CTS/Views/Epa.cshtml
+++ b/web/Areas/CTS/Views/Epa.cshtml
@@ -2,6 +2,7 @@
     IUserHelper UserHelper = new UserHelper();
     var siteRootUrl = Url.Content("~/");
 }
+<h1>EPA Assessment</h1>
 <div class="row epa justify-center items-start content-start">
     <div style="max-width: 1200px" class="col">
         @*
@@ -198,25 +199,26 @@
                     var sunday = new Date(today)
                     sunday.setDate(sunday.getDate() - sunday.getDay())
                     var schedThisWeek = scheduledServices.find(s => today >= new Date(s.dateStart) && today <= new Date(s.dateEnd))
-                    var schedLastWeek = scheduledServices.find(s => new Date(s.dateEnd).getTime() == sunday.getTime())
+                    var schedLastWeek = scheduledServices.find(s => new Date(s.dateEnd).getTime() === sunday.getTime())
                     this.serviceThisWeek = schedThisWeek ? schedThisWeek.serviceId : 0
-                    this.serviceLastWeek = schedLastWeek && schedLastWeek.serviceId != this.serviceThisWeek ? schedLastWeek.serviceId : 0
+                    this.serviceLastWeek = schedLastWeek && schedLastWeek.serviceId !== this.serviceThisWeek ? schedLastWeek.serviceId : 0
                     this.servicesScheduled = scheduledServices.map(s => s.serviceID)
 
                     //auto select a service - this week, then last week
-                    if (this.serviceThisWeek > 0)
+                    if (this.serviceThisWeek > 0) {
                         this.service = this.serviceThisWeek
-                    else if (this.serviceLastWeek > 0)
+                    } else if (this.serviceLastWeek > 0) {
                         this.service = this.serviceLastWeek
+                    }
                 },
 
                 //load epas and auto select if there's only one
                 getEpas: async function () {
                     this.selectedEpa = ""
-                    if (this.service != '') {
+                    if (this.service !== '') {
                         await viperFetch(this, "epas?serviceId=" + this.service)
                             .then(data => this.epas = data.map(d => ({ label: d.name, value: d.epaId })))
-                        if (this.epas.length == 1) {
+                        if (this.epas.length === 1) {
                             this.selectedEpa = this.epas[0]
                         }
                     }
@@ -224,14 +226,14 @@
                 //students
                 getStudents: async function () {
                     //load all students and students on service, if necessary
-                    if (this.allStudents.length == 0) {
+                    if (this.allStudents.length === 0) {
                         await viperFetch(this, "@siteRootUrl" + "students/dvm")
                             .then(data => this.allStudents = data.map(s => ({
                                 label: s.lastName + ", " + s.firstName, mailId: s.mailId, value: s.personId, classLevel: s.classLevel
                             })))
                     }
 
-                    if (this.service && this.service != this.studentsLoadedForService) {
+                    if (this.service && this.service !== this.studentsLoadedForService) {
                         var d = new Date().toJSON().split("T")[0]
                         await viperFetch(this, "../api/cts/clinicalschedule/student?serviceId=" + this.service + "&startDate=" + d + "&endDate=" + d)
                             .then(data => this.studentsOnService = data.map(s => ({
@@ -245,7 +247,7 @@
                             this.students = this.studentsOnService
                             break;
                         case "V4":
-                            this.students = this.allStudents.filter(s => s.classLevel == 'V4')
+                            this.students = this.allStudents.filter(s => s.classLevel === 'V4')
                             break;
                         default:
                             this.students = this.allStudents
@@ -282,7 +284,7 @@
                         this.success = true
                     }
                 },
-                studentSearch: function (val, update, abort) {
+                studentSearch: function (val, update, _abort) {
                     if (val === '') {
                         update(() => this.getStudents())
                         return
@@ -298,8 +300,9 @@
                 this.getLevels()
 
                 var selectedService = getItemFromStorage("Cts_Epa_ServiceId")
-                if(selectedService != null)
+                if(selectedService !== null) {
                     this.service = selectedService
+                }
             },
             watch: {
                 //when service is updated, reload epa list and student list
@@ -312,14 +315,15 @@
                 },
                 //set student list when student type is selected
                 studentOptionsType: {
-                    handler(v) {
+                    handler(_v) {
                         this.getStudents()
                     }
                 },
                 selectedStudent: {
                     handler(v) {
-                        if(v != null)
+                        if(v !== null) {
                             this.success = false
+                        }
                     }
                 }
             }
diff --git a/web/Areas/CTS/Views/EpaEdit.cshtml b/web/Areas/CTS/Views/EpaEdit.cshtml
index 791f002b..f8444d5a 100644
--- a/web/Areas/CTS/Views/EpaEdit.cshtml
+++ b/web/Areas/CTS/Views/EpaEdit.cshtml
@@ -1,6 +1,7 @@
 @{
     IUserHelper UserHelper = new UserHelper();
 }
+<h1>Edit EPA Assessment</h1>
 <div class="row epa justify-center items-start content-start">
     <div style="max-width: 1200px" class="col">
         <q-banner inline-actions rounded v-if="success" class="bg-green text-white q-mb-md">
diff --git a/web/Areas/CTS/Views/Index.cshtml b/web/Areas/CTS/Views/Index.cshtml
index 8f7a6b68..c3da6047 100644
--- a/web/Areas/CTS/Views/Index.cshtml
+++ b/web/Areas/CTS/Views/Index.cshtml
@@ -2,7 +2,7 @@
     var html = ViewData["html"] as string;
 }
 
-<h2>CTS Home</h2>
+<h1>CTS Home</h1>
 
 @if (html != null) { Html.Raw(html); }
 <script asp-asp-add-nonce="true">
diff --git a/web/Areas/CTS/Views/ManageDomains.cshtml b/web/Areas/CTS/Views/ManageDomains.cshtml
index 95291bb5..111002b9 100644
--- a/web/Areas/CTS/Views/ManageDomains.cshtml
+++ b/web/Areas/CTS/Views/ManageDomains.cshtml
@@ -1,6 +1,6 @@
 @using Viper.Models.CTS
 
-<h2>Manage Domains</h2>
+<h1>Manage Domains</h1>
 @{
 	var errors = ViewData["Errors"] as List<string>;
 	if(errors != null && errors.Count > 0)
@@ -19,31 +19,28 @@
 
 <q-form action="" method="post">
 	<input type="hidden" name="domainId" value="@(domain?.DomainId ?? 0)" />
-	<q-label class="row items-center">
-		<span class="col col-md-2 col-lg-1">Domain:</span>
-		<q-input outlined dense type="text" name="name" v-model="name" size="30" maxlength="250" class="col col-md-5 col-lg-3" />
-	</q-label>
-	<q-label class="row items-center">
-		<span class="col col-md-2 col-lg-1">Order:</span>
-		<q-input outlined dense type="number" name="order" v-model="order" step="1" class="col col-1" />
-	</q-label>
-	<q-label class="row items-start">
-		<span class="col col-md-2 col-lg-1 q-pt-sm">Description:</span>
-		<q-input outlined dense type="textarea" name="description" v-model="description" class="col col-md-5 col-lg-3"></q-input>
-	</q-label>
+	<div class="row items-center">
+		<q-input outlined dense type="text" name="name" v-model="name" label="Domain" size="30" maxlength="250" class="col col-md-5 col-lg-3 offset-md-2 offset-lg-1" />
+	</div>
+	<div class="row items-center">
+		<q-input outlined dense type="number" name="order" v-model="order" label="Order" step="1" class="col col-1 offset-md-2 offset-lg-1" />
+	</div>
+	<div class="row items-start">
+		<q-input outlined dense type="textarea" name="description" v-model="description" label="Description" class="col col-md-5 col-lg-3 offset-md-2 offset-lg-1"></q-input>
+	</div>
 	<div class="row q-mt-sm">
 		<q-btn type="submit" label="Submit" no-caps dense color="primary" class="col col-1 offset-md-2 offset-lg-1"></q-btn>
 	</div>
 </q-form>
 
 <div class="row">
+	<h3 class="text-primary">Domains</h3>
 	<q-list class="col col-12 col-md-10 col-lg-6">
-		<q-item-label header class="text-primary"><h3>Domains</h3></q-item-label>
 		@foreach(var d in domains ?? new List<Domain>())
 		{
 			<q-item>
 				<q-item-section top side>
-					<a href="?domainId=@d.DomainId">
+					<a href="?domainId=@d.DomainId" aria-label="Edit domain">
 						<q-icon name="edit" size="sm" class="text-secondary"></q-icon>
 					</a>
 				</q-item-section>
@@ -55,15 +52,15 @@
 </div>
 
 @section Scripts {
-	<script asp-add-nonce="true">
-		createVueApp({
-			data() {
-				return {
-					name: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Name)',
-					order: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Order.ToString())',
-					description: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Description)'
-				}
-			}
-		})
-	</script>
+    <script asp-add-nonce="true">
+        createVueApp({
+            data() {
+                return {
+                    name: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Name)',
+                    order: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Order.ToString())',
+                    description: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Description)'
+                }
+            }
+        })
+    </script>
 }
\ No newline at end of file
diff --git a/web/Areas/CTS/Views/ManageEpas.cshtml b/web/Areas/CTS/Views/ManageEpas.cshtml
index 8e8d4dc0..0a59cd08 100644
--- a/web/Areas/CTS/Views/ManageEpas.cshtml
+++ b/web/Areas/CTS/Views/ManageEpas.cshtml
@@ -1,4 +1,4 @@
-
+<h1>Manage EPAs</h1>
 <q-form @@submit="submitEpa()" v-if="showForm" class="q-mb-md">
     <h2>{{epa?.epaId ? 'Updating EPA' : 'Creating EPA'}}</h2>
     <div class="row">
@@ -67,7 +67,7 @@
             <template v-slot:default>
                 <span class="row fit">
                     <span class="col">
-                        <q-btn dense no-caps size="md" icon="edit" color="primary" @@click="selectEpa(epa)"></q-btn>
+                        <q-btn dense no-caps size="md" icon="edit" color="primary" aria-label="Edit EPA" @@click="selectEpa(epa)"></q-btn>
                     </span>
                     <span class="col">
                         <q-icon :name="epa.active ? 'check' : 'close'" :color="epa.active ? 'green' : 'red'" size="md"></q-icon>
diff --git a/web/Areas/CTS/Views/ManageLevels.cshtml b/web/Areas/CTS/Views/ManageLevels.cshtml
index b7951834..63e0bd77 100644
--- a/web/Areas/CTS/Views/ManageLevels.cshtml
+++ b/web/Areas/CTS/Views/ManageLevels.cshtml
@@ -1,4 +1,4 @@
-<h2>Manage Levels</h2>
+<h1>Manage Levels</h1>
 <q-form action="" @@submit="submitLevel">
     <div class="row items-start">
         <q-btn-toggle name="type" v-model="type" :options="levelTypes" size="large" outlined no-caps push toggle-color="primary" class="q-mb-md"></q-btn-toggle>
@@ -34,7 +34,7 @@
         </q-item-label>
         <q-item v-for="l in levels.filter(l => l.epa)">
             <q-item-section side top>
-                <q-btn dense no-caps size="md" color="primary" icon="edit" @@click="selectLevel(l)"></q-btn>
+                <q-btn dense no-caps size="md" color="primary" icon="edit" aria-label="Edit level" @@click="selectLevel(l)"></q-btn>
             </q-item-section>
             <q-item-section side top>
                 <q-icon :name="l.active ? 'check' : 'close'" :color="l.active ? 'green' : 'red'"></q-icon>
@@ -90,8 +90,8 @@
                 },
                 addLevel: function() { 
                     this.level = {
-                        levelName: "", description: "", active: true, order: 0, epa: this.type == "EPA", dops: this.type == "DOPS",
-                        clinical: this.type == "Clinical", course: this.type == "Course", milestone: this.type == "milestone"
+                        levelName: "", description: "", active: true, order: 0, epa: this.type === "EPA", dops: this.type === "DOPS",
+                        clinical: this.type === "Clinical", course: this.type === "Course", milestone: this.type === "milestone"
                     }
                 },
                 loadLevels: async function() {

From 6460455b2a3005fc7d37a93a8a92eef63db58d6a Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Wed, 1 Apr 2026 10:23:33 -0700
Subject: [PATCH 02/13] fix: address Copilot review feedback on CTS PR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix milestone type case mismatch in ManageLevels.cshtml ("milestone" → "Milestone")
- Fix serviceID → serviceId casing in Epa.cshtml (pre-existing bug, confirmed via API)
- Fix asp-asp-add-nonce typo → asp-add-nonce in Index.cshtml
- Move ManageEpas h1 outside v-if so page always has a heading
---
 VueApp/src/CTS/pages/ManageEpas.vue     | 3 ++-
 web/Areas/CTS/Views/Epa.cshtml          | 2 +-
 web/Areas/CTS/Views/Index.cshtml        | 2 +-
 web/Areas/CTS/Views/ManageLevels.cshtml | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/VueApp/src/CTS/pages/ManageEpas.vue b/VueApp/src/CTS/pages/ManageEpas.vue
index 6d13a46d..c21ad245 100644
--- a/VueApp/src/CTS/pages/ManageEpas.vue
+++ b/VueApp/src/CTS/pages/ManageEpas.vue
@@ -75,12 +75,13 @@ getEpas()
 </script>
 
 <template>
+    <h1>Manage EPAs</h1>
     <q-form
         @submit="submitEpa"
         v-if="showForm"
         class="q-mb-md"
     >
-        <h1>{{ epa.epaId ? "Updating EPA" : "Creating EPA" }}</h1>
+        <h2>{{ epa.epaId ? "Updating EPA" : "Creating EPA" }}</h2>
 
         <div class="row">
             <q-input
diff --git a/web/Areas/CTS/Views/Epa.cshtml b/web/Areas/CTS/Views/Epa.cshtml
index ba99a4a4..a51b9ebc 100644
--- a/web/Areas/CTS/Views/Epa.cshtml
+++ b/web/Areas/CTS/Views/Epa.cshtml
@@ -202,7 +202,7 @@
                     var schedLastWeek = scheduledServices.find(s => new Date(s.dateEnd).getTime() === sunday.getTime())
                     this.serviceThisWeek = schedThisWeek ? schedThisWeek.serviceId : 0
                     this.serviceLastWeek = schedLastWeek && schedLastWeek.serviceId !== this.serviceThisWeek ? schedLastWeek.serviceId : 0
-                    this.servicesScheduled = scheduledServices.map(s => s.serviceID)
+                    this.servicesScheduled = scheduledServices.map(s => s.serviceId)
 
                     //auto select a service - this week, then last week
                     if (this.serviceThisWeek > 0) {
diff --git a/web/Areas/CTS/Views/Index.cshtml b/web/Areas/CTS/Views/Index.cshtml
index c3da6047..66f471ae 100644
--- a/web/Areas/CTS/Views/Index.cshtml
+++ b/web/Areas/CTS/Views/Index.cshtml
@@ -5,6 +5,6 @@
 <h1>CTS Home</h1>
 
 @if (html != null) { Html.Raw(html); }
-<script asp-asp-add-nonce="true">
+<script asp-add-nonce="true">
     
 </script>
\ No newline at end of file
diff --git a/web/Areas/CTS/Views/ManageLevels.cshtml b/web/Areas/CTS/Views/ManageLevels.cshtml
index 63e0bd77..47741fba 100644
--- a/web/Areas/CTS/Views/ManageLevels.cshtml
+++ b/web/Areas/CTS/Views/ManageLevels.cshtml
@@ -91,7 +91,7 @@
                 addLevel: function() { 
                     this.level = {
                         levelName: "", description: "", active: true, order: 0, epa: this.type === "EPA", dops: this.type === "DOPS",
-                        clinical: this.type === "Clinical", course: this.type === "Course", milestone: this.type === "milestone"
+                        clinical: this.type === "Clinical", course: this.type === "Course", milestone: this.type === "Milestone"
                     }
                 },
                 loadLevels: async function() {

From a45ddb5a23de60eb4284739f01b0a2faa4bd7254 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Wed, 1 Apr 2026 10:29:35 -0700
Subject: [PATCH 03/13] fix: address second round of Copilot review feedback on
 CTS PR

- Fix service check in Epa.cshtml getEpas: != to !== change caused
  0 !== '' to evaluate true, use > 0 for correct numeric check
---
 web/Areas/CTS/Views/Epa.cshtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/Areas/CTS/Views/Epa.cshtml b/web/Areas/CTS/Views/Epa.cshtml
index a51b9ebc..3931fc72 100644
--- a/web/Areas/CTS/Views/Epa.cshtml
+++ b/web/Areas/CTS/Views/Epa.cshtml
@@ -215,7 +215,7 @@
                 //load epas and auto select if there's only one
                 getEpas: async function () {
                     this.selectedEpa = ""
-                    if (this.service !== '') {
+                    if (this.service > 0) {
                         await viperFetch(this, "epas?serviceId=" + this.service)
                             .then(data => this.epas = data.map(d => ({ label: d.name, value: d.epaId })))
                         if (this.epas.length === 1) {

From b0f52759c2c9621dd2408b408dcab33158eb6a42 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Wed, 1 Apr 2026 15:34:27 -0700
Subject: [PATCH 04/13] VPR-104 fix(a11y): make CTS edit button aria-labels
 unique per item

- Include item name in aria-label for edit buttons in list views
- Applies to ManageLevels, ManageEpas, ManageDomains, ManageRoles,
  and ManageBundles (both .cshtml and .vue versions)
- Makes controls distinguishable for screen reader users (WCAG 2.4.6)
---
 VueApp/src/CTS/pages/ManageBundles.vue   | 4 ++--
 VueApp/src/CTS/pages/ManageDomains.vue   | 2 +-
 VueApp/src/CTS/pages/ManageEpas.vue      | 2 +-
 VueApp/src/CTS/pages/ManageLevels.vue    | 2 +-
 VueApp/src/CTS/pages/ManageRoles.vue     | 2 +-
 web/Areas/CTS/Views/ManageDomains.cshtml | 2 +-
 web/Areas/CTS/Views/ManageEpas.cshtml    | 2 +-
 web/Areas/CTS/Views/ManageLevels.cshtml  | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/VueApp/src/CTS/pages/ManageBundles.vue b/VueApp/src/CTS/pages/ManageBundles.vue
index c9deb2f1..9acf5e6c 100644
--- a/VueApp/src/CTS/pages/ManageBundles.vue
+++ b/VueApp/src/CTS/pages/ManageBundles.vue
@@ -176,7 +176,7 @@ load()
                     dense
                     size="sm"
                     icon="edit"
-                    aria-label="Edit bundle"
+                    :aria-label="`Edit bundle: ${props.row.name}`"
                     @click="selectBundle(props.row)"
                     color="primary"
                 ></q-btn>
@@ -200,7 +200,7 @@ load()
                     class="q-mr-md"
                     icon="list"
                     color="primary"
-                    aria-label="View competencies"
+                    :aria-label="`View competencies for ${props.row.name}`"
                     :to="'ManageBundleCompetencies?bundleId=' + props.row.bundleId"
                 ></q-btn>
                 {{ props.row.competencyCount }}
diff --git a/VueApp/src/CTS/pages/ManageDomains.vue b/VueApp/src/CTS/pages/ManageDomains.vue
index 1722ecd1..f63031ed 100644
--- a/VueApp/src/CTS/pages/ManageDomains.vue
+++ b/VueApp/src/CTS/pages/ManageDomains.vue
@@ -142,7 +142,7 @@ getDomains()
                         dense
                         flat
                         class="secondary"
-                        aria-label="Edit domain"
+                        :aria-label="`Edit domain: ${d.name}`"
                         @click="domain = d"
                     ></q-btn>
                 </q-item-section>
diff --git a/VueApp/src/CTS/pages/ManageEpas.vue b/VueApp/src/CTS/pages/ManageEpas.vue
index c21ad245..27d3bb52 100644
--- a/VueApp/src/CTS/pages/ManageEpas.vue
+++ b/VueApp/src/CTS/pages/ManageEpas.vue
@@ -227,7 +227,7 @@ getEpas()
                                 size="md"
                                 icon="edit"
                                 color="primary"
-                                aria-label="Edit EPA"
+                                :aria-label="`Edit EPA: ${epaItem.name}`"
                                 @click="selectEpa(epaItem)"
                             />
                         </span>
diff --git a/VueApp/src/CTS/pages/ManageLevels.vue b/VueApp/src/CTS/pages/ManageLevels.vue
index 6f0d6a8d..50ca4010 100644
--- a/VueApp/src/CTS/pages/ManageLevels.vue
+++ b/VueApp/src/CTS/pages/ManageLevels.vue
@@ -216,7 +216,7 @@ loadLevels()
                         size="md"
                         color="primary"
                         icon="edit"
-                        aria-label="Edit level"
+                        :aria-label="`Edit level: ${l.levelName}`"
                         @click="editLevel(l)"
                     ></q-btn>
                 </q-item-section>
diff --git a/VueApp/src/CTS/pages/ManageRoles.vue b/VueApp/src/CTS/pages/ManageRoles.vue
index 82a46c1f..32f231b6 100644
--- a/VueApp/src/CTS/pages/ManageRoles.vue
+++ b/VueApp/src/CTS/pages/ManageRoles.vue
@@ -89,7 +89,7 @@ load()
             size="sm"
             icon="edit"
             color="primary"
-            aria-label="Edit role"
+            :aria-label="`Edit role: ${r.name}`"
             @click="role = r"
             class="q-mt-xs q-mr-md"
         ></q-btn>
diff --git a/web/Areas/CTS/Views/ManageDomains.cshtml b/web/Areas/CTS/Views/ManageDomains.cshtml
index 111002b9..d793f9cb 100644
--- a/web/Areas/CTS/Views/ManageDomains.cshtml
+++ b/web/Areas/CTS/Views/ManageDomains.cshtml
@@ -40,7 +40,7 @@
 		{
 			<q-item>
 				<q-item-section top side>
-					<a href="?domainId=@d.DomainId" aria-label="Edit domain">
+					<a href="?domainId=@d.DomainId" aria-label="Edit domain: @d.Name">
 						<q-icon name="edit" size="sm" class="text-secondary"></q-icon>
 					</a>
 				</q-item-section>
diff --git a/web/Areas/CTS/Views/ManageEpas.cshtml b/web/Areas/CTS/Views/ManageEpas.cshtml
index 0a59cd08..3b859e30 100644
--- a/web/Areas/CTS/Views/ManageEpas.cshtml
+++ b/web/Areas/CTS/Views/ManageEpas.cshtml
@@ -67,7 +67,7 @@
             <template v-slot:default>
                 <span class="row fit">
                     <span class="col">
-                        <q-btn dense no-caps size="md" icon="edit" color="primary" aria-label="Edit EPA" @@click="selectEpa(epa)"></q-btn>
+                        <q-btn dense no-caps size="md" icon="edit" color="primary" :aria-label="'Edit EPA: ' + epa.name" @@click="selectEpa(epa)"></q-btn>
                     </span>
                     <span class="col">
                         <q-icon :name="epa.active ? 'check' : 'close'" :color="epa.active ? 'green' : 'red'" size="md"></q-icon>
diff --git a/web/Areas/CTS/Views/ManageLevels.cshtml b/web/Areas/CTS/Views/ManageLevels.cshtml
index 47741fba..a7e687d1 100644
--- a/web/Areas/CTS/Views/ManageLevels.cshtml
+++ b/web/Areas/CTS/Views/ManageLevels.cshtml
@@ -34,7 +34,7 @@
         </q-item-label>
         <q-item v-for="l in levels.filter(l => l.epa)">
             <q-item-section side top>
-                <q-btn dense no-caps size="md" color="primary" icon="edit" aria-label="Edit level" @@click="selectLevel(l)"></q-btn>
+                <q-btn dense no-caps size="md" color="primary" icon="edit" :aria-label="'Edit level: ' + l.levelName" @@click="selectLevel(l)"></q-btn>
             </q-item-section>
             <q-item-section side top>
                 <q-icon :name="l.active ? 'check' : 'close'" :color="l.active ? 'green' : 'red'"></q-icon>

From d7e583f55357d014372c8a52f9408a7bfc1a59b7 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Thu, 2 Apr 2026 11:24:32 -0700
Subject: [PATCH 05/13] VPR-104 fix(a11y): align CTS button and badge colors to
 UC Davis brand palette

- Replace color="green" with color="positive" (Redwood) on ~15 add/create buttons
- Replace color="red"/"red-5"/"red-7" with color="negative" (Merlot) on ~12 delete buttons
- Replace color="blue" with color="primary" on Last Week badges
- Add text-color="dark" to 3 info-colored chips/buttons for AA contrast
- Fix duplicate text-color attributes in CompetenciesBundleReport
- Remove redundant global comments and unused function parameters
---
 VueApp/src/CTS/components/ServiceSelect.vue        |  4 ++--
 VueApp/src/CTS/pages/CompetenciesBundleReport.vue  |  4 ++--
 VueApp/src/CTS/pages/CourseStudents.vue            |  6 +++---
 VueApp/src/CTS/pages/ManageBundleCompetencies.vue  | 10 +++++-----
 VueApp/src/CTS/pages/ManageBundles.vue             |  8 ++++----
 VueApp/src/CTS/pages/ManageCompetencies.vue        |  8 ++++----
 VueApp/src/CTS/pages/ManageDomains.vue             |  3 ++-
 VueApp/src/CTS/pages/ManageEpas.vue                |  4 ++--
 VueApp/src/CTS/pages/ManageLevels.vue              |  2 +-
 VueApp/src/CTS/pages/ManageMilestones.vue          |  2 +-
 VueApp/src/CTS/pages/ManageRoles.vue               |  2 +-
 VueApp/src/CTS/pages/ManageSessionCompetencies.vue |  8 ++++----
 web/Areas/CTS/Views/Epa.cshtml                     |  8 ++++----
 web/Areas/CTS/Views/ManageEpas.cshtml              |  5 ++---
 web/Areas/CTS/Views/ManageLevels.cshtml            |  2 +-
 15 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/VueApp/src/CTS/components/ServiceSelect.vue b/VueApp/src/CTS/components/ServiceSelect.vue
index 02e28621..73a5ed6b 100644
--- a/VueApp/src/CTS/components/ServiceSelect.vue
+++ b/VueApp/src/CTS/components/ServiceSelect.vue
@@ -95,13 +95,13 @@ void getServices()
                     side
                     v-if="scope.opt.thisWeek"
                 >
-                    <q-badge color="green"> This Week </q-badge>
+                    <q-badge color="positive"> This Week </q-badge>
                 </q-item-section>
                 <q-item-section
                     side
                     v-if="scope.opt.lastWeek && !scope.opt.thisWeek"
                 >
-                    <q-badge color="blue"> Last Week </q-badge>
+                    <q-badge color="primary"> Last Week </q-badge>
                 </q-item-section>
                 <q-item-section
                     side
diff --git a/VueApp/src/CTS/pages/CompetenciesBundleReport.vue b/VueApp/src/CTS/pages/CompetenciesBundleReport.vue
index 5f12f28b..9b7d8c2a 100644
--- a/VueApp/src/CTS/pages/CompetenciesBundleReport.vue
+++ b/VueApp/src/CTS/pages/CompetenciesBundleReport.vue
@@ -238,7 +238,7 @@ onMounted(() => {
                                     v-for="bundle in props.value"
                                     :key="bundle.bundleId"
                                     color="info"
-                                    text-color="white"
+                                    text-color="dark"
                                     size="sm"
                                     dense
                                     class="q-ma-xs"
@@ -301,7 +301,7 @@ onMounted(() => {
                                             v-for="bundle in props.row.bundles"
                                             :key="bundle.bundleId"
                                             color="info"
-                                            text-color="white"
+                                            text-color="dark"
                                             size="sm"
                                             dense
                                         >
diff --git a/VueApp/src/CTS/pages/CourseStudents.vue b/VueApp/src/CTS/pages/CourseStudents.vue
index f276dfa8..4d5453ce 100644
--- a/VueApp/src/CTS/pages/CourseStudents.vue
+++ b/VueApp/src/CTS/pages/CourseStudents.vue
@@ -60,7 +60,7 @@ const student = ref("")
                             <q-btn
                                 dense
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 flat
                                 size="sm"
                             ></q-btn>
@@ -90,7 +90,7 @@ const student = ref("")
                             <q-btn
                                 dense
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 flat
                                 size="sm"
                             ></q-btn>
@@ -120,7 +120,7 @@ const student = ref("")
                             <q-btn
                                 dense
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 flat
                                 size="sm"
                             ></q-btn>
diff --git a/VueApp/src/CTS/pages/ManageBundleCompetencies.vue b/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
index c112c29c..cb56dba1 100644
--- a/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
@@ -206,7 +206,7 @@ load()
             label="Add Group"
             @click="showGroupForm = true"
             class="q-mt-lg q-px-sm"
-            color="green"
+            color="positive"
             icon="add"
         ></q-btn>
         <div
@@ -253,7 +253,7 @@ load()
                         v-if="bundleCompetencyGroup?.bundleCompetencyGroupId"
                         type="button"
                         @click="removeBundleCompetencyGroup()"
-                        color="red-5"
+                        color="negative"
                         dense
                         class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                         label="Delete"
@@ -304,7 +304,7 @@ load()
                     type="submit"
                     label="Add"
                     icon="add"
-                    color="green"
+                    color="positive"
                     class="col-auto q-ml-md q-px-sm"
                 ></q-btn>
             </div>
@@ -423,7 +423,7 @@ load()
                 <q-icon
                     v-if="props.row.levels.findIndex((l: any) => l.levelId === level.levelId) > -1"
                     name="check"
-                    color="green"
+                    color="positive"
                 ></q-icon>
             </q-td>
         </template>
@@ -441,7 +441,7 @@ load()
                     dense
                     size="sm"
                     icon="delete"
-                    color="red-5"
+                    color="negative"
                     @click="removeBundleCompetency(props.row)"
                 ></q-btn>
             </q-td>
diff --git a/VueApp/src/CTS/pages/ManageBundles.vue b/VueApp/src/CTS/pages/ManageBundles.vue
index 9acf5e6c..7f770cc7 100644
--- a/VueApp/src/CTS/pages/ManageBundles.vue
+++ b/VueApp/src/CTS/pages/ManageBundles.vue
@@ -150,7 +150,7 @@ load()
                     v-if="bundle?.bundleId"
                     type="button"
                     @click="removeBundle()"
-                    color="red-5"
+                    color="negative"
                     dense
                     class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                     label="Delete"
@@ -211,7 +211,7 @@ load()
                 <q-icon
                     v-if="props.row.clinical"
                     name="check"
-                    color="green"
+                    color="positive"
                 />
             </q-td>
         </template>
@@ -220,7 +220,7 @@ load()
                 <q-icon
                     v-if="props.row.assessment"
                     name="check"
-                    color="green"
+                    color="positive"
                 />
             </q-td>
         </template>
@@ -229,7 +229,7 @@ load()
                 <q-icon
                     v-if="props.row.milestone"
                     name="check"
-                    color="green"
+                    color="positive"
                 />
             </q-td>
         </template>
diff --git a/VueApp/src/CTS/pages/ManageCompetencies.vue b/VueApp/src/CTS/pages/ManageCompetencies.vue
index 78e6776c..5c1934c6 100644
--- a/VueApp/src/CTS/pages/ManageCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageCompetencies.vue
@@ -210,7 +210,7 @@ load()
                         no-caps
                         label="Delete"
                         v-if="selectedComp.competencyId != null"
-                        color="red-5"
+                        color="negative"
                         class="q-px-md q-mx-md col"
                         @click="deleteComp()"
                     ></q-btn>
@@ -254,7 +254,7 @@ load()
                 dense
                 no-caps
                 class="q-px-sm q-ml-md"
-                color="green"
+                color="positive"
                 icon="add"
                 label="Add Competency"
                 @click="showForm = true"
@@ -280,7 +280,7 @@ load()
                         flat
                         size="sm"
                         icon="add"
-                        color="green"
+                        color="positive"
                         @click="addChild(prop.node.comp)"
                         title="Add child of this competency"
                     ></q-btn>
@@ -305,7 +305,7 @@ load()
                     }}</span>
                     <q-icon
                         name="school"
-                        color="green"
+                        color="positive"
                         v-if="prop.node.comp.canLinkToStudent"
                         class="q-ml-md"
                     ></q-icon>
diff --git a/VueApp/src/CTS/pages/ManageDomains.vue b/VueApp/src/CTS/pages/ManageDomains.vue
index f63031ed..bda3596c 100644
--- a/VueApp/src/CTS/pages/ManageDomains.vue
+++ b/VueApp/src/CTS/pages/ManageDomains.vue
@@ -107,7 +107,7 @@ getDomains()
                 label="Delete"
                 no-caps
                 dense
-                color="red-7"
+                color="negative"
                 class="col col-4 col-lg-1 q-ml-md"
             ></q-btn>
             <q-btn
@@ -117,6 +117,7 @@ getDomains()
                 no-caps
                 dense
                 color="info"
+                text-color="dark"
                 class="col col-4 col-lg-1 q-ml-md"
             ></q-btn>
         </div>
diff --git a/VueApp/src/CTS/pages/ManageEpas.vue b/VueApp/src/CTS/pages/ManageEpas.vue
index 27d3bb52..5edf7b87 100644
--- a/VueApp/src/CTS/pages/ManageEpas.vue
+++ b/VueApp/src/CTS/pages/ManageEpas.vue
@@ -152,7 +152,7 @@ getEpas()
                 no-caps
                 type="button"
                 label="Delete EPA"
-                color="red"
+                color="negative"
                 @click="deleteEpa()"
                 v-if="epa?.epaId"
                 class="q-mt-sm q-ml-lg col col-4 col-md-4 col-lg-1"
@@ -166,7 +166,7 @@ getEpas()
             no-caps
             size="md"
             label="Add EPA"
-            color="green"
+            color="positive"
             @click="showForm = true"
         />
     </div>
diff --git a/VueApp/src/CTS/pages/ManageLevels.vue b/VueApp/src/CTS/pages/ManageLevels.vue
index 50ca4010..dc0389a3 100644
--- a/VueApp/src/CTS/pages/ManageLevels.vue
+++ b/VueApp/src/CTS/pages/ManageLevels.vue
@@ -186,7 +186,7 @@ loadLevels()
                     no-caps
                     type="button"
                     label="Delete Level"
-                    color="red"
+                    color="negative"
                     class="q-mt-sm q-ml-lg col col-4 col-md-1"
                     @click="deleteLevel"
                 ></q-btn>
diff --git a/VueApp/src/CTS/pages/ManageMilestones.vue b/VueApp/src/CTS/pages/ManageMilestones.vue
index dcf4840b..fe2f1f9a 100644
--- a/VueApp/src/CTS/pages/ManageMilestones.vue
+++ b/VueApp/src/CTS/pages/ManageMilestones.vue
@@ -125,7 +125,7 @@ load()
                     icon="add"
                     label="Add Milestone"
                     type="submit"
-                    color="green"
+                    color="positive"
                 ></q-btn>
             </div>
         </div>
diff --git a/VueApp/src/CTS/pages/ManageRoles.vue b/VueApp/src/CTS/pages/ManageRoles.vue
index 32f231b6..b5cbf9c3 100644
--- a/VueApp/src/CTS/pages/ManageRoles.vue
+++ b/VueApp/src/CTS/pages/ManageRoles.vue
@@ -71,7 +71,7 @@ load()
                 v-if="role?.roleId"
                 type="button"
                 @click="removeRole()"
-                color="red-5"
+                color="negative"
                 dense
                 class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                 label="Delete"
diff --git a/VueApp/src/CTS/pages/ManageSessionCompetencies.vue b/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
index 469fe8bb..8e830b5f 100644
--- a/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
@@ -276,7 +276,7 @@ if (!courseId || !sessionId) {
             <q-btn
                 dense
                 no-caps
-                color="green"
+                color="positive"
                 icon="add"
                 label="Add Competency"
                 class="q-px-md"
@@ -325,7 +325,7 @@ if (!courseId || !sessionId) {
                                 <td>
                                     <q-icon
                                         name="check"
-                                        color="green"
+                                        color="positive"
                                         v-if="lc.levels.findIndex((l: Level) => l.levelName == level) >= 0"
                                     ></q-icon>
                                 </td>
@@ -346,7 +346,7 @@ if (!courseId || !sessionId) {
                             <td class="text-center">
                                 <q-icon
                                     name="check"
-                                    color="green"
+                                    color="positive"
                                     v-if="c.levels.findIndex((l: Level) => l.levelName == level) >= 0"
                                 ></q-icon>
                             </td>
@@ -364,7 +364,7 @@ if (!courseId || !sessionId) {
                                 dense
                                 size="sm"
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 @click="delComp(c)"
                             ></q-btn>
                         </td>
diff --git a/web/Areas/CTS/Views/Epa.cshtml b/web/Areas/CTS/Views/Epa.cshtml
index 3931fc72..5d7aa488 100644
--- a/web/Areas/CTS/Views/Epa.cshtml
+++ b/web/Areas/CTS/Views/Epa.cshtml
@@ -16,10 +16,10 @@
                     <template v-slot:option="scope">
                         <q-item v-bind="scope.itemProps">
                             <q-item-section side v-if="serviceThisWeek == scope.opt.value">
-                                <q-badge color="green">This Week</q-badge>
+                                <q-badge color="positive">This Week</q-badge>
                             </q-item-section>
                             <q-item-section side v-if="serviceLastWeek == scope.opt.value">
-                                <q-badge color="blue">Last Week</q-badge>
+                                <q-badge color="primary">Last Week</q-badge>
                             </q-item-section>
                             <q-item-section side v-if="servicesScheduled.indexOf(scope.opt.value) >= 0">
                                 <q-badge color="yellow">Scheduled</q-badge>
@@ -284,7 +284,7 @@
                         this.success = true
                     }
                 },
-                studentSearch: function (val, update, _abort) {
+                studentSearch: function (val, update) {
                     if (val === '') {
                         update(() => this.getStudents())
                         return
@@ -315,7 +315,7 @@
                 },
                 //set student list when student type is selected
                 studentOptionsType: {
-                    handler(_v) {
+                    handler() {
                         this.getStudents()
                     }
                 },
diff --git a/web/Areas/CTS/Views/ManageEpas.cshtml b/web/Areas/CTS/Views/ManageEpas.cshtml
index 3b859e30..9644c539 100644
--- a/web/Areas/CTS/Views/ManageEpas.cshtml
+++ b/web/Areas/CTS/Views/ManageEpas.cshtml
@@ -33,7 +33,7 @@
                v-if="epa?.epaId"
                class="q-mt-sm q-ml-lg col col-4 col-md-4 col-lg-1"
 ></q-btn>
-        <q-btn dense no-caps type="button" label="Delete EPA" color="red" @@click="deleteEpa()"
+        <q-btn dense no-caps type="button" label="Delete EPA" color="negative" @@click="deleteEpa()"
                v-if="epa?.epaId"
                class="q-mt-sm q-ml-lg col col-4 col-md-4 col-lg-1"
 ></q-btn>
@@ -43,7 +43,7 @@
 
 <h3>
     Add New EPA
-    <q-btn no-caps size="md" label="Add EPA" color="green" @@click="this.showForm=true" class="q-ml-sm"></q-btn>
+    <q-btn no-caps size="md" label="Add EPA" color="positive" @@click="this.showForm=true" class="q-ml-sm"></q-btn>
 </h3>
 
 <q-list separator>
@@ -94,7 +94,6 @@
 
 @section Scripts {
     <script asp-add-nonce="true">
-        /* global createVueApp, viperFetch */
         createVueApp({
             data() {
                 return {
diff --git a/web/Areas/CTS/Views/ManageLevels.cshtml b/web/Areas/CTS/Views/ManageLevels.cshtml
index a7e687d1..6356ebbc 100644
--- a/web/Areas/CTS/Views/ManageLevels.cshtml
+++ b/web/Areas/CTS/Views/ManageLevels.cshtml
@@ -21,7 +21,7 @@
         </div>
         <div class="row">
             <q-btn dense no-caps type="submit" :label="(level?.levelId ? 'Update' : 'Add') + ' Level'" color="primary" class="q-mt-sm col col-4 col-md-1"></q-btn>
-            <q-btn dense no-caps type="button" label="Delete Level" color="red" class="q-mt-sm q-ml-lg col col-4 col-md-1"></q-btn>
+            <q-btn dense no-caps type="button" label="Delete Level" color="negative" class="q-mt-sm q-ml-lg col col-4 col-md-1"></q-btn>
         </div>
     </div>
 

From a1b7a20a3a5e47a3dd49085f2058c8859b1fd7a4 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Thu, 2 Apr 2026 11:56:20 -0700
Subject: [PATCH 06/13] VPR-104 fix(a11y): add dialog close buttons and delete
 confirmations to CTS

- Add X close button with aria-label="Close dialog" to 4 CTS dialogs
  (ManageBundleCompetencies, ManageCompetencies, ManageSessionCompetencies, MyAssessments)
- Add $q.dialog() delete confirmation to 8 CTS delete functions
  (ManageDomains, ManageEpas, ManageCompetencies, ManageBundles,
   ManageRoles, ManageLevels, ManageBundleCompetencies x2)
---
 .../CTS/pages/ManageBundleCompetencies.vue    | 57 ++++++++++++++-----
 VueApp/src/CTS/pages/ManageBundles.vue        | 20 +++++--
 VueApp/src/CTS/pages/ManageCompetencies.vue   | 34 ++++++++---
 VueApp/src/CTS/pages/ManageDomains.vue        | 24 +++++---
 VueApp/src/CTS/pages/ManageEpas.vue           | 22 +++++--
 VueApp/src/CTS/pages/ManageLevels.vue         | 22 +++++--
 VueApp/src/CTS/pages/ManageRoles.vue          | 20 +++++--
 .../CTS/pages/ManageSessionCompetencies.vue   | 15 ++++-
 VueApp/src/CTS/pages/MyAssessments.vue        | 13 ++++-
 9 files changed, 174 insertions(+), 53 deletions(-)

diff --git a/VueApp/src/CTS/pages/ManageBundleCompetencies.vue b/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
index cb56dba1..8466c265 100644
--- a/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, inject } from "vue"
 import type { Ref } from "vue"
-import type { QTableProps } from "quasar"
+import { useQuasar, type QTableProps } from "quasar"
 import { useRoute } from "vue-router"
 import { useFetch } from "@/composables/ViperFetch"
 import type {
@@ -14,6 +14,7 @@ import type {
     Role,
 } from "@/CTS/types"
 
+const $q = useQuasar()
 const { get, post, put, del } = useFetch()
 const apiUrl = inject("apiURL")
 const route = useRoute()
@@ -140,11 +141,18 @@ async function updateBundleCompetency() {
         clearComp()
     }
 }
-async function removeBundleCompetency(comp: BundleCompetency) {
-    var result = await del(apiUrl + "cts/bundles/" + bundleId + "/competencies/" + comp.bundleCompetencyId)
-    if (result.success) {
-        loadBundleComps()
-    }
+function removeBundleCompetency(comp: BundleCompetency) {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to remove this competency from the bundle?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        var result = await del(apiUrl + "cts/bundles/" + bundleId + "/competencies/" + comp.bundleCompetencyId)
+        if (result.success) {
+            loadBundleComps()
+        }
+    })
 }
 function clearComp() {
     bundleCompetency.value = structuredClone(defaultBundleCompetency)
@@ -185,14 +193,23 @@ function editGroup(group: BundleCompetencyGroup) {
     bundleCompetencyGroup.value = group
     showGroupForm.value = true
 }
-async function removeBundleCompetencyGroup() {
-    let success = (
-        await del(apiUrl + "cts/bundles/" + bundleId + "/groups/" + bundleCompetencyGroup.value.bundleCompetencyGroupId)
-    ).success
-    if (success) {
-        loadBundleComps()
-        clearBundleCompetencyGroup()
-    }
+function removeBundleCompetencyGroup() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to remove this competency group from the bundle?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        let success = (
+            await del(
+                apiUrl + "cts/bundles/" + bundleId + "/groups/" + bundleCompetencyGroup.value.bundleCompetencyGroupId,
+            )
+        ).success
+        if (success) {
+            loadBundleComps()
+            clearBundleCompetencyGroup()
+        }
+    })
 }
 
 load()
@@ -314,6 +331,18 @@ load()
     <q-dialog v-model="showCompForm">
         <q-card class="q-pa-lg">
             <q-form @submit="updateBundleCompetency()">
+                <q-card-section class="row items-center q-pb-none">
+                    <div class="text-h6">Edit Competency</div>
+                    <q-space />
+                    <q-btn
+                        icon="close"
+                        flat
+                        round
+                        dense
+                        aria-label="Close dialog"
+                        v-close-popup
+                    />
+                </q-card-section>
                 <q-card-section>
                     <div class="row">
                         <div class="col-12">
diff --git a/VueApp/src/CTS/pages/ManageBundles.vue b/VueApp/src/CTS/pages/ManageBundles.vue
index 7f770cc7..5991d825 100644
--- a/VueApp/src/CTS/pages/ManageBundles.vue
+++ b/VueApp/src/CTS/pages/ManageBundles.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, inject } from "vue"
 import type { Ref } from "vue"
-import type { QTableProps } from "quasar"
+import { useQuasar, type QTableProps } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
+const $q = useQuasar()
 const { get, post, put, del } = useFetch()
 
 import type { Bundle, Role } from "@/CTS/types"
@@ -72,11 +73,18 @@ function clearBundle() {
     load()
 }
 
-async function removeBundle() {
-    let r = await del(apiUrl + "cts/bundles/" + bundle.value.bundleId)
-    if (r.success) {
-        clearBundle()
-    }
+function removeBundle() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this bundle?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        let r = await del(apiUrl + "cts/bundles/" + bundle.value.bundleId)
+        if (r.success) {
+            clearBundle()
+        }
+    })
 }
 
 load()
diff --git a/VueApp/src/CTS/pages/ManageCompetencies.vue b/VueApp/src/CTS/pages/ManageCompetencies.vue
index 5c1934c6..60117a5c 100644
--- a/VueApp/src/CTS/pages/ManageCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageCompetencies.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { inject, ref, watch } from "vue"
 import type { Ref } from "vue"
-import type { QTreeNode } from "quasar"
+import { useQuasar, type QTreeNode } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
 import type { Competency, Domain } from "@/CTS/types"
 
+const $q = useQuasar()
 const { get, post, put, del } = useFetch()
 const apiUrl = inject("apiURL")
 const domains = ref([]) as Ref<Domain[]>
@@ -60,12 +61,19 @@ async function submitComp() {
     }
 }
 
-async function deleteComp() {
-    const r = await del(apiUrl + "cts/competencies/" + selectedComp.value.competencyId, selectedComp.value)
-    if (r.success) {
-        await load()
-        clearComp()
-    }
+function deleteComp() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this competency?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        const r = await del(apiUrl + "cts/competencies/" + selectedComp.value.competencyId, selectedComp.value)
+        if (r.success) {
+            await load()
+            clearComp()
+        }
+    })
 }
 
 function addChild(comp: Competency) {
@@ -120,6 +128,18 @@ load()
             style="width: 500px; max-width: 80vw"
             class="q-pa-sm"
         >
+            <q-card-section class="row items-center q-pb-none">
+                <div class="text-h6">{{ selectedComp?.competencyId ? "Edit" : "Add" }} Competency</div>
+                <q-space />
+                <q-btn
+                    icon="close"
+                    flat
+                    round
+                    dense
+                    aria-label="Close dialog"
+                    v-close-popup
+                />
+            </q-card-section>
             <q-form
                 @submit="submitComp"
                 v-model="selectedComp"
diff --git a/VueApp/src/CTS/pages/ManageDomains.vue b/VueApp/src/CTS/pages/ManageDomains.vue
index bda3596c..6b37abcc 100644
--- a/VueApp/src/CTS/pages/ManageDomains.vue
+++ b/VueApp/src/CTS/pages/ManageDomains.vue
@@ -7,8 +7,11 @@ type DomainData = {
 }
 import type { Ref } from "vue"
 import { ref, inject } from "vue"
+import { useQuasar } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
 
+const $q = useQuasar()
+
 const domain = ref({
     domainId: 0,
     order: null,
@@ -38,13 +41,20 @@ async function save() {
 function clearDomain() {
     domain.value = { domainId: 0, order: null, name: "", description: "" }
 }
-async function deleteDomain() {
-    const { del } = useFetch()
-    const r = await del(baseUrl + "/" + domain.value.domainId)
-    if (r.success) {
-        clearDomain()
-        await getDomains()
-    }
+function deleteDomain() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this domain?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        const { del } = useFetch()
+        const r = await del(baseUrl + "/" + domain.value.domainId)
+        if (r.success) {
+            clearDomain()
+            await getDomains()
+        }
+    })
 }
 
 getDomains()
diff --git a/VueApp/src/CTS/pages/ManageEpas.vue b/VueApp/src/CTS/pages/ManageEpas.vue
index 5edf7b87..2f2d2cd8 100644
--- a/VueApp/src/CTS/pages/ManageEpas.vue
+++ b/VueApp/src/CTS/pages/ManageEpas.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import type { Ref } from "vue"
 import { ref, inject } from "vue"
+import { useQuasar } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
 import type { Epa, Service } from "@/CTS/types"
 
+const $q = useQuasar()
+
 const showForm = ref(false)
 const epas = ref([]) as Ref<Epa[]>
 const services = ref([]) as Ref<Service[]>
@@ -58,12 +61,19 @@ async function submitEpa() {
         getEpas()
     }
 }
-async function deleteEpa() {
-    const { del } = useFetch()
-    const r = await del(epaUrl + "/" + epa.value.epaId)
-    if (r.success) {
-        getEpas()
-    }
+function deleteEpa() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this EPA?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        const { del } = useFetch()
+        const r = await del(epaUrl + "/" + epa.value.epaId)
+        if (r.success) {
+            getEpas()
+        }
+    })
 }
 async function clearEpa() {
     epa.value = { epaId: null, order: null, name: "", description: "", active: false, services: [] }
diff --git a/VueApp/src/CTS/pages/ManageLevels.vue b/VueApp/src/CTS/pages/ManageLevels.vue
index dc0389a3..b7725761 100644
--- a/VueApp/src/CTS/pages/ManageLevels.vue
+++ b/VueApp/src/CTS/pages/ManageLevels.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import type { Ref } from "vue"
 import { ref, inject } from "vue"
+import { useQuasar } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
 
+const $q = useQuasar()
+
 type Level = {
     levelId: number
     levelName: string
@@ -68,12 +71,19 @@ async function submitLevel() {
     }
 }
 
-async function deleteLevel() {
-    const { del } = useFetch()
-    const r = await del(levelUrl + "/" + level.value.levelId)
-    if (r.success) {
-        loadLevels()
-    }
+function deleteLevel() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this level?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        const { del } = useFetch()
+        const r = await del(levelUrl + "/" + level.value.levelId)
+        if (r.success) {
+            loadLevels()
+        }
+    })
 }
 
 function filterLevels() {
diff --git a/VueApp/src/CTS/pages/ManageRoles.vue b/VueApp/src/CTS/pages/ManageRoles.vue
index b5cbf9c3..8dd4fb6e 100644
--- a/VueApp/src/CTS/pages/ManageRoles.vue
+++ b/VueApp/src/CTS/pages/ManageRoles.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref, inject } from "vue"
 import type { Ref } from "vue"
+import { useQuasar } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
+
+const $q = useQuasar()
 const { get, post, put, del } = useFetch()
 
 const apiUrl = inject("apiURL")
@@ -22,11 +25,18 @@ async function save() {
     }
 }
 
-async function removeRole() {
-    let r = await del(apiUrl + "cts/roles/" + role.value.roleId)
-    if (r.success) {
-        clearRole()
-    }
+function removeRole() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this role?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        let r = await del(apiUrl + "cts/roles/" + role.value.roleId)
+        if (r.success) {
+            clearRole()
+        }
+    })
 }
 
 function clearRole() {
diff --git a/VueApp/src/CTS/pages/ManageSessionCompetencies.vue b/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
index 8e830b5f..d02f056d 100644
--- a/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
@@ -184,7 +184,20 @@ if (!courseId || !sessionId) {
             style="width: 800px; max-width: 80vw"
             class="q-pa-md"
         >
-            <h3>{{ compAddUpdate?.sessionCompetencyId ? "Update" : "Add" }} Session Competency</h3>
+            <q-card-section class="row items-center q-pb-none">
+                <div class="text-h6">
+                    {{ compAddUpdate?.sessionCompetencyId ? "Update" : "Add" }} Session Competency
+                </div>
+                <q-space />
+                <q-btn
+                    icon="close"
+                    flat
+                    round
+                    dense
+                    aria-label="Close dialog"
+                    v-close-popup
+                />
+            </q-card-section>
             <q-form @submit="submitSessionComp">
                 <div class="row">
                     <div class="col-12">
diff --git a/VueApp/src/CTS/pages/MyAssessments.vue b/VueApp/src/CTS/pages/MyAssessments.vue
index 9c49fa61..ea605c85 100644
--- a/VueApp/src/CTS/pages/MyAssessments.vue
+++ b/VueApp/src/CTS/pages/MyAssessments.vue
@@ -119,8 +119,19 @@ load()
 
         <q-dialog v-model="showAssessmentDetail">
             <q-card style="width: 700px; max-width: 80vw">
-                <q-card-section>
+                <q-card-section class="row items-center q-pb-none">
                     <div class="text-h6">Assessment Details</div>
+                    <q-space />
+                    <q-btn
+                        icon="close"
+                        flat
+                        round
+                        dense
+                        aria-label="Close dialog"
+                        v-close-popup
+                    />
+                </q-card-section>
+                <q-card-section>
                     <div class="row">
                         <div class="col-12"><strong>EPA:</strong> {{ epaAssessment.epaName }}</div>
                     </div>

From 5e31dfd4c5f96573703884679c616e230de6b3ed Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Tue, 7 Apr 2026 11:45:59 -0700
Subject: [PATCH 07/13] =?UTF-8?q?VPR-104=20fix(a11y):=20CTS=20followup=20?=
 =?UTF-8?q?=E2=80=94=20contrast,=20banners,=20broken=20forms?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace hardcoded blue (#1E88E5) with var(--q-secondary) in
  LevelSelect for WCAG AA contrast compliance (~7.4:1)
- Replace non-existent q-label with div in ManageDomains
- Fix Promise.resolve → Promise.all in ManageCompetencies load()
  and add null guard for failed hierarchy API
- Migrate q-banner to StatusBanner in AssessmentEpa/AssessmentEpaEdit
- Fix ManageRoles 400 error: initialize role with roleId: 0 to
  satisfy required int on RoleDto
- Fix ManageMilestones 400 error: add missing competencyCount to
  bundle payload
---
 VueApp/src/CTS/components/LevelSelect.vue   |  6 +++---
 VueApp/src/CTS/pages/AssessmentEpa.vue      | 17 +++++------------
 VueApp/src/CTS/pages/AssessmentEpaEdit.vue  | 17 +++++------------
 VueApp/src/CTS/pages/ManageCompetencies.vue |  9 ++++++---
 VueApp/src/CTS/pages/ManageDomains.vue      | 12 ++++++------
 VueApp/src/CTS/pages/ManageMilestones.vue   |  1 +
 VueApp/src/CTS/pages/ManageRoles.vue        |  4 ++--
 7 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/VueApp/src/CTS/components/LevelSelect.vue b/VueApp/src/CTS/components/LevelSelect.vue
index 09669f8c..110af5cc 100644
--- a/VueApp/src/CTS/components/LevelSelect.vue
+++ b/VueApp/src/CTS/components/LevelSelect.vue
@@ -143,14 +143,14 @@ getLevels()
 
 <style scoped>
 div.levelSelection button {
-    border: 1px solid rgb(30 136 229);
-    color: rgb(30 136 229);
+    border: 1px solid var(--q-secondary);
+    color: var(--q-secondary);
     width: 100%;
     margin-bottom: 0.2rem;
 }
 
 div.levelSelection button.selectedLevel {
-    background-color: rgb(30 136 229);
+    background-color: var(--q-secondary);
     color: white;
 }
 
diff --git a/VueApp/src/CTS/pages/AssessmentEpa.vue b/VueApp/src/CTS/pages/AssessmentEpa.vue
index b79211e3..b600e234 100644
--- a/VueApp/src/CTS/pages/AssessmentEpa.vue
+++ b/VueApp/src/CTS/pages/AssessmentEpa.vue
@@ -6,6 +6,7 @@ import type { Epa } from "@/CTS/types"
 import StudentSelect from "@/components/StudentSelect.vue"
 import ServiceSelectBox from "@/CTS/components/ServiceSelect.vue"
 import LevelSelect from "@/CTS/components/LevelSelect.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 
 //epas
 const epas = ref([]) as Ref<Epa[]>
@@ -123,21 +124,13 @@ watch(selectedStudentId, () => {
                 </div>
             </div>
 
-            <q-banner
-                inline-actions
-                rounded
+            <StatusBanner
                 v-if="success"
-                class="bg-green text-white q-mb-md"
+                type="success"
+                dismissible
             >
                 EPA Saved
-                <template #action>
-                    <q-btn
-                        flat
-                        label="Dismiss"
-                        @click="success = false"
-                    ></q-btn>
-                </template>
-            </q-banner>
+            </StatusBanner>
 
             <div v-if="serviceId != null && epa?.epaId">
                 <div class="row justify-between items-center q-mb-lg">
diff --git a/VueApp/src/CTS/pages/AssessmentEpaEdit.vue b/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
index 6a49b27e..317ec7c2 100644
--- a/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
+++ b/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
@@ -5,6 +5,7 @@ import { useRoute, useRouter } from "vue-router"
 import { useFetch } from "@/composables/ViperFetch"
 import { useDateFunctions } from "@/composables/DateFunctions"
 import LevelSelect from "@/CTS/components/LevelSelect.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 
 const { formatDateForDateInput } = useDateFunctions()
 const route = useRoute()
@@ -73,21 +74,13 @@ getStudentEpa()
             class="col"
             v-show="studentEpa.encounterId"
         >
-            <q-banner
-                inline-actions
-                rounded
+            <StatusBanner
                 v-if="success"
-                class="bg-green text-white q-mb-md"
+                type="success"
+                dismissible
             >
                 EPA Saved
-                <template #action>
-                    <q-btn
-                        flat
-                        label="Dismiss"
-                        @click="success = false"
-                    ></q-btn>
-                </template>
-            </q-banner>
+            </StatusBanner>
             <div class="row justify-between items-end q-mb-lg">
                 <div class="col-12 col-md-6 col-lg-5">
                     <h2 class="epa">{{ studentEpa.epaName }}</h2>
diff --git a/VueApp/src/CTS/pages/ManageCompetencies.vue b/VueApp/src/CTS/pages/ManageCompetencies.vue
index 60117a5c..3e6b080e 100644
--- a/VueApp/src/CTS/pages/ManageCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageCompetencies.vue
@@ -31,12 +31,15 @@ const showDescriptions = ref(false)
 const tree = ref(null) as Ref<any>
 
 async function load() {
-    Promise.resolve([
+    const [, , hierarchyResult] = await Promise.all([
         get(apiUrl + "cts/domains").then((r) => (domains.value = r.result)),
         get(apiUrl + "cts/competencies").then((r) => (competencies.value = r.result)),
+        get(apiUrl + "cts/competencies/hierarchy"),
     ])
-    await get(apiUrl + "cts/competencies/hierarchy").then((r) => (competencyHierachy.value = r.result))
-    treeNodes.value = competencyHierachy.value.map(createTreeNode)
+    if (hierarchyResult?.result) {
+        competencyHierachy.value = hierarchyResult.result
+        treeNodes.value = competencyHierachy.value.map(createTreeNode)
+    }
     loaded.value = true
 }
 
diff --git a/VueApp/src/CTS/pages/ManageDomains.vue b/VueApp/src/CTS/pages/ManageDomains.vue
index 6b37abcc..d6ae8b41 100644
--- a/VueApp/src/CTS/pages/ManageDomains.vue
+++ b/VueApp/src/CTS/pages/ManageDomains.vue
@@ -66,7 +66,7 @@ getDomains()
         method="post"
         @submit="save"
     >
-        <q-label class="row items-center">
+        <div class="row items-center">
             <span class="col col-md-2 col-lg-1">Domain:</span>
             <q-input
                 outlined
@@ -78,8 +78,8 @@ getDomains()
                 maxlength="250"
                 class="col col-md-5 col-lg-3"
             />
-        </q-label>
-        <q-label class="row items-center">
+        </div>
+        <div class="row items-center">
             <span class="col col-md-2 col-lg-1">Order:</span>
             <q-input
                 outlined
@@ -90,8 +90,8 @@ getDomains()
                 step="1"
                 class="col col-1"
             />
-        </q-label>
-        <q-label class="row items-start">
+        </div>
+        <div class="row items-start">
             <span class="col col-md-2 col-lg-1 q-pt-sm">Description:</span>
             <q-input
                 outlined
@@ -101,7 +101,7 @@ getDomains()
                 v-model="domain.description"
                 class="col col-md-5 col-lg-3"
             ></q-input>
-        </q-label>
+        </div>
         <div class="row q-mt-sm">
             <q-btn
                 type="submit"
diff --git a/VueApp/src/CTS/pages/ManageMilestones.vue b/VueApp/src/CTS/pages/ManageMilestones.vue
index fe2f1f9a..2ae00c63 100644
--- a/VueApp/src/CTS/pages/ManageMilestones.vue
+++ b/VueApp/src/CTS/pages/ManageMilestones.vue
@@ -74,6 +74,7 @@ async function createMilestone() {
                 clinical: false,
                 milestone: true,
                 name: "Milestone " + comp.number + " " + comp.name,
+                competencyCount: 0,
                 roles: [],
             }
             let r = await post(apiUrl + "cts/bundles/", bundle)
diff --git a/VueApp/src/CTS/pages/ManageRoles.vue b/VueApp/src/CTS/pages/ManageRoles.vue
index 8dd4fb6e..efad0655 100644
--- a/VueApp/src/CTS/pages/ManageRoles.vue
+++ b/VueApp/src/CTS/pages/ManageRoles.vue
@@ -8,7 +8,7 @@ const $q = useQuasar()
 const { get, post, put, del } = useFetch()
 
 const apiUrl = inject("apiURL")
-const role = ref({}) as Ref<any>
+const role = ref({ roleId: 0, name: "" }) as Ref<any>
 const roles = ref([]) as Ref<any[]>
 
 async function load() {
@@ -40,7 +40,7 @@ function removeRole() {
 }
 
 function clearRole() {
-    role.value = {}
+    role.value = { roleId: 0, name: "" }
 }
 
 load()

From cd2540468d743e1cc9aa9739886503a30c3d4581 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Tue, 7 Apr 2026 21:53:49 -0700
Subject: [PATCH 08/13] VPR-104 fix(a11y): ManageDomains labels,
 ManageCompetencies empty state

- Add label props to ManageDomains q-inputs for screen reader
  accessibility (axe: label violation, WCAG 4.1.2)
- Show "No competencies found" text instead of empty q-tree to avoid
  aria-required-children and grey contrast failures on empty state
---
 VueApp/src/CTS/pages/ManageCompetencies.vue |  9 +++++++-
 VueApp/src/CTS/pages/ManageDomains.vue      | 25 ++++++++-------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/VueApp/src/CTS/pages/ManageCompetencies.vue b/VueApp/src/CTS/pages/ManageCompetencies.vue
index 3e6b080e..d8915a4e 100644
--- a/VueApp/src/CTS/pages/ManageCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageCompetencies.vue
@@ -284,12 +284,19 @@ load()
             ></q-btn>
         </span>
     </h3>
+    <div
+        v-if="loaded && treeNodes.length === 0"
+        class="text-grey-8 q-pa-md"
+        role="status"
+    >
+        No competencies found.
+    </div>
     <q-tree
         :nodes="treeNodes"
         node-key="competencyId"
         v-model:expanded="expanded"
         dense
-        v-if="loaded"
+        v-if="loaded && treeNodes.length > 0"
         ref="tree"
     >
         <template #default-header="prop">
diff --git a/VueApp/src/CTS/pages/ManageDomains.vue b/VueApp/src/CTS/pages/ManageDomains.vue
index d6ae8b41..6cbc0d0a 100644
--- a/VueApp/src/CTS/pages/ManageDomains.vue
+++ b/VueApp/src/CTS/pages/ManageDomains.vue
@@ -66,41 +66,34 @@ getDomains()
         method="post"
         @submit="save"
     >
-        <div class="row items-center">
-            <span class="col col-md-2 col-lg-1">Domain:</span>
+        <div class="row q-gutter-sm q-mb-sm">
             <q-input
                 outlined
                 dense
-                type="text"
-                name="name"
+                label="Domain"
                 v-model="domain.name"
-                size="30"
                 maxlength="250"
-                class="col col-md-5 col-lg-3"
+                class="col-12 col-md-5 col-lg-3"
             />
-        </div>
-        <div class="row items-center">
-            <span class="col col-md-2 col-lg-1">Order:</span>
             <q-input
                 outlined
                 dense
+                label="Order"
                 type="number"
-                name="order"
                 v-model="domain.order"
                 step="1"
-                class="col col-1"
+                class="col-4 col-md-1"
             />
         </div>
-        <div class="row items-start">
-            <span class="col col-md-2 col-lg-1 q-pt-sm">Description:</span>
+        <div class="row q-mb-sm">
             <q-input
                 outlined
                 dense
+                label="Description"
                 type="textarea"
-                name="description"
                 v-model="domain.description"
-                class="col col-md-5 col-lg-3"
-            ></q-input>
+                class="col-12 col-md-5 col-lg-3"
+            />
         </div>
         <div class="row q-mt-sm">
             <q-btn

From 8ee5ae58463cbd399633f7dfd21c193e53b46af4 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Tue, 7 Apr 2026 22:36:38 -0700
Subject: [PATCH 09/13] VPR-104 fix(a11y): move heading outside q-list to fix
 aria-required-children
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The h3 "Domains" heading was a direct child of q-list (role="list"),
violating WCAG 1.3.1 — list elements must only contain listitem
children. Move heading above q-list so the role hierarchy is valid.
---
 VueApp/src/CTS/pages/ManageDomains.vue | 50 +++++++++++++-------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/VueApp/src/CTS/pages/ManageDomains.vue b/VueApp/src/CTS/pages/ManageDomains.vue
index 6cbc0d0a..fe9f5518 100644
--- a/VueApp/src/CTS/pages/ManageDomains.vue
+++ b/VueApp/src/CTS/pages/ManageDomains.vue
@@ -127,32 +127,30 @@ getDomains()
     </q-form>
 
     <div class="row">
-        <q-list class="col col-12 col-md-10 col-lg-6">
-            <q-item-label
-                header
-                class="text-primary"
-                ><h3>Domains</h3></q-item-label
-            >
-            <q-item
-                v-for="d in domains"
-                :key="d.domainId"
-            >
-                <q-item-section
-                    top
-                    side
+        <div class="col col-12 col-md-10 col-lg-6">
+            <h3 class="text-primary q-px-md">Domains</h3>
+            <q-list>
+                <q-item
+                    v-for="d in domains"
+                    :key="d.domainId"
                 >
-                    <q-btn
-                        icon="edit"
-                        dense
-                        flat
-                        class="secondary"
-                        :aria-label="`Edit domain: ${d.name}`"
-                        @click="domain = d"
-                    ></q-btn>
-                </q-item-section>
-                <q-item-section top>{{ d.order }}. {{ d.name }}</q-item-section>
-                <q-item-section>{{ d.description }}</q-item-section>
-            </q-item>
-        </q-list>
+                    <q-item-section
+                        top
+                        side
+                    >
+                        <q-btn
+                            icon="edit"
+                            dense
+                            flat
+                            class="secondary"
+                            :aria-label="`Edit domain: ${d.name}`"
+                            @click="domain = d"
+                        ></q-btn>
+                    </q-item-section>
+                    <q-item-section top>{{ d.order }}. {{ d.name }}</q-item-section>
+                    <q-item-section>{{ d.description }}</q-item-section>
+                </q-item>
+            </q-list>
+        </div>
     </div>
 </template>

From b54428e7a2d878419efe14b0254d49a69b9bb697 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Thu, 9 Apr 2026 19:39:53 -0700
Subject: [PATCH 10/13] VPR-104 fix(a11y): CTS brand colors, page titles, and
 UX improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add ViewData["Title"] to all CTS Razor views
- Replace Quasar palette colors with brand colors (positive/negative)
- Use secondary color for Cancel buttons
- Add accessible labels to empty table columns and tree buttons
- Fix Promise.resolve → Promise.all in ManageMilestones
- Change CompetencyHierarchyDto.Children to List for Add() support
- Refactor AuditList detail toggle out of table header
- Add Cancel button and clearLevel to ManageLevels
- Fix stored term lookup in ManageCourseCompetencies
---
 VueApp/src/CTS/pages/AssessmentList.vue       |  2 +-
 VueApp/src/CTS/pages/AuditList.vue            | 41 ++++++++-----------
 .../CTS/pages/CompetenciesBundleReport.vue    |  4 +-
 .../CTS/pages/ManageBundleCompetencies.vue    |  2 +-
 VueApp/src/CTS/pages/ManageBundles.vue        |  4 +-
 VueApp/src/CTS/pages/ManageCompetencies.vue   | 16 ++++----
 .../CTS/pages/ManageCourseCompetencies.vue    |  7 +++-
 VueApp/src/CTS/pages/ManageEpas.vue           |  2 +-
 VueApp/src/CTS/pages/ManageLevels.vue         | 19 ++++++++-
 VueApp/src/CTS/pages/ManageMilestones.vue     |  2 +-
 VueApp/src/CTS/pages/ManageRoles.vue          |  2 +-
 .../CTS/Controllers/CompetencyController.cs   |  2 +-
 .../CTS/Models/CompetencyHierarchyDto.cs      |  2 +-
 web/Areas/CTS/Views/AssessmentCharts.cshtml   |  3 ++
 web/Areas/CTS/Views/Assessments.cshtml        |  7 +++-
 web/Areas/CTS/Views/Epa.cshtml                |  1 +
 web/Areas/CTS/Views/EpaEdit.cshtml            |  1 +
 web/Areas/CTS/Views/Index.cshtml              |  1 +
 web/Areas/CTS/Views/ManageDomains.cshtml      |  3 ++
 web/Areas/CTS/Views/ManageEpas.cshtml         |  7 +++-
 web/Areas/CTS/Views/ManageLevels.cshtml       |  7 +++-
 21 files changed, 85 insertions(+), 50 deletions(-)

diff --git a/VueApp/src/CTS/pages/AssessmentList.vue b/VueApp/src/CTS/pages/AssessmentList.vue
index 8cc6a810..d66cb124 100644
--- a/VueApp/src/CTS/pages/AssessmentList.vue
+++ b/VueApp/src/CTS/pages/AssessmentList.vue
@@ -30,7 +30,7 @@ const searchForm = ref({
     dateTo: null,
 })
 const columns: QTableProps["columns"] = [
-    { name: "action", label: "", field: "id", align: "left" },
+    { name: "action", label: "Actions", field: "id", align: "left" },
     { name: "studentName", label: "Student", field: "studentName", align: "left", sortable: true },
     { name: "epaName", label: "EPA", field: "epaName", align: "left", sortable: true },
     { name: "serviceName", label: "Service", field: "serviceName", align: "left", sortable: true },
diff --git a/VueApp/src/CTS/pages/AuditList.vue b/VueApp/src/CTS/pages/AuditList.vue
index e07fd243..1303c2bc 100644
--- a/VueApp/src/CTS/pages/AuditList.vue
+++ b/VueApp/src/CTS/pages/AuditList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from "vue"
 import type { QTableProps } from "quasar"
-import { ref, inject } from "vue"
+import { ref, inject, computed } from "vue"
 import { useFetch } from "@/composables/ViperFetch"
 import { useDateFunctions } from "@/composables/DateFunctions"
 import type { Person } from "@/CTS/types"
@@ -17,7 +17,7 @@ const actions = ref([]) as Ref<string[]>
 const areas = ref([]) as Ref<string[]>
 const showDetail = ref(false)
 
-const auditColumns: QTableProps["columns"] = [
+const baseColumns: QTableProps["columns"] = [
     { name: "area", label: "Area", field: "area", align: "left", sortable: true },
     { name: "action", label: "Action", field: "action", align: "left", sortable: true },
     {
@@ -30,8 +30,9 @@ const auditColumns: QTableProps["columns"] = [
     },
     { name: "modifiedBy", label: "By", field: "modifiedByName", align: "left", sortable: true },
     { name: "modifiedPerson", label: "Modified Person", field: "modifiedPersonName", align: "left", sortable: true },
-    { name: "detail", label: "Detail", field: "detail", align: "left", sortable: false },
 ]
+const detailColumn = { name: "detail", label: "Details", field: "detail", align: "left" as const, sortable: false }
+const auditColumns = computed(() => (showDetail.value ? [...baseColumns!, detailColumn] : baseColumns!))
 const loading = ref(false)
 const pagination = ref({ page: 1, sortBy: "timestamp", descending: true, rowsPerPage: 25, rowsNumber: 100 }) as Ref<any>
 const filter = ref({
@@ -66,10 +67,9 @@ async function loadAudit(page: number, perPage: number, sortBy: string, descendi
     const p = new URLSearchParams()
     if (filter.value.area !== null) p.append("area", filter.value.area)
     if (filter.value.action !== null) p.append("action", filter.value.action)
-    if (filter.value.modifiedBy?.personId !== null)
-        p.append("modifiedById", filter.value.modifiedBy?.personId.toString())
-    if (filter.value.modifiedPerson?.personId !== null)
-        p.append("modifiedPersonId", filter.value.modifiedPerson?.personId.toString())
+    if (filter.value.modifiedBy?.personId != null) p.append("modifiedById", filter.value.modifiedBy.personId.toString())
+    if (filter.value.modifiedPerson?.personId != null)
+        p.append("modifiedPersonId", filter.value.modifiedPerson.personId.toString())
     if (filter.value.dateFrom !== null) p.append("dateFrom", filter.value.dateFrom)
     if (filter.value.dateTo !== null) p.append("dateTo", filter.value.dateTo)
 
@@ -203,6 +203,11 @@ loadAreas()
             </div>
         </div>
     </q-form>
+    <q-toggle
+        v-model="showDetail"
+        label="Show Details"
+        class="q-mb-sm"
+    />
     <q-table
         row-key="ctsAuditId"
         :rows="auditRows"
@@ -212,27 +217,17 @@ loadAreas()
         :rows-per-page-options="[5, 10, 15, 25, 50, 100]"
         @request="loadAuditRows"
     >
-        <template #header-cell-detail="props">
-            <q-th :props="props">
-                <q-toggle
-                    v-model="showDetail"
-                    label="Details"
-                />
-            </q-th>
-        </template>
         <template #body-cell-detail="props">
             <q-td
                 :props="props"
                 style="max-width: 300px"
             >
-                <template v-if="showDetail">
-                    <div
-                        v-for="(value, key) in props.row.detail2"
-                        :key="key"
-                    >
-                        {{ key }}: {{ value }}
-                    </div>
-                </template>
+                <div
+                    v-for="(value, key) in props.row.detail2"
+                    :key="key"
+                >
+                    {{ key }}: {{ value }}
+                </div>
             </q-td>
         </template>
     </q-table>
diff --git a/VueApp/src/CTS/pages/CompetenciesBundleReport.vue b/VueApp/src/CTS/pages/CompetenciesBundleReport.vue
index 9b7d8c2a..6373535f 100644
--- a/VueApp/src/CTS/pages/CompetenciesBundleReport.vue
+++ b/VueApp/src/CTS/pages/CompetenciesBundleReport.vue
@@ -226,7 +226,7 @@ onMounted(() => {
                         <q-td :props="props">
                             <div
                                 v-if="props.value.length === 0"
-                                class="text-grey-6"
+                                class="text-grey-8"
                             >
                                 None
                             </div>
@@ -289,7 +289,7 @@ onMounted(() => {
                                     <div class="text-subtitle2 q-mb-xs">Associated Bundles:</div>
                                     <div
                                         v-if="props.row.bundles.length === 0"
-                                        class="text-grey-6"
+                                        class="text-grey-8"
                                     >
                                         None
                                     </div>
diff --git a/VueApp/src/CTS/pages/ManageBundleCompetencies.vue b/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
index 8466c265..0b9ecfd5 100644
--- a/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
@@ -41,7 +41,7 @@ const columns = ref([
     { name: "order", label: "Order", field: "order", align: "left", sortable: true },
     { name: "competencyname", label: "Competency", field: "competencyName", align: "left", sortable: true },
     { name: "role", label: "Role", field: "roleName", align: "left", sortable: true },
-    { name: "action", label: "", field: "", align: "left" },
+    { name: "action", label: "Actions", field: "", align: "left" },
 ]) as Ref<QTableProps["columns"]>
 const paging = ref({ page: 1, sortBy: "enteredOn", descending: true, rowsPerPage: 0 }) as Ref<any>
 
diff --git a/VueApp/src/CTS/pages/ManageBundles.vue b/VueApp/src/CTS/pages/ManageBundles.vue
index 5991d825..0b5cf5dc 100644
--- a/VueApp/src/CTS/pages/ManageBundles.vue
+++ b/VueApp/src/CTS/pages/ManageBundles.vue
@@ -27,7 +27,7 @@ const bundleRoles = ref([]) as Ref<number[]>
 const bundles = ref([]) as Ref<Bundle[]>
 const paging = ref({ page: 1, sortBy: "enteredOn", descending: true, rowsPerPage: 0 }) as Ref<any>
 const columns: QTableProps["columns"] = [
-    { name: "action", label: "", field: "id", align: "left" },
+    { name: "action", label: "Actions", field: "id", align: "left" },
     { name: "name", label: "Name", field: "name", align: "left", sortable: true },
     { name: "compcount", label: "Competency Count", field: "competencyCount", align: "left", sortable: true },
     { name: "roles", label: "Roles", field: "roles", align: "left", sortable: true },
@@ -149,7 +149,7 @@ load()
                     v-if="bundle?.bundleId"
                     type="button"
                     @click="clearBundle()"
-                    color="primary"
+                    color="secondary"
                     dense
                     class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                     label="Cancel"
diff --git a/VueApp/src/CTS/pages/ManageCompetencies.vue b/VueApp/src/CTS/pages/ManageCompetencies.vue
index d8915a4e..3af43934 100644
--- a/VueApp/src/CTS/pages/ManageCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageCompetencies.vue
@@ -302,31 +302,33 @@ load()
         <template #default-header="prop">
             <div class="row full-width items-center">
                 <div
-                    :class="'col-auto q-mr-sm ' + (prop.node.children.length == 0 ? 'q-ml-sm' : '')"
+                    :class="'col-auto q-mr-xs ' + (prop.node.children.length == 0 ? 'q-ml-sm' : '')"
                     @click.stop
                 >
                     <q-btn
                         dense
                         flat
-                        size="sm"
+                        size="1.4rem"
                         icon="add"
-                        color="positive"
+                        color="secondary"
                         @click="addChild(prop.node.comp)"
                         title="Add child of this competency"
+                        aria-label="Add child of this competency"
                     ></q-btn>
                 </div>
                 <div
-                    class="col-auto q-mr-sm"
+                    class="col-auto q-mr-xs"
                     @click.stop
                 >
                     <q-btn
                         dense
                         flat
-                        size="sm"
+                        size="1.2rem"
                         icon="edit"
-                        color="grey"
+                        color="secondary"
                         @click="editComp(prop.node.comp)"
-                        title="Edit"
+                        title="Edit competency"
+                        aria-label="Edit competency"
                     ></q-btn>
                 </div>
                 <div class="col-9 col-sm-10">
diff --git a/VueApp/src/CTS/pages/ManageCourseCompetencies.vue b/VueApp/src/CTS/pages/ManageCourseCompetencies.vue
index 2aa40c69..101e355a 100644
--- a/VueApp/src/CTS/pages/ManageCourseCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageCourseCompetencies.vue
@@ -49,7 +49,12 @@ function getSessions() {
 function getTerms() {
     get(apiUrl + "curriculum/terms")
         .then((r) => (terms.value = r.result))
-        .then(() => (selectedTerm.value = storedTerm.value || terms.value[0]))
+        .then(() => {
+            const stored = storedTerm.value
+            selectedTerm.value =
+                (stored?.termCode ? terms.value.find((t: Term) => t.termCode === stored.termCode) : null) ||
+                terms.value[0]
+        })
 }
 
 function getRoles() {
diff --git a/VueApp/src/CTS/pages/ManageEpas.vue b/VueApp/src/CTS/pages/ManageEpas.vue
index 2f2d2cd8..702e8c10 100644
--- a/VueApp/src/CTS/pages/ManageEpas.vue
+++ b/VueApp/src/CTS/pages/ManageEpas.vue
@@ -244,7 +244,7 @@ getEpas()
                         <span class="col">
                             <q-icon
                                 :name="epaItem.active ? 'check' : 'close'"
-                                :color="epaItem.active ? 'green' : 'red'"
+                                :color="epaItem.active ? 'positive' : 'negative'"
                                 size="md"
                             />
                         </span>
diff --git a/VueApp/src/CTS/pages/ManageLevels.vue b/VueApp/src/CTS/pages/ManageLevels.vue
index b7725761..9847ab40 100644
--- a/VueApp/src/CTS/pages/ManageLevels.vue
+++ b/VueApp/src/CTS/pages/ManageLevels.vue
@@ -108,6 +108,11 @@ function editLevel(l: Level) {
     showForm.value = true
 }
 
+function clearLevel() {
+    level.value = structuredClone(emptyLevel) as Level
+    showForm.value = false
+}
+
 loadLevels()
 </script>
 
@@ -192,6 +197,17 @@ loadLevels()
                     class="q-mt-sm col col-4 col-md-1"
                 ></q-btn>
                 <q-btn
+                    v-if="level?.levelId"
+                    dense
+                    no-caps
+                    type="button"
+                    label="Cancel"
+                    color="secondary"
+                    class="q-mt-sm q-ml-lg col col-4 col-md-1"
+                    @click="clearLevel"
+                ></q-btn>
+                <q-btn
+                    v-if="level?.levelId"
                     dense
                     no-caps
                     type="button"
@@ -223,7 +239,6 @@ loadLevels()
                     <q-btn
                         dense
                         no-caps
-                        size="md"
                         color="primary"
                         icon="edit"
                         :aria-label="`Edit level: ${l.levelName}`"
@@ -236,7 +251,7 @@ loadLevels()
                 >
                     <q-icon
                         :name="l.active ? 'check' : 'close'"
-                        :color="l.active ? 'green' : 'red'"
+                        :color="l.active ? 'positive' : 'negative'"
                     ></q-icon>
                 </q-item-section>
                 <q-item-section
diff --git a/VueApp/src/CTS/pages/ManageMilestones.vue b/VueApp/src/CTS/pages/ManageMilestones.vue
index 2ae00c63..9e021c7b 100644
--- a/VueApp/src/CTS/pages/ManageMilestones.vue
+++ b/VueApp/src/CTS/pages/ManageMilestones.vue
@@ -15,7 +15,7 @@ const milestoneLevels = ref([]) as Ref<MilestoneLevel[]>
 const loaded = ref(false)
 
 async function load() {
-    await Promise.resolve([
+    await Promise.all([
         get(apiUrl + "cts/levels?milestone=true").then((r) => (levels.value = r.result)),
         get(apiUrl + "cts/milestones").then((r) => (milestones.value = r.result)),
         get(apiUrl + "cts/competencies").then((r) => (competencies.value = r.result)),
diff --git a/VueApp/src/CTS/pages/ManageRoles.vue b/VueApp/src/CTS/pages/ManageRoles.vue
index efad0655..72935501 100644
--- a/VueApp/src/CTS/pages/ManageRoles.vue
+++ b/VueApp/src/CTS/pages/ManageRoles.vue
@@ -72,7 +72,7 @@ load()
                 v-if="role?.roleId"
                 type="button"
                 @click="clearRole()"
-                color="primary"
+                color="secondary"
                 dense
                 class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                 label="Cancel"
diff --git a/web/Areas/CTS/Controllers/CompetencyController.cs b/web/Areas/CTS/Controllers/CompetencyController.cs
index b5637ed2..8c729ab0 100644
--- a/web/Areas/CTS/Controllers/CompetencyController.cs
+++ b/web/Areas/CTS/Controllers/CompetencyController.cs
@@ -79,7 +79,7 @@ public async Task<ActionResult<List<CompetencyHierarchyDto>>> GetCompetencyHiera
                     var parent = allCompDtos.FirstOrDefault(c => c.CompetencyId == comp.ParentId);
                     if (parent != null)
                     {
-                        ((List<CompetencyHierarchyDto>)parent.Children).Add(comp);
+                        parent.Children.Add(comp);
                     }
                 }
             }
diff --git a/web/Areas/CTS/Models/CompetencyHierarchyDto.cs b/web/Areas/CTS/Models/CompetencyHierarchyDto.cs
index a5d85ae5..2c91cf15 100644
--- a/web/Areas/CTS/Models/CompetencyHierarchyDto.cs
+++ b/web/Areas/CTS/Models/CompetencyHierarchyDto.cs
@@ -11,7 +11,7 @@ public class CompetencyHierarchyDto
         public bool CanLinkToStudent { get; set; }
         public string? DomainName { get; set; }
         public int? DomainOrder { get; set; }
-        public IEnumerable<CompetencyHierarchyDto> Children { get; set; } = new List<CompetencyHierarchyDto>();
+        public List<CompetencyHierarchyDto> Children { get; set; } = [];
         public string Type
         {
             get
diff --git a/web/Areas/CTS/Views/AssessmentCharts.cshtml b/web/Areas/CTS/Views/AssessmentCharts.cshtml
index 6085f801..14892bff 100644
--- a/web/Areas/CTS/Views/AssessmentCharts.cshtml
+++ b/web/Areas/CTS/Views/AssessmentCharts.cshtml
@@ -1,6 +1,9 @@
 @*
     For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
 *@
+@{
+    ViewData["Title"] = "Assessment Charts";
+}
 
 <div style="width:800px;">
     <canvas ref="canvasRef" id="chart" width="800" height="600"></canvas>
diff --git a/web/Areas/CTS/Views/Assessments.cshtml b/web/Areas/CTS/Views/Assessments.cshtml
index e64ed049..fa2383fa 100644
--- a/web/Areas/CTS/Views/Assessments.cshtml
+++ b/web/Areas/CTS/Views/Assessments.cshtml
@@ -1,4 +1,7 @@
-
+@{
+    ViewData["Title"] = "View Assessments";
+}
+
 <h1>View Assessments</h1>
 
 <q-form>
@@ -80,7 +83,7 @@
                         keys: "id",
                         urlBase: "",
                         columns: [
-                            { name: "action", label: "", field: "id", align: "left" },
+                            { name: "action", label: "Actions", field: "id", align: "left" },
                             { name: "studentName", label: "Student", field: "studentName", align: "left", sortable: true },
                             { name: "epaName", label: "EPA", field: "epaName", align: "left", sortable: true },
                             { name: "service", label: "Service", field: "serviceName", align: "left", sortable: true },
diff --git a/web/Areas/CTS/Views/Epa.cshtml b/web/Areas/CTS/Views/Epa.cshtml
index 5d7aa488..a5040eb3 100644
--- a/web/Areas/CTS/Views/Epa.cshtml
+++ b/web/Areas/CTS/Views/Epa.cshtml
@@ -1,4 +1,5 @@
 @{
+    ViewData["Title"] = "EPA Assessment";
     IUserHelper UserHelper = new UserHelper();
     var siteRootUrl = Url.Content("~/");
 }
diff --git a/web/Areas/CTS/Views/EpaEdit.cshtml b/web/Areas/CTS/Views/EpaEdit.cshtml
index f8444d5a..159e3717 100644
--- a/web/Areas/CTS/Views/EpaEdit.cshtml
+++ b/web/Areas/CTS/Views/EpaEdit.cshtml
@@ -1,4 +1,5 @@
 @{
+    ViewData["Title"] = "Edit EPA";
     IUserHelper UserHelper = new UserHelper();
 }
 <h1>Edit EPA Assessment</h1>
diff --git a/web/Areas/CTS/Views/Index.cshtml b/web/Areas/CTS/Views/Index.cshtml
index 66f471ae..4aecdad6 100644
--- a/web/Areas/CTS/Views/Index.cshtml
+++ b/web/Areas/CTS/Views/Index.cshtml
@@ -1,4 +1,5 @@
 @{
+    ViewData["Title"] = "CTS Home";
     var html = ViewData["html"] as string;
 }
 
diff --git a/web/Areas/CTS/Views/ManageDomains.cshtml b/web/Areas/CTS/Views/ManageDomains.cshtml
index d793f9cb..d786504a 100644
--- a/web/Areas/CTS/Views/ManageDomains.cshtml
+++ b/web/Areas/CTS/Views/ManageDomains.cshtml
@@ -1,4 +1,7 @@
 @using Viper.Models.CTS
+@{
+    ViewData["Title"] = "Manage Domains";
+}
 
 <h1>Manage Domains</h1>
 @{
diff --git a/web/Areas/CTS/Views/ManageEpas.cshtml b/web/Areas/CTS/Views/ManageEpas.cshtml
index 9644c539..43f3ddb4 100644
--- a/web/Areas/CTS/Views/ManageEpas.cshtml
+++ b/web/Areas/CTS/Views/ManageEpas.cshtml
@@ -1,4 +1,7 @@
-<h1>Manage EPAs</h1>
+@{
+    ViewData["Title"] = "Manage EPAs";
+}
+<h1>Manage EPAs</h1>
 <q-form @@submit="submitEpa()" v-if="showForm" class="q-mb-md">
     <h2>{{epa?.epaId ? 'Updating EPA' : 'Creating EPA'}}</h2>
     <div class="row">
@@ -70,7 +73,7 @@
                         <q-btn dense no-caps size="md" icon="edit" color="primary" :aria-label="'Edit EPA: ' + epa.name" @@click="selectEpa(epa)"></q-btn>
                     </span>
                     <span class="col">
-                        <q-icon :name="epa.active ? 'check' : 'close'" :color="epa.active ? 'green' : 'red'" size="md"></q-icon>
+                        <q-icon :name="epa.active ? 'check' : 'close'" :color="epa.active ? 'positive' : 'negative'" size="md"></q-icon>
                     </span>
                     <span class="col">
                         {{epa.order}}
diff --git a/web/Areas/CTS/Views/ManageLevels.cshtml b/web/Areas/CTS/Views/ManageLevels.cshtml
index 6356ebbc..e34c45fc 100644
--- a/web/Areas/CTS/Views/ManageLevels.cshtml
+++ b/web/Areas/CTS/Views/ManageLevels.cshtml
@@ -1,4 +1,7 @@
-<h1>Manage Levels</h1>
+@{
+    ViewData["Title"] = "Manage Levels";
+}
+<h1>Manage Levels</h1>
 <q-form action="" @@submit="submitLevel">
     <div class="row items-start">
         <q-btn-toggle name="type" v-model="type" :options="levelTypes" size="large" outlined no-caps push toggle-color="primary" class="q-mb-md"></q-btn-toggle>
@@ -37,7 +40,7 @@
                 <q-btn dense no-caps size="md" color="primary" icon="edit" :aria-label="'Edit level: ' + l.levelName" @@click="selectLevel(l)"></q-btn>
             </q-item-section>
             <q-item-section side top>
-                <q-icon :name="l.active ? 'check' : 'close'" :color="l.active ? 'green' : 'red'"></q-icon>
+                <q-icon :name="l.active ? 'check' : 'close'" :color="l.active ? 'positive' : 'negative'"></q-icon>
             </q-item-section>
             <q-item-section side top>
                 {{l.order}}

From 66d60b96901c4b73e285ea596549f58d96e0d421 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Sun, 12 Apr 2026 16:19:16 -0700
Subject: [PATCH 11/13] VPR-104 fix(a11y): CTS assessment bubbles, banners,
 button labels

- Rewrite AssessmentBubble as semantic button/span with visible
  numeric rating and aria-label instead of an icon-only q-icon
- Replace raw red error divs with StatusBanner across Assessment*
  pages; add v-model:visible support so dismissible banners reset
- Fix MyAssessments heading hierarchy (h1/h2) and label expand
  toggles with aria-expanded
- Add missing aria-labels and select label on CourseStudents
- Fix ManageLevels add/edit form visibility toggle
---
 .../src/CTS/components/AssessmentBubble.vue   | 104 +++++++++++++-----
 VueApp/src/CTS/pages/AssessmentCompetency.vue |   7 +-
 VueApp/src/CTS/pages/AssessmentEpa.vue        |   7 +-
 VueApp/src/CTS/pages/AssessmentEpaEdit.vue    |   7 +-
 VueApp/src/CTS/pages/CourseStudents.vue       |  26 +++--
 VueApp/src/CTS/pages/ManageLevels.vue         |   2 +-
 VueApp/src/CTS/pages/MyAssessments.vue        |  28 +++--
 VueApp/src/components/StatusBanner.vue        |   5 +-
 VueApp/src/layouts/ViperLayoutSimple.vue      |   2 +
 9 files changed, 127 insertions(+), 61 deletions(-)

diff --git a/VueApp/src/CTS/components/AssessmentBubble.vue b/VueApp/src/CTS/components/AssessmentBubble.vue
index 7a7c700e..2f9aed82 100644
--- a/VueApp/src/CTS/components/AssessmentBubble.vue
+++ b/VueApp/src/CTS/components/AssessmentBubble.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue"
+import { computed } from "vue"
 
 const props = withDefaults(
     defineProps<{
@@ -18,42 +18,33 @@ const emit = defineEmits<{
     "bubble-click": [id: number]
 }>()
 
-const classes5 = [
-    "assessmentBubble5_1",
-    "assessmentBubble5_2",
-    "assessmentBubble5_3",
-    "assessmentBubble5_4",
-    "assessmentBubble5_5",
-]
+const levelClass = computed(() => {
+    if (props.maxValue === 5 && props.value >= 1 && props.value <= 5) {
+        return `assessmentBubble--level-${props.value}`
+    }
+    return ""
+})
 
-const bubbleClass = ref("")
+const displayValue = computed(() => (props.value >= 1 && props.value <= props.maxValue ? props.value : "?"))
 
-watch(props, () => {
-    setBubbleAttrs()
-})
+const staticLabel = computed(() => `Rating ${displayValue.value} of ${props.maxValue}`)
+const clickableLabel = computed(() => `${staticLabel.value}, open details`)
 
 function clickBubble() {
     if (props.id !== undefined) {
         emit("bubble-click", props.id)
     }
 }
-
-function setBubbleAttrs() {
-    if (props.maxValue === 5 && props.value <= 5 && props.value > 0) {
-        const index = props.value - 1
-        bubbleClass.value = classes5[index] ?? ""
-    }
-}
-
-setBubbleAttrs()
 </script>
 <template>
-    <q-icon
-        name="circle"
-        size="sm"
-        :class="'assessmentIcon cursor-pointer ' + bubbleClass"
+    <button
+        v-if="id !== undefined"
+        type="button"
+        :class="['assessmentBubble', 'assessmentBubble--clickable', levelClass]"
+        :aria-label="clickableLabel"
         @click="clickBubble"
     >
+        <span aria-hidden="true">{{ displayValue }}</span>
         <q-tooltip
             style="white-space: pre-wrap"
             class="text-body2"
@@ -62,5 +53,66 @@ setBubbleAttrs()
             <br />
             {{ props.text }}
         </q-tooltip>
-    </q-icon>
+    </button>
+    <span
+        v-else
+        :class="['assessmentBubble', levelClass]"
+        role="img"
+        :aria-label="staticLabel"
+    >
+        <span aria-hidden="true">{{ displayValue }}</span>
+    </span>
 </template>
+<style scoped>
+.assessmentBubble {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    margin: 0 0.125rem;
+    border: 0.0625rem solid var(--ucdavis-blue-100);
+    border-radius: 50%;
+    background-color: var(--ucdavis-blue-70);
+    color: white;
+    font-weight: 700;
+    font-size: 0.875rem;
+    line-height: 1;
+    padding: 0;
+    vertical-align: middle;
+}
+
+.assessmentBubble--clickable {
+    cursor: pointer;
+}
+
+.assessmentBubble--clickable:hover,
+.assessmentBubble--clickable:focus {
+    filter: brightness(1.1);
+}
+
+.assessmentBubble--clickable:focus-visible {
+    outline: 0.125rem solid var(--ucdavis-gold-90);
+    outline-offset: 0.125rem;
+}
+
+.assessmentBubble--level-1 {
+    background-color: var(--ucdavis-blue-70);
+}
+
+.assessmentBubble--level-2 {
+    background-color: var(--ucdavis-blue-80);
+}
+
+.assessmentBubble--level-3 {
+    background-color: var(--ucdavis-blue-90);
+}
+
+.assessmentBubble--level-4 {
+    background-color: var(--ucdavis-blue-100);
+}
+
+.assessmentBubble--level-5 {
+    background-color: #011a38;
+}
+</style>
diff --git a/VueApp/src/CTS/pages/AssessmentCompetency.vue b/VueApp/src/CTS/pages/AssessmentCompetency.vue
index 5352fa15..de520f30 100644
--- a/VueApp/src/CTS/pages/AssessmentCompetency.vue
+++ b/VueApp/src/CTS/pages/AssessmentCompetency.vue
@@ -5,6 +5,7 @@ import { useRoute } from "vue-router"
 import type { Competency, MilestoneLevel } from "@/CTS/types"
 import StudentSelect from "@/components/StudentSelect.vue"
 import LevelSelect from "@/CTS/components/LevelSelect.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 
 const route = useRoute()
 
@@ -84,13 +85,13 @@ function submitMilestone() {}
         v-bind="studentMilestone"
         v-show="selectedStudentId > 0"
     >
-        <div
-            class="bg-red-5 text-white q-pa-sm rounded q-mb-md"
+        <StatusBanner
             v-if="submitErrors?.message?.length > 0"
+            type="error"
         >
             {{ submitErrors.message }}
             Please make sure you have selected a service, EPA, student, and a level on the entrustment scale.
-        </div>
+        </StatusBanner>
         <LevelSelect
             level-type="milestone"
             @level-change="(selectedLevelId: number) => (levelId = selectedLevelId)"
diff --git a/VueApp/src/CTS/pages/AssessmentEpa.vue b/VueApp/src/CTS/pages/AssessmentEpa.vue
index b600e234..2e213e25 100644
--- a/VueApp/src/CTS/pages/AssessmentEpa.vue
+++ b/VueApp/src/CTS/pages/AssessmentEpa.vue
@@ -126,6 +126,7 @@ watch(selectedStudentId, () => {
 
             <StatusBanner
                 v-if="success"
+                v-model:visible="success"
                 type="success"
                 dismissible
             >
@@ -154,13 +155,13 @@ watch(selectedStudentId, () => {
                     v-bind="studentEpa"
                     v-show="selectedStudentId > 0"
                 >
-                    <div
-                        class="bg-red-5 text-white q-pa-sm rounded q-mb-md"
+                    <StatusBanner
                         v-if="submitErrors"
+                        type="error"
                     >
                         Please make sure you have selected a service, EPA, student, a level on the entrustment scale,
                         and entered a comment.
-                    </div>
+                    </StatusBanner>
                     <LevelSelect
                         level-type="epa"
                         @level-change="(selectedLevelId: number) => (levelId = selectedLevelId)"
diff --git a/VueApp/src/CTS/pages/AssessmentEpaEdit.vue b/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
index 317ec7c2..60819a0b 100644
--- a/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
+++ b/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
@@ -76,6 +76,7 @@ getStudentEpa()
         >
             <StatusBanner
                 v-if="success"
+                v-model:visible="success"
                 type="success"
                 dismissible
             >
@@ -110,13 +111,13 @@ getStudentEpa()
                 </div>
             </div>
             <q-form @submit="submitEpa">
-                <div
-                    class="bg-red-5 text-white q-pa-sm rounded"
+                <StatusBanner
                     v-if="submitErrors?.message?.length > 0"
+                    type="error"
                 >
                     {{ submitErrors.message }}
                     Please make sure you have selected a service, EPA, student, and a level on the entrustment scale.
-                </div>
+                </StatusBanner>
                 <LevelSelect
                     level-type="epa"
                     @level-change="(selectedLevelId: number) => (levelId = selectedLevelId)"
diff --git a/VueApp/src/CTS/pages/CourseStudents.vue b/VueApp/src/CTS/pages/CourseStudents.vue
index 4d5453ce..91d94757 100644
--- a/VueApp/src/CTS/pages/CourseStudents.vue
+++ b/VueApp/src/CTS/pages/CourseStudents.vue
@@ -12,6 +12,7 @@ const student = ref("")
                 dense
                 options-dense
                 outlined
+                label="Student"
                 :options="['Student 1', 'Student 2']"
                 v-model="student"
             ></q-select>
@@ -28,22 +29,23 @@ const student = ref("")
             >
                 <thead>
                     <tr>
-                        <th>Assess Competency</th>
+                        <th class="text-center">Assess Competency</th>
                         <th class="text-left">Student</th>
                         <th class="text-left">Time</th>
                         <th class="text-center">Manually Added</th>
-                        <th class="text-left">Remove</th>
+                        <th class="text-center">Remove</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 flat
                                 icon="assignment"
                                 size="sm"
                                 color="primary"
+                                aria-label="Assess competency for Montserrat Armero"
                                 to="AssessmentCompetency?studentId=23631&sessionId="
                             ></q-btn>
                         </td>
@@ -54,26 +56,29 @@ const student = ref("")
                                 name="check"
                                 color="primary"
                                 size="sm"
+                                aria-label="Manually added"
                             ></q-icon>
                         </td>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 icon="delete"
                                 color="negative"
                                 flat
                                 size="sm"
+                                aria-label="Remove Montserrat Armero"
                             ></q-btn>
                         </td>
                     </tr>
                     <tr>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 flat
                                 icon="assignment"
                                 size="sm"
                                 color="primary"
+                                aria-label="Assess competency for Hailey Atwood"
                                 to="AssessmentCompetency?studentId=34123&sessionId="
                             ></q-btn>
                         </td>
@@ -84,26 +89,29 @@ const student = ref("")
                                 name="check"
                                 color="primary"
                                 size="sm"
+                                aria-label="Manually added"
                             ></q-icon>
                         </td>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 icon="delete"
                                 color="negative"
                                 flat
                                 size="sm"
+                                aria-label="Remove Hailey Atwood"
                             ></q-btn>
                         </td>
                     </tr>
                     <tr>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 flat
                                 icon="assignment"
                                 size="sm"
                                 color="primary"
+                                aria-label="Assess competency for Xander Avila"
                                 to="AssessmentCompetency?studentId=34158&sessionId="
                             ></q-btn>
                         </td>
@@ -114,15 +122,17 @@ const student = ref("")
                                 name="check"
                                 color="primary"
                                 size="sm"
+                                aria-label="Manually added"
                             ></q-icon>
                         </td>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 icon="delete"
                                 color="negative"
                                 flat
                                 size="sm"
+                                aria-label="Remove Xander Avila"
                             ></q-btn>
                         </td>
                     </tr>
diff --git a/VueApp/src/CTS/pages/ManageLevels.vue b/VueApp/src/CTS/pages/ManageLevels.vue
index 9847ab40..dc79aac3 100644
--- a/VueApp/src/CTS/pages/ManageLevels.vue
+++ b/VueApp/src/CTS/pages/ManageLevels.vue
@@ -144,7 +144,7 @@ loadLevels()
                 @click="showForm = true"
             ></q-btn>
         </div>
-        <div v-if="Object.keys(level).length">
+        <div v-if="showForm">
             {{ level?.levelId ? "Update" : "Add" }} Level
             <div class="row">
                 <q-toggle
diff --git a/VueApp/src/CTS/pages/MyAssessments.vue b/VueApp/src/CTS/pages/MyAssessments.vue
index ea605c85..e5f18178 100644
--- a/VueApp/src/CTS/pages/MyAssessments.vue
+++ b/VueApp/src/CTS/pages/MyAssessments.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar"
-import { ref, inject } from "vue"
+import { ref, computed, inject } from "vue"
 import type { Ref } from "vue"
 import { useRoute } from "vue-router"
 import { useUserStore } from "@/store/UserStore"
@@ -26,6 +26,8 @@ const showDetails = ref([]) as Ref<boolean[]>
 
 const showAssessmentDetail = ref(false)
 
+const anyExpanded = computed(() => showDetails.value.some((s) => s))
+
 async function load() {
     const $q = useQuasar()
     $q.loading.show({
@@ -88,16 +90,9 @@ function getText(date: Date, enteredBy: string, levelName: string, comment: stri
 }
 
 function toggleExpandAll() {
-    let anyExpanded = false
-    for (let i = 0; i < showDetails.value.length; i++) {
-        if (showDetails.value[i]) {
-            anyExpanded = true
-            break
-        }
-    }
-
+    const expand = !anyExpanded.value
     for (let i = 0; i < showDetails.value.length; i++) {
-        showDetails.value[i] = !anyExpanded
+        showDetails.value[i] = expand
     }
 }
 
@@ -110,12 +105,12 @@ load()
 </script>
 <template>
     <div v-if="loaded">
-        <h2>
+        <h1>
             <span v-if="showPersonName && person != null"
                 >Assessments for {{ person.firstName }} {{ person.lastName }}</span
             >
             <span v-else>My Assessments</span>
-        </h2>
+        </h1>
 
         <q-dialog v-model="showAssessmentDetail">
             <q-card style="width: 700px; max-width: 80vw">
@@ -164,15 +159,16 @@ load()
             </q-card>
         </q-dialog>
 
-        <div class="row">
+        <div class="row items-center">
             <div class="col col-md-10 col-lg-7 q-mr-sm">
-                <h3>Entrustable Professional Activities</h3>
+                <h2>Entrustable Professional Activities</h2>
             </div>
             <div class="col-1">
                 <q-btn
                     dense
                     color="secondary"
-                    :icon="showDetails.find((s) => s) != undefined ? 'expand_less' : 'expand_more'"
+                    :icon="anyExpanded ? 'expand_less' : 'expand_more'"
+                    :aria-label="anyExpanded ? 'Collapse all EPAs' : 'Expand all EPAs'"
                     @click="toggleExpandAll()"
                 ></q-btn>
             </div>
@@ -200,6 +196,8 @@ load()
                 <q-btn
                     dense
                     :icon="showDetails[index] ? 'expand_less' : 'expand_more'"
+                    :aria-label="`${showDetails[index] ? 'Collapse' : 'Expand'} details for ${epa.name}`"
+                    :aria-expanded="showDetails[index]"
                     @click="showDetails[index] = !showDetails[index]"
                     v-if="getAssessmentsForEpa(epa.epaId).length > 0"
                 />
diff --git a/VueApp/src/components/StatusBanner.vue b/VueApp/src/components/StatusBanner.vue
index a83128da..ae5a7b36 100644
--- a/VueApp/src/components/StatusBanner.vue
+++ b/VueApp/src/components/StatusBanner.vue
@@ -4,6 +4,7 @@
         :class="bannerClass"
         :role="ariaRole"
         rounded
+        inline-actions
     >
         <template #avatar>
             <q-icon
@@ -35,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue"
+import { computed } from "vue"
 
 type BannerType = "success" | "error" | "warning" | "info"
 type LiveMode = "off" | "polite" | "assertive"
@@ -52,7 +53,7 @@ const {
     dismissible?: boolean
 }>()
 
-const visible = ref(true)
+const visible = defineModel<boolean>("visible", { default: true })
 
 const typeConfig: Record<BannerType, { icon: string; bg: string; iconCls: string }> = {
     success: { icon: "check_circle", bg: "status-banner-success", iconCls: "text-positive" },
diff --git a/VueApp/src/layouts/ViperLayoutSimple.vue b/VueApp/src/layouts/ViperLayoutSimple.vue
index 157f0baa..ad98613a 100644
--- a/VueApp/src/layouts/ViperLayoutSimple.vue
+++ b/VueApp/src/layouts/ViperLayoutSimple.vue
@@ -9,6 +9,8 @@ export type BreadCrumb = {
     name: string
 }
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<{
     breadcrumbs?: BreadCrumb[]
 }>()

From 120b61bdc80c34332e6f992e5f9c6439af70c1ca Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Thu, 16 Apr 2026 12:26:09 -0700
Subject: [PATCH 12/13] VPR-104 fix(a11y): CTS rating privacy and assessment
 layout polish

- AssessmentBubble aria-label reads the rating name (e.g. "Trust with
  indirect supervision") instead of "Rating N of 5" so low ratings
  are not announced to students; tests lock in the contract.
- MyAssessments: realign expanded details under the EPA name, move
  toggles to the left edge, widen the comment, and show the rating
  pill (instead of the bubble+label pair) in the details modal.
- LevelSelect paints the selected level in its rating color so
  sighted users get the same feedback the bubble list conveys.
- AssessmentEpaEdit promotes the EPA title to h1 to fix heading
  order; AssessmentList search input gains a visible outline.
---
 .../CTS/__tests__/assessment-bubble.test.ts   | 160 ++++++++++++++++++
 VueApp/src/CTS/assets/cts.css                 |  95 ++++++++++-
 .../src/CTS/components/AssessmentBubble.vue   | 134 +++++----------
 VueApp/src/CTS/components/LevelSelect.vue     |  30 +++-
 VueApp/src/CTS/pages/AssessmentEpaEdit.vue    |   4 +-
 VueApp/src/CTS/pages/AssessmentList.vue       |   3 +-
 VueApp/src/CTS/pages/MyAssessments.vue        | 109 ++++++------
 7 files changed, 379 insertions(+), 156 deletions(-)
 create mode 100644 VueApp/src/CTS/__tests__/assessment-bubble.test.ts

diff --git a/VueApp/src/CTS/__tests__/assessment-bubble.test.ts b/VueApp/src/CTS/__tests__/assessment-bubble.test.ts
new file mode 100644
index 00000000..a15f0dae
--- /dev/null
+++ b/VueApp/src/CTS/__tests__/assessment-bubble.test.ts
@@ -0,0 +1,160 @@
+import { mount } from "@vue/test-utils"
+import { Quasar } from "quasar"
+
+import AssessmentBubble from "../components/AssessmentBubble.vue"
+
+/**
+ * Tests for AssessmentBubble — the rating dot rendered on CTS assessment lists.
+ *
+ * Focus areas:
+ * 1. Privacy: aria-label must surface the descriptive rating label, never the
+ *    numeric value. Students should not hear "Rating 1 of 5" from a screen
+ *    reader when they are low-rated.
+ * 2. Class mapping: value/maxValue drive the bubbleClass contract consumed
+ *    by cts.css.
+ * 3. Click contract: clickable variant (id prop set) emits bubble-click with
+ *    the id; non-clickable variant renders as a non-interactive span.
+ */
+
+function createWrapper(props: Record<string, unknown>) {
+    return mount(AssessmentBubble, {
+        props: props as never,
+        global: {
+            plugins: [[Quasar, {}]],
+        },
+    })
+}
+
+describe(AssessmentBubble, () => {
+    describe("aria-label privacy", () => {
+        it("uses levelName on the clickable button and does not expose the numeric value", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 1,
+                levelName: "Trust with indirect supervision",
+                id: 42,
+            })
+
+            const label = wrapper.get("button").attributes("aria-label")!
+            expect(label).toContain("Trust with indirect supervision")
+            expect(label).not.toMatch(/\b1 of 5\b/i)
+            expect(label).not.toMatch(/rating\s+\d/i)
+        })
+
+        it("uses levelName on the standalone span and does not expose the numeric value", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 2,
+                levelName: "Trust with direct supervision",
+            })
+
+            const label = wrapper.get('span[role="img"]').attributes("aria-label")!
+            expect(label).toBe("Trust with direct supervision")
+            expect(label).not.toMatch(/\b2 of 5\b/i)
+        })
+
+        it("appends open-details hint on the clickable variant", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 3,
+                levelName: "Independent remote supervision",
+                id: 7,
+            })
+
+            expect(wrapper.get("button").attributes("aria-label")).toBe(
+                "Independent remote supervision, open assessment details",
+            )
+        })
+
+        it("falls back to a generic hint when levelName is missing on a clickable bubble", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 3,
+                id: 7,
+            })
+
+            expect(wrapper.get("button").attributes("aria-label")).toBe("Open assessment details")
+        })
+    })
+
+    describe("bubbleClass contract", () => {
+        it.each([
+            [1, "assessmentBubble5_1"],
+            [2, "assessmentBubble5_2"],
+            [3, "assessmentBubble5_3"],
+            [4, "assessmentBubble5_4"],
+            [5, "assessmentBubble5_5"],
+        ])("maps value=%i to %s", (value, expected) => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value,
+                levelName: "Label",
+            })
+
+            expect(wrapper.get('span[role="img"]').classes()).toContain(expected)
+        })
+
+        it.each([0, 6])("yields no level class for out-of-range value=%i", (value) => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value,
+                levelName: "Label",
+            })
+
+            const classes = wrapper.get('span[role="img"]').classes()
+            expect(classes.some((c) => c.startsWith("assessmentBubble5_"))).toBeFalsy()
+        })
+
+        it("yields no level class when maxValue is not 5", () => {
+            const wrapper = createWrapper({
+                maxValue: 3,
+                value: 2,
+                levelName: "Label",
+            })
+
+            const classes = wrapper.get('span[role="img"]').classes()
+            expect(classes.some((c) => c.startsWith("assessmentBubble5_"))).toBeFalsy()
+        })
+    })
+
+    describe("click behaviour", () => {
+        it("renders a button and emits bubble-click with the id when clicked", async () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 3,
+                levelName: "Label",
+                id: 99,
+            })
+
+            await wrapper.get("button").trigger("click")
+
+            expect(wrapper.emitted("bubble-click")).toEqual([[99]])
+        })
+
+        it("renders a non-interactive span and does not emit when id is omitted", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 3,
+                levelName: "Label",
+            })
+
+            expect(wrapper.find("button").exists()).toBeFalsy()
+            expect(wrapper.find('span[role="img"]').exists()).toBeTruthy()
+            expect(wrapper.emitted("bubble-click")).toBeUndefined()
+        })
+    })
+
+    describe("bubble content", () => {
+        it("does not render the numeric value inside the bubble", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 4,
+                levelName: "Label",
+                id: 1,
+            })
+
+            const bubble = wrapper.get("span.assessmentBubble")
+            expect(bubble.text()).toBe("")
+        })
+    })
+})
diff --git a/VueApp/src/CTS/assets/cts.css b/VueApp/src/CTS/assets/cts.css
index 35d9d7a7..62cd7149 100644
--- a/VueApp/src/CTS/assets/cts.css
+++ b/VueApp/src/CTS/assets/cts.css
@@ -1,6 +1,12 @@
 .assessmentGroup {
     border-top: 1px solid silver;
 }
+
+.expandToggleCol {
+    flex: 0 0 2.5rem;
+    max-width: 2.5rem;
+    text-align: right;
+}
 /*
 .assessmentbubble {
     width: 15px;
@@ -51,24 +57,65 @@
     color: rgba(11,3,139,1);
 }
 */
+.assessmentBubbleTrigger {
+    background: none;
+    border: 0;
+    padding: 0;
+    margin: 0 0.25rem 0 0;
+    line-height: 0;
+    color: inherit;
+    cursor: pointer;
+}
+
+.assessmentBubble[role="img"] {
+    margin-right: 0.25rem;
+}
+
+.assessmentBubbleTooltipText {
+    white-space: pre-wrap;
+}
+
+.assessmentBubbleTrigger:focus-visible {
+    outline: 2px solid var(--q-primary);
+    outline-offset: 2px;
+    border-radius: 50%;
+}
+
+.assessmentBubble {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1;
+}
+
 .assessmentBubble5_1 {
-    color: rgba(62, 127, 238, 0.3);
+    background-color: rgba(62, 127, 238, 0.3);
+    color: #212529;
 }
 
 .assessmentBubble5_2 {
-    color: rgba(62, 127, 238, 0.7);
+    background-color: rgba(62, 127, 238, 0.7);
+    color: #212529;
 }
 
 .assessmentBubble5_3 {
-    color: rgba(62, 127, 238, 1);
+    background-color: rgba(62, 127, 238, 1);
+    color: #000;
 }
 
 .assessmentBubble5_4 {
-    color: rgba(0, 44, 175, 0.8);
+    background-color: rgba(0, 44, 175, 0.8);
+    color: #fff;
 }
 
 .assessmentBubble5_5 {
-    color: rgba(11, 3, 139, 1);
+    background-color: rgba(11, 3, 139, 1);
+    color: #fff;
 }
 
 .assessmentBubbleCloser5_1 {
@@ -91,6 +138,42 @@
     color: rgba(2, 40, 150, 1);
 }
 
+.levelChip {
+    display: inline-block;
+    padding: 0.125rem 0.625rem;
+    border-radius: 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.25;
+    white-space: nowrap;
+    background-color: #adb5bd;
+    color: #212529;
+}
+.levelChip--1 {
+    background-color: rgba(62, 127, 238, 0.3);
+    color: #212529;
+}
+.levelChip--2 {
+    background-color: rgba(62, 127, 238, 0.7);
+    color: #212529;
+}
+.levelChip--3 {
+    background-color: rgba(62, 127, 238, 1);
+    color: #000;
+}
+.levelChip--4 {
+    background-color: rgba(0, 44, 175, 0.8);
+    color: #fff;
+}
+.levelChip--5 {
+    background-color: rgba(11, 3, 139, 1);
+    color: #fff;
+}
+
+.assessmentComment {
+    font-style: italic;
+}
+
 /*
 .assessmentbubble.ab5_1 {
     background-color: rgb(169, 208, 255)
@@ -105,6 +188,6 @@
     background-color: rgb(42, 60, 152)
 }
 .assessmentbubble.ab5_5 {
-    background-color: rgb(0, 11, 113) 
+    background-color: rgb(0, 11, 113)
 }
 */
diff --git a/VueApp/src/CTS/components/AssessmentBubble.vue b/VueApp/src/CTS/components/AssessmentBubble.vue
index 2f9aed82..c4a01381 100644
--- a/VueApp/src/CTS/components/AssessmentBubble.vue
+++ b/VueApp/src/CTS/components/AssessmentBubble.vue
@@ -1,34 +1,42 @@
 <script setup lang="ts">
 import { computed } from "vue"
 
-const props = withDefaults(
-    defineProps<{
-        maxValue: number
-        value: number
-        text?: string
-        id?: number
-    }>(),
-    {
-        text: undefined,
-        id: undefined,
+const props = defineProps({
+    maxValue: {
+        type: Number,
+        required: true,
     },
-)
+    value: {
+        type: Number,
+        required: true,
+    },
+    levelName: {
+        type: String,
+        default: "",
+    },
+    text: {
+        type: String,
+        default: undefined,
+    },
+    id: {
+        type: Number,
+        default: undefined,
+    },
+})
 
-const emit = defineEmits<{
-    "bubble-click": [id: number]
-}>()
+const emit = defineEmits(["bubble-click"])
 
-const levelClass = computed(() => {
-    if (props.maxValue === 5 && props.value >= 1 && props.value <= 5) {
-        return `assessmentBubble--level-${props.value}`
-    }
-    return ""
-})
+const classes5 = [
+    "assessmentBubble5_1",
+    "assessmentBubble5_2",
+    "assessmentBubble5_3",
+    "assessmentBubble5_4",
+    "assessmentBubble5_5",
+]
 
-const displayValue = computed(() => (props.value >= 1 && props.value <= props.maxValue ? props.value : "?"))
+const isValidValue = computed(() => props.maxValue === 5 && props.value > 0 && props.value <= 5)
 
-const staticLabel = computed(() => `Rating ${displayValue.value} of ${props.maxValue}`)
-const clickableLabel = computed(() => `${staticLabel.value}, open details`)
+const bubbleClass = computed(() => (isValidValue.value ? (classes5[props.value - 1] ?? "") : ""))
 
 function clickBubble() {
     if (props.id !== undefined) {
@@ -40,79 +48,23 @@ function clickBubble() {
     <button
         v-if="id !== undefined"
         type="button"
-        :class="['assessmentBubble', 'assessmentBubble--clickable', levelClass]"
-        :aria-label="clickableLabel"
+        class="assessmentBubbleTrigger"
+        :aria-label="levelName ? `${levelName}, open assessment details` : 'Open assessment details'"
         @click="clickBubble"
     >
-        <span aria-hidden="true">{{ displayValue }}</span>
-        <q-tooltip
-            style="white-space: pre-wrap"
-            class="text-body2"
-        >
-            <strong>Click to open details</strong>
-            <br />
-            {{ props.text }}
+        <span
+            :class="['assessmentBubble', bubbleClass]"
+            aria-hidden="true"
+        />
+        <q-tooltip class="text-body2">
+            <div><strong>Click to open details</strong></div>
+            <div class="assessmentBubbleTooltipText">{{ props.text }}</div>
         </q-tooltip>
     </button>
     <span
         v-else
-        :class="['assessmentBubble', levelClass]"
+        :class="['assessmentBubble', bubbleClass]"
         role="img"
-        :aria-label="staticLabel"
-    >
-        <span aria-hidden="true">{{ displayValue }}</span>
-    </span>
+        :aria-label="levelName"
+    />
 </template>
-<style scoped>
-.assessmentBubble {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.75rem;
-    height: 1.75rem;
-    margin: 0 0.125rem;
-    border: 0.0625rem solid var(--ucdavis-blue-100);
-    border-radius: 50%;
-    background-color: var(--ucdavis-blue-70);
-    color: white;
-    font-weight: 700;
-    font-size: 0.875rem;
-    line-height: 1;
-    padding: 0;
-    vertical-align: middle;
-}
-
-.assessmentBubble--clickable {
-    cursor: pointer;
-}
-
-.assessmentBubble--clickable:hover,
-.assessmentBubble--clickable:focus {
-    filter: brightness(1.1);
-}
-
-.assessmentBubble--clickable:focus-visible {
-    outline: 0.125rem solid var(--ucdavis-gold-90);
-    outline-offset: 0.125rem;
-}
-
-.assessmentBubble--level-1 {
-    background-color: var(--ucdavis-blue-70);
-}
-
-.assessmentBubble--level-2 {
-    background-color: var(--ucdavis-blue-80);
-}
-
-.assessmentBubble--level-3 {
-    background-color: var(--ucdavis-blue-90);
-}
-
-.assessmentBubble--level-4 {
-    background-color: var(--ucdavis-blue-100);
-}
-
-.assessmentBubble--level-5 {
-    background-color: #011a38;
-}
-</style>
diff --git a/VueApp/src/CTS/components/LevelSelect.vue b/VueApp/src/CTS/components/LevelSelect.vue
index 110af5cc..14aef714 100644
--- a/VueApp/src/CTS/components/LevelSelect.vue
+++ b/VueApp/src/CTS/components/LevelSelect.vue
@@ -73,7 +73,10 @@ getLevels()
                 flat
                 size="md"
                 dense
-                :class="selectedLevel.levelId == level.levelId ? 'selectedLevel q-py-sm' : 'q-py-sm'"
+                :class="[
+                    'q-py-sm',
+                    selectedLevel.levelId == level.levelId ? ['selectedLevel', `selectedLevel--${level.order}`] : '',
+                ]"
                 @click="selectedLevel = level"
             >
                 <q-tooltip
@@ -109,7 +112,9 @@ getLevels()
                 no-caps
                 size="md"
                 dense
-                :class="selectedLevel.levelId == level.levelId ? 'selectedLevel' : ''"
+                :class="
+                    selectedLevel.levelId == level.levelId ? ['selectedLevel', `selectedLevel--${level.order}`] : ''
+                "
                 @click="selectedLevel = level"
             >
                 <template #default> {{ level.order }}. {{ level.levelName }} </template>
@@ -154,6 +159,27 @@ div.levelSelection button.selectedLevel {
     color: white;
 }
 
+div.levelSelection button.selectedLevel.selectedLevel--1 {
+    background-color: rgba(62, 127, 238, 0.3);
+    color: #212529;
+}
+div.levelSelection button.selectedLevel.selectedLevel--2 {
+    background-color: rgba(62, 127, 238, 0.7);
+    color: #212529;
+}
+div.levelSelection button.selectedLevel.selectedLevel--3 {
+    background-color: rgba(62, 127, 238, 1);
+    color: #000;
+}
+div.levelSelection button.selectedLevel.selectedLevel--4 {
+    background-color: rgba(0, 44, 175, 0.8);
+    color: #fff;
+}
+div.levelSelection button.selectedLevel.selectedLevel--5 {
+    background-color: rgba(11, 3, 139, 1);
+    color: #fff;
+}
+
 .levelHover {
     font-size: 0.8rem;
 }
diff --git a/VueApp/src/CTS/pages/AssessmentEpaEdit.vue b/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
index 60819a0b..a73f67f3 100644
--- a/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
+++ b/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
@@ -84,7 +84,7 @@ getStudentEpa()
             </StatusBanner>
             <div class="row justify-between items-end q-mb-lg">
                 <div class="col-12 col-md-6 col-lg-5">
-                    <h2 class="epa">{{ studentEpa.epaName }}</h2>
+                    <h1 class="epa">{{ studentEpa.epaName }}</h1>
                 </div>
                 <div class="col-12 col-md-6 col-lg-3 q-mr-md text-weight-medium text-body1">
                     Service: {{ studentEpa.serviceName }}
@@ -166,7 +166,7 @@ getStudentEpa()
 </template>
 
 <style scoped>
-h2.epa {
+h1.epa {
     font-weight: 400;
     font-size: 2rem;
     margin-bottom: 4px;
diff --git a/VueApp/src/CTS/pages/AssessmentList.vue b/VueApp/src/CTS/pages/AssessmentList.vue
index d66cb124..2adfa159 100644
--- a/VueApp/src/CTS/pages/AssessmentList.vue
+++ b/VueApp/src/CTS/pages/AssessmentList.vue
@@ -268,8 +268,9 @@ loadPageData()
     >
         <template #top-right>
             <q-input
-                borderless
+                outlined
                 dense
+                bg-color="white"
                 debounce="300"
                 v-model="filter"
                 placeholder="Search"
diff --git a/VueApp/src/CTS/pages/MyAssessments.vue b/VueApp/src/CTS/pages/MyAssessments.vue
index e5f18178..41d88d74 100644
--- a/VueApp/src/CTS/pages/MyAssessments.vue
+++ b/VueApp/src/CTS/pages/MyAssessments.vue
@@ -133,12 +133,9 @@ load()
                     <div class="row">
                         <div class="col-12">
                             <strong>Rating:</strong>
-                            <AssessmentBubble
-                                class="q-ml-sm"
-                                :max-value="5"
-                                :value="epaAssessment.levelValue"
-                            ></AssessmentBubble>
-                            {{ epaAssessment.levelName }}
+                            <span :class="['levelChip', 'levelChip--' + epaAssessment.levelValue, 'q-ml-sm']">
+                                {{ epaAssessment.levelName }}
+                            </span>
                         </div>
                     </div>
                     <div class="row q-mt-xs">
@@ -160,10 +157,7 @@ load()
         </q-dialog>
 
         <div class="row items-center">
-            <div class="col col-md-10 col-lg-7 q-mr-sm">
-                <h2>Entrustable Professional Activities</h2>
-            </div>
-            <div class="col-1">
+            <div class="expandToggleCol">
                 <q-btn
                     dense
                     color="secondary"
@@ -172,27 +166,16 @@ load()
                     @click="toggleExpandAll()"
                 ></q-btn>
             </div>
+            <div class="col col-md-10 col-lg-7 q-ml-md">
+                <h2>Entrustable Professional Activities</h2>
+            </div>
         </div>
         <div
             v-for="(epa, index) in epas"
             :key="epa.epaId ?? `epa-${index}`"
             class="row q-mt-sm q-pt-sm assessmentGroup"
         >
-            <div class="col col-md-4 col-lg-3 q-mr-sm">
-                {{ epa.name }}
-            </div>
-            <div class="col col-md-6 col-lg-4">
-                <AssessmentBubble
-                    :max-value="5"
-                    :value="a.levelValue"
-                    :text="getText(a.encounterDate, a.enteredByName, a.levelName, a?.comment, a?.serviceName)"
-                    :id="a.encounterId"
-                    @bubble-click="handleAssessmentClick"
-                    v-for="a in getAssessmentsForEpa(epa.epaId)"
-                    :key="a.encounterId"
-                />
-            </div>
-            <div class="col-1">
+            <div class="expandToggleCol">
                 <q-btn
                     dense
                     :icon="showDetails[index] ? 'expand_less' : 'expand_more'"
@@ -202,39 +185,57 @@ load()
                     v-if="getAssessmentsForEpa(epa.epaId).length > 0"
                 />
             </div>
-            <q-slide-transition>
-                <div
-                    class="col-12 q-mb-md"
-                    v-if="showDetails[index]"
-                    :key="'epadetails' + index"
-                >
+            <div class="col col-md-10 col-lg-7 q-ml-md">
+                <div class="row items-center">
+                    <div class="col-12 col-sm q-mr-sm">
+                        {{ epa.name }}
+                    </div>
+                    <div class="col-12 col-sm-auto">
+                        <AssessmentBubble
+                            :max-value="5"
+                            :value="a.levelValue"
+                            :level-name="a.levelName"
+                            :text="getText(a.encounterDate, a.enteredByName, a.levelName, a?.comment, a?.serviceName)"
+                            :id="a.encounterId"
+                            @bubble-click="handleAssessmentClick"
+                            v-for="a in getAssessmentsForEpa(epa.epaId)"
+                            :key="a.encounterId"
+                        />
+                    </div>
+                </div>
+                <q-slide-transition>
                     <div
-                        v-for="a in getAssessmentsForEpa(epa.epaId)"
-                        :key="a.encounterId"
-                        class="row q-mb-sm"
+                        class="q-mb-md"
+                        v-if="showDetails[index]"
+                        :key="'epadetails' + index"
                     >
-                        <div class="col-2 col-sm-auto q-pr-sm">
-                            <AssessmentBubble
-                                :max-value="5"
-                                :value="a.levelValue"
-                            ></AssessmentBubble>
-                        </div>
-                        <div class="col-10 col-sm-5 col-md-3 col-lg-2">
-                            {{ formatDate(a.encounterDate.toString()) }}
-                            {{ a.enteredByName }}
-                        </div>
-                        <div class="col-10 offset-2 col-sm-5 offset-sm-1 offset-md-0 col-md-3 col-lg-2">
-                            {{ a.serviceName }}
-                        </div>
-                        <div class="col-10 offset-2 col-sm-5 offset-sm-1 offset-md-0 col-md-3 col-lg-2">
-                            {{ a.levelName }}
-                        </div>
-                        <div class="col-10 offset-2 offset-sm-1 offset-md-0 col-md-4 col-lg-5">
-                            {{ a.comment }}
+                        <div
+                            v-for="a in getAssessmentsForEpa(epa.epaId)"
+                            :key="a.encounterId"
+                            class="row q-mb-sm items-center q-col-gutter-sm"
+                        >
+                            <div class="col-12 col-sm-6 col-md-4">
+                                {{ formatDate(a.encounterDate.toString()) }}
+                                {{ a.enteredByName }}
+                            </div>
+                            <div class="col-12 col-sm-6 col-md-4">
+                                {{ a.serviceName }}
+                            </div>
+                            <div class="col-12 col-sm-auto">
+                                <span :class="['levelChip', 'levelChip--' + a.levelValue]">
+                                    {{ a.levelName }}
+                                </span>
+                            </div>
+                            <div
+                                v-if="a.comment"
+                                class="col-12 q-mt-xs text-grey-8 assessmentComment"
+                            >
+                                {{ a.comment }}
+                            </div>
                         </div>
                     </div>
-                </div>
-            </q-slide-transition>
+                </q-slide-transition>
+            </div>
         </div>
     </div>
 </template>

From 94d9153006a69d1c5e93ee6715bbe37c97877adc Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Mon, 20 Apr 2026 10:36:39 -0700
Subject: [PATCH 13/13] VPR-104 chore(cts): split
 MyAssessments/AssessmentBubble into separate branch

Restore MyAssessments.vue, AssessmentBubble.vue, cts.css, and remove
the new assessment-bubble.test.ts. These changes move to
VPR-104-accessibility-audit-CTS-myassessments for a separate PR.
---
 .../CTS/__tests__/assessment-bubble.test.ts   | 160 ------------------
 VueApp/src/CTS/assets/cts.css                 |  95 +----------
 .../src/CTS/components/AssessmentBubble.vue   |  84 +++++----
 VueApp/src/CTS/pages/MyAssessments.vue        | 148 ++++++++--------
 4 files changed, 115 insertions(+), 372 deletions(-)
 delete mode 100644 VueApp/src/CTS/__tests__/assessment-bubble.test.ts

diff --git a/VueApp/src/CTS/__tests__/assessment-bubble.test.ts b/VueApp/src/CTS/__tests__/assessment-bubble.test.ts
deleted file mode 100644
index a15f0dae..00000000
--- a/VueApp/src/CTS/__tests__/assessment-bubble.test.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-import { mount } from "@vue/test-utils"
-import { Quasar } from "quasar"
-
-import AssessmentBubble from "../components/AssessmentBubble.vue"
-
-/**
- * Tests for AssessmentBubble — the rating dot rendered on CTS assessment lists.
- *
- * Focus areas:
- * 1. Privacy: aria-label must surface the descriptive rating label, never the
- *    numeric value. Students should not hear "Rating 1 of 5" from a screen
- *    reader when they are low-rated.
- * 2. Class mapping: value/maxValue drive the bubbleClass contract consumed
- *    by cts.css.
- * 3. Click contract: clickable variant (id prop set) emits bubble-click with
- *    the id; non-clickable variant renders as a non-interactive span.
- */
-
-function createWrapper(props: Record<string, unknown>) {
-    return mount(AssessmentBubble, {
-        props: props as never,
-        global: {
-            plugins: [[Quasar, {}]],
-        },
-    })
-}
-
-describe(AssessmentBubble, () => {
-    describe("aria-label privacy", () => {
-        it("uses levelName on the clickable button and does not expose the numeric value", () => {
-            const wrapper = createWrapper({
-                maxValue: 5,
-                value: 1,
-                levelName: "Trust with indirect supervision",
-                id: 42,
-            })
-
-            const label = wrapper.get("button").attributes("aria-label")!
-            expect(label).toContain("Trust with indirect supervision")
-            expect(label).not.toMatch(/\b1 of 5\b/i)
-            expect(label).not.toMatch(/rating\s+\d/i)
-        })
-
-        it("uses levelName on the standalone span and does not expose the numeric value", () => {
-            const wrapper = createWrapper({
-                maxValue: 5,
-                value: 2,
-                levelName: "Trust with direct supervision",
-            })
-
-            const label = wrapper.get('span[role="img"]').attributes("aria-label")!
-            expect(label).toBe("Trust with direct supervision")
-            expect(label).not.toMatch(/\b2 of 5\b/i)
-        })
-
-        it("appends open-details hint on the clickable variant", () => {
-            const wrapper = createWrapper({
-                maxValue: 5,
-                value: 3,
-                levelName: "Independent remote supervision",
-                id: 7,
-            })
-
-            expect(wrapper.get("button").attributes("aria-label")).toBe(
-                "Independent remote supervision, open assessment details",
-            )
-        })
-
-        it("falls back to a generic hint when levelName is missing on a clickable bubble", () => {
-            const wrapper = createWrapper({
-                maxValue: 5,
-                value: 3,
-                id: 7,
-            })
-
-            expect(wrapper.get("button").attributes("aria-label")).toBe("Open assessment details")
-        })
-    })
-
-    describe("bubbleClass contract", () => {
-        it.each([
-            [1, "assessmentBubble5_1"],
-            [2, "assessmentBubble5_2"],
-            [3, "assessmentBubble5_3"],
-            [4, "assessmentBubble5_4"],
-            [5, "assessmentBubble5_5"],
-        ])("maps value=%i to %s", (value, expected) => {
-            const wrapper = createWrapper({
-                maxValue: 5,
-                value,
-                levelName: "Label",
-            })
-
-            expect(wrapper.get('span[role="img"]').classes()).toContain(expected)
-        })
-
-        it.each([0, 6])("yields no level class for out-of-range value=%i", (value) => {
-            const wrapper = createWrapper({
-                maxValue: 5,
-                value,
-                levelName: "Label",
-            })
-
-            const classes = wrapper.get('span[role="img"]').classes()
-            expect(classes.some((c) => c.startsWith("assessmentBubble5_"))).toBeFalsy()
-        })
-
-        it("yields no level class when maxValue is not 5", () => {
-            const wrapper = createWrapper({
-                maxValue: 3,
-                value: 2,
-                levelName: "Label",
-            })
-
-            const classes = wrapper.get('span[role="img"]').classes()
-            expect(classes.some((c) => c.startsWith("assessmentBubble5_"))).toBeFalsy()
-        })
-    })
-
-    describe("click behaviour", () => {
-        it("renders a button and emits bubble-click with the id when clicked", async () => {
-            const wrapper = createWrapper({
-                maxValue: 5,
-                value: 3,
-                levelName: "Label",
-                id: 99,
-            })
-
-            await wrapper.get("button").trigger("click")
-
-            expect(wrapper.emitted("bubble-click")).toEqual([[99]])
-        })
-
-        it("renders a non-interactive span and does not emit when id is omitted", () => {
-            const wrapper = createWrapper({
-                maxValue: 5,
-                value: 3,
-                levelName: "Label",
-            })
-
-            expect(wrapper.find("button").exists()).toBeFalsy()
-            expect(wrapper.find('span[role="img"]').exists()).toBeTruthy()
-            expect(wrapper.emitted("bubble-click")).toBeUndefined()
-        })
-    })
-
-    describe("bubble content", () => {
-        it("does not render the numeric value inside the bubble", () => {
-            const wrapper = createWrapper({
-                maxValue: 5,
-                value: 4,
-                levelName: "Label",
-                id: 1,
-            })
-
-            const bubble = wrapper.get("span.assessmentBubble")
-            expect(bubble.text()).toBe("")
-        })
-    })
-})
diff --git a/VueApp/src/CTS/assets/cts.css b/VueApp/src/CTS/assets/cts.css
index 62cd7149..35d9d7a7 100644
--- a/VueApp/src/CTS/assets/cts.css
+++ b/VueApp/src/CTS/assets/cts.css
@@ -1,12 +1,6 @@
 .assessmentGroup {
     border-top: 1px solid silver;
 }
-
-.expandToggleCol {
-    flex: 0 0 2.5rem;
-    max-width: 2.5rem;
-    text-align: right;
-}
 /*
 .assessmentbubble {
     width: 15px;
@@ -57,65 +51,24 @@
     color: rgba(11,3,139,1);
 }
 */
-.assessmentBubbleTrigger {
-    background: none;
-    border: 0;
-    padding: 0;
-    margin: 0 0.25rem 0 0;
-    line-height: 0;
-    color: inherit;
-    cursor: pointer;
-}
-
-.assessmentBubble[role="img"] {
-    margin-right: 0.25rem;
-}
-
-.assessmentBubbleTooltipText {
-    white-space: pre-wrap;
-}
-
-.assessmentBubbleTrigger:focus-visible {
-    outline: 2px solid var(--q-primary);
-    outline-offset: 2px;
-    border-radius: 50%;
-}
-
-.assessmentBubble {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: 50%;
-    font-size: 0.75rem;
-    font-weight: 600;
-    line-height: 1;
-}
-
 .assessmentBubble5_1 {
-    background-color: rgba(62, 127, 238, 0.3);
-    color: #212529;
+    color: rgba(62, 127, 238, 0.3);
 }
 
 .assessmentBubble5_2 {
-    background-color: rgba(62, 127, 238, 0.7);
-    color: #212529;
+    color: rgba(62, 127, 238, 0.7);
 }
 
 .assessmentBubble5_3 {
-    background-color: rgba(62, 127, 238, 1);
-    color: #000;
+    color: rgba(62, 127, 238, 1);
 }
 
 .assessmentBubble5_4 {
-    background-color: rgba(0, 44, 175, 0.8);
-    color: #fff;
+    color: rgba(0, 44, 175, 0.8);
 }
 
 .assessmentBubble5_5 {
-    background-color: rgba(11, 3, 139, 1);
-    color: #fff;
+    color: rgba(11, 3, 139, 1);
 }
 
 .assessmentBubbleCloser5_1 {
@@ -138,42 +91,6 @@
     color: rgba(2, 40, 150, 1);
 }
 
-.levelChip {
-    display: inline-block;
-    padding: 0.125rem 0.625rem;
-    border-radius: 0.75rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-    line-height: 1.25;
-    white-space: nowrap;
-    background-color: #adb5bd;
-    color: #212529;
-}
-.levelChip--1 {
-    background-color: rgba(62, 127, 238, 0.3);
-    color: #212529;
-}
-.levelChip--2 {
-    background-color: rgba(62, 127, 238, 0.7);
-    color: #212529;
-}
-.levelChip--3 {
-    background-color: rgba(62, 127, 238, 1);
-    color: #000;
-}
-.levelChip--4 {
-    background-color: rgba(0, 44, 175, 0.8);
-    color: #fff;
-}
-.levelChip--5 {
-    background-color: rgba(11, 3, 139, 1);
-    color: #fff;
-}
-
-.assessmentComment {
-    font-style: italic;
-}
-
 /*
 .assessmentbubble.ab5_1 {
     background-color: rgb(169, 208, 255)
@@ -188,6 +105,6 @@
     background-color: rgb(42, 60, 152)
 }
 .assessmentbubble.ab5_5 {
-    background-color: rgb(0, 11, 113)
+    background-color: rgb(0, 11, 113) 
 }
 */
diff --git a/VueApp/src/CTS/components/AssessmentBubble.vue b/VueApp/src/CTS/components/AssessmentBubble.vue
index c4a01381..7a7c700e 100644
--- a/VueApp/src/CTS/components/AssessmentBubble.vue
+++ b/VueApp/src/CTS/components/AssessmentBubble.vue
@@ -1,30 +1,22 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { ref, watch } from "vue"
 
-const props = defineProps({
-    maxValue: {
-        type: Number,
-        required: true,
+const props = withDefaults(
+    defineProps<{
+        maxValue: number
+        value: number
+        text?: string
+        id?: number
+    }>(),
+    {
+        text: undefined,
+        id: undefined,
     },
-    value: {
-        type: Number,
-        required: true,
-    },
-    levelName: {
-        type: String,
-        default: "",
-    },
-    text: {
-        type: String,
-        default: undefined,
-    },
-    id: {
-        type: Number,
-        default: undefined,
-    },
-})
+)
 
-const emit = defineEmits(["bubble-click"])
+const emit = defineEmits<{
+    "bubble-click": [id: number]
+}>()
 
 const classes5 = [
     "assessmentBubble5_1",
@@ -34,37 +26,41 @@ const classes5 = [
     "assessmentBubble5_5",
 ]
 
-const isValidValue = computed(() => props.maxValue === 5 && props.value > 0 && props.value <= 5)
+const bubbleClass = ref("")
 
-const bubbleClass = computed(() => (isValidValue.value ? (classes5[props.value - 1] ?? "") : ""))
+watch(props, () => {
+    setBubbleAttrs()
+})
 
 function clickBubble() {
     if (props.id !== undefined) {
         emit("bubble-click", props.id)
     }
 }
+
+function setBubbleAttrs() {
+    if (props.maxValue === 5 && props.value <= 5 && props.value > 0) {
+        const index = props.value - 1
+        bubbleClass.value = classes5[index] ?? ""
+    }
+}
+
+setBubbleAttrs()
 </script>
 <template>
-    <button
-        v-if="id !== undefined"
-        type="button"
-        class="assessmentBubbleTrigger"
-        :aria-label="levelName ? `${levelName}, open assessment details` : 'Open assessment details'"
+    <q-icon
+        name="circle"
+        size="sm"
+        :class="'assessmentIcon cursor-pointer ' + bubbleClass"
         @click="clickBubble"
     >
-        <span
-            :class="['assessmentBubble', bubbleClass]"
-            aria-hidden="true"
-        />
-        <q-tooltip class="text-body2">
-            <div><strong>Click to open details</strong></div>
-            <div class="assessmentBubbleTooltipText">{{ props.text }}</div>
+        <q-tooltip
+            style="white-space: pre-wrap"
+            class="text-body2"
+        >
+            <strong>Click to open details</strong>
+            <br />
+            {{ props.text }}
         </q-tooltip>
-    </button>
-    <span
-        v-else
-        :class="['assessmentBubble', bubbleClass]"
-        role="img"
-        :aria-label="levelName"
-    />
+    </q-icon>
 </template>
diff --git a/VueApp/src/CTS/pages/MyAssessments.vue b/VueApp/src/CTS/pages/MyAssessments.vue
index 41d88d74..9c49fa61 100644
--- a/VueApp/src/CTS/pages/MyAssessments.vue
+++ b/VueApp/src/CTS/pages/MyAssessments.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar"
-import { ref, computed, inject } from "vue"
+import { ref, inject } from "vue"
 import type { Ref } from "vue"
 import { useRoute } from "vue-router"
 import { useUserStore } from "@/store/UserStore"
@@ -26,8 +26,6 @@ const showDetails = ref([]) as Ref<boolean[]>
 
 const showAssessmentDetail = ref(false)
 
-const anyExpanded = computed(() => showDetails.value.some((s) => s))
-
 async function load() {
     const $q = useQuasar()
     $q.loading.show({
@@ -90,9 +88,16 @@ function getText(date: Date, enteredBy: string, levelName: string, comment: stri
 }
 
 function toggleExpandAll() {
-    const expand = !anyExpanded.value
+    let anyExpanded = false
+    for (let i = 0; i < showDetails.value.length; i++) {
+        if (showDetails.value[i]) {
+            anyExpanded = true
+            break
+        }
+    }
+
     for (let i = 0; i < showDetails.value.length; i++) {
-        showDetails.value[i] = expand
+        showDetails.value[i] = !anyExpanded
     }
 }
 
@@ -105,37 +110,29 @@ load()
 </script>
 <template>
     <div v-if="loaded">
-        <h1>
+        <h2>
             <span v-if="showPersonName && person != null"
                 >Assessments for {{ person.firstName }} {{ person.lastName }}</span
             >
             <span v-else>My Assessments</span>
-        </h1>
+        </h2>
 
         <q-dialog v-model="showAssessmentDetail">
             <q-card style="width: 700px; max-width: 80vw">
-                <q-card-section class="row items-center q-pb-none">
-                    <div class="text-h6">Assessment Details</div>
-                    <q-space />
-                    <q-btn
-                        icon="close"
-                        flat
-                        round
-                        dense
-                        aria-label="Close dialog"
-                        v-close-popup
-                    />
-                </q-card-section>
                 <q-card-section>
+                    <div class="text-h6">Assessment Details</div>
                     <div class="row">
                         <div class="col-12"><strong>EPA:</strong> {{ epaAssessment.epaName }}</div>
                     </div>
                     <div class="row">
                         <div class="col-12">
                             <strong>Rating:</strong>
-                            <span :class="['levelChip', 'levelChip--' + epaAssessment.levelValue, 'q-ml-sm']">
-                                {{ epaAssessment.levelName }}
-                            </span>
+                            <AssessmentBubble
+                                class="q-ml-sm"
+                                :max-value="5"
+                                :value="epaAssessment.levelValue"
+                            ></AssessmentBubble>
+                            {{ epaAssessment.levelName }}
                         </div>
                     </div>
                     <div class="row q-mt-xs">
@@ -156,86 +153,79 @@ load()
             </q-card>
         </q-dialog>
 
-        <div class="row items-center">
-            <div class="expandToggleCol">
+        <div class="row">
+            <div class="col col-md-10 col-lg-7 q-mr-sm">
+                <h3>Entrustable Professional Activities</h3>
+            </div>
+            <div class="col-1">
                 <q-btn
                     dense
                     color="secondary"
-                    :icon="anyExpanded ? 'expand_less' : 'expand_more'"
-                    :aria-label="anyExpanded ? 'Collapse all EPAs' : 'Expand all EPAs'"
+                    :icon="showDetails.find((s) => s) != undefined ? 'expand_less' : 'expand_more'"
                     @click="toggleExpandAll()"
                 ></q-btn>
             </div>
-            <div class="col col-md-10 col-lg-7 q-ml-md">
-                <h2>Entrustable Professional Activities</h2>
-            </div>
         </div>
         <div
             v-for="(epa, index) in epas"
             :key="epa.epaId ?? `epa-${index}`"
             class="row q-mt-sm q-pt-sm assessmentGroup"
         >
-            <div class="expandToggleCol">
+            <div class="col col-md-4 col-lg-3 q-mr-sm">
+                {{ epa.name }}
+            </div>
+            <div class="col col-md-6 col-lg-4">
+                <AssessmentBubble
+                    :max-value="5"
+                    :value="a.levelValue"
+                    :text="getText(a.encounterDate, a.enteredByName, a.levelName, a?.comment, a?.serviceName)"
+                    :id="a.encounterId"
+                    @bubble-click="handleAssessmentClick"
+                    v-for="a in getAssessmentsForEpa(epa.epaId)"
+                    :key="a.encounterId"
+                />
+            </div>
+            <div class="col-1">
                 <q-btn
                     dense
                     :icon="showDetails[index] ? 'expand_less' : 'expand_more'"
-                    :aria-label="`${showDetails[index] ? 'Collapse' : 'Expand'} details for ${epa.name}`"
-                    :aria-expanded="showDetails[index]"
                     @click="showDetails[index] = !showDetails[index]"
                     v-if="getAssessmentsForEpa(epa.epaId).length > 0"
                 />
             </div>
-            <div class="col col-md-10 col-lg-7 q-ml-md">
-                <div class="row items-center">
-                    <div class="col-12 col-sm q-mr-sm">
-                        {{ epa.name }}
-                    </div>
-                    <div class="col-12 col-sm-auto">
-                        <AssessmentBubble
-                            :max-value="5"
-                            :value="a.levelValue"
-                            :level-name="a.levelName"
-                            :text="getText(a.encounterDate, a.enteredByName, a.levelName, a?.comment, a?.serviceName)"
-                            :id="a.encounterId"
-                            @bubble-click="handleAssessmentClick"
-                            v-for="a in getAssessmentsForEpa(epa.epaId)"
-                            :key="a.encounterId"
-                        />
-                    </div>
-                </div>
-                <q-slide-transition>
+            <q-slide-transition>
+                <div
+                    class="col-12 q-mb-md"
+                    v-if="showDetails[index]"
+                    :key="'epadetails' + index"
+                >
                     <div
-                        class="q-mb-md"
-                        v-if="showDetails[index]"
-                        :key="'epadetails' + index"
+                        v-for="a in getAssessmentsForEpa(epa.epaId)"
+                        :key="a.encounterId"
+                        class="row q-mb-sm"
                     >
-                        <div
-                            v-for="a in getAssessmentsForEpa(epa.epaId)"
-                            :key="a.encounterId"
-                            class="row q-mb-sm items-center q-col-gutter-sm"
-                        >
-                            <div class="col-12 col-sm-6 col-md-4">
-                                {{ formatDate(a.encounterDate.toString()) }}
-                                {{ a.enteredByName }}
-                            </div>
-                            <div class="col-12 col-sm-6 col-md-4">
-                                {{ a.serviceName }}
-                            </div>
-                            <div class="col-12 col-sm-auto">
-                                <span :class="['levelChip', 'levelChip--' + a.levelValue]">
-                                    {{ a.levelName }}
-                                </span>
-                            </div>
-                            <div
-                                v-if="a.comment"
-                                class="col-12 q-mt-xs text-grey-8 assessmentComment"
-                            >
-                                {{ a.comment }}
-                            </div>
+                        <div class="col-2 col-sm-auto q-pr-sm">
+                            <AssessmentBubble
+                                :max-value="5"
+                                :value="a.levelValue"
+                            ></AssessmentBubble>
+                        </div>
+                        <div class="col-10 col-sm-5 col-md-3 col-lg-2">
+                            {{ formatDate(a.encounterDate.toString()) }}
+                            {{ a.enteredByName }}
+                        </div>
+                        <div class="col-10 offset-2 col-sm-5 offset-sm-1 offset-md-0 col-md-3 col-lg-2">
+                            {{ a.serviceName }}
+                        </div>
+                        <div class="col-10 offset-2 col-sm-5 offset-sm-1 offset-md-0 col-md-3 col-lg-2">
+                            {{ a.levelName }}
+                        </div>
+                        <div class="col-10 offset-2 offset-sm-1 offset-md-0 col-md-4 col-lg-5">
+                            {{ a.comment }}
                         </div>
                     </div>
-                </q-slide-transition>
-            </div>
+                </div>
+            </q-slide-transition>
         </div>
     </div>
 </template>