VPR-104 fix(a11y): CTS area accessibility improvements (PR 3 of 6)

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>
@@ -143,17 +148,38 @@ 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;
 }
 
+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;
 }

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

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()
 
@@ -63,7 +64,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>
@@ -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)"

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,14 @@ watch(selectedStudentId, () => {
                 </div>
             </div>
 
-            <q-banner
-                inline-actions
-                rounded
+            <StatusBanner
                 v-if="success"
-                class="bg-green text-white q-mb-md"
+                v-model:visible="success"
+                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">
@@ -161,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)"

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,24 +74,17 @@ getStudentEpa()
             class="col"
             v-show="studentEpa.encounterId"
         >
-            <q-banner
-                inline-actions
-                rounded
+            <StatusBanner
                 v-if="success"
-                class="bg-green text-white q-mb-md"
+                v-model:visible="success"
+                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>
+                    <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 }}
@@ -109,20 +103,21 @@ getStudentEpa()
                                     class="smallPhoto rounded-borders"
                                     loading="eager"
                                     :no-spinner="true"
+                                    :alt="`${studentEpa.studentName}'s photo`"
                                 ></q-img>
                             </q-avatar>
                         </div>
                     </div>
                 </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)"
@@ -171,7 +166,7 @@ getStudentEpa()
 </template>
 
 <style scoped>
-h2.epa {
+h1.epa {
     font-weight: 400;
     font-size: 2rem;
     margin-bottom: 4px;

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 },
@@ -138,7 +138,7 @@ loadPageData()
 </script>
 
 <template>
-    <h2>View Assessments</h2>
+    <h1>View Assessments</h1>
 
     <q-form>
         <div class="row">
@@ -268,8 +268,9 @@ loadPageData()
     >
         <template #top-right>
             <q-input
-                borderless
+                outlined
                 dense
+                bg-color="white"
                 debounce="300"
                 v-model="filter"
                 placeholder="Search"

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)
 
@@ -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">
@@ -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>