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

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>

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;
 }
 

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,21 +74,14 @@ 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>
@@ -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)"

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