From 1375e8dcbc8f2ed18ed56292a08ea8b9b62fad72 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Thu, 2 Apr 2026 18:12:44 -0700
Subject: [PATCH 1/3] VPR-104 fix(a11y): ClinicalScheduler, CMS, Computing,
 CAHFS accessibility (PR 6 of 6)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix C7: remove invalid aria-controls from SchedulerNavigation route tabs
- Fix S10: add keyboard handlers to WeekCell clickable card
  (tabindex, role, aria-label, @keyup.enter/space)
- Fix C4: add useRouteFocus to CMS, ClinicalScheduler, Computing, CAHFS routers
- Fix M6: replace color="green"→"positive", color="red-5"→"negative" in CMS
- Fix S8: text-grey-7→text-grey-8 on ClinicalSchedulerHome card descriptions
- Axe-core verified: zero code-fixable violations on all 4 areas
---
 VueApp/src/CAHFS/router/index.ts                     |  3 +++
 VueApp/src/CMS/pages/ManageLinkCollections.vue       | 12 ++++++------
 VueApp/src/CMS/router/index.ts                       |  3 +++
 .../components/SchedulerNavigation.vue               |  3 ---
 VueApp/src/ClinicalScheduler/components/WeekCell.vue |  6 ++++++
 .../pages/ClinicalSchedulerHome.vue                  |  4 ++--
 VueApp/src/ClinicalScheduler/router/index.ts         |  3 +++
 VueApp/src/Computing/router/index.ts                 |  3 +++
 8 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/VueApp/src/CAHFS/router/index.ts b/VueApp/src/CAHFS/router/index.ts
index 7a90ba20..8fd42f05 100644
--- a/VueApp/src/CAHFS/router/index.ts
+++ b/VueApp/src/CAHFS/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 as CAHFSRouter }
diff --git a/VueApp/src/CMS/pages/ManageLinkCollections.vue b/VueApp/src/CMS/pages/ManageLinkCollections.vue
index 8e05377a..b32863d7 100644
--- a/VueApp/src/CMS/pages/ManageLinkCollections.vue
+++ b/VueApp/src/CMS/pages/ManageLinkCollections.vue
@@ -21,7 +21,7 @@
                 </div>
                 <div class="col-auto">
                     <q-btn
-                        color="green"
+                        color="positive"
                         icon="add"
                         label="New Collection"
                         no-caps
@@ -80,7 +80,7 @@
                             label="Add"
                             dense
                             no-caps
-                            color="green"
+                            color="positive"
                             class="q-ml-lg q-pr-md"
                             icon="add"
                             @click="createTag"
@@ -116,7 +116,7 @@
                                     label="Delete"
                                     dense
                                     no-caps
-                                    color="red-5"
+                                    color="negative"
                                     class="q-ml-lg q-pr-md"
                                     icon="delete"
                                     @click="deleteTag(element.linkCollectionTagCategoryId)"
@@ -150,7 +150,7 @@
                         @click="deleteCollection"
                         dense
                         no-caps
-                        color="red-5"
+                        color="negative"
                         class="q-pr-md"
                     />
                 </q-card-actions>
@@ -161,7 +161,7 @@
             <h2 class="text-primary q-mt-lg q-mb-sm">Links in {{ collection?.linkCollection }}</h2>
             <q-btn
                 dense
-                color="green"
+                color="positive"
                 icon="add"
                 label="Add Link"
                 @click="showLinkDialog = true"
@@ -235,7 +235,7 @@
                             @click="deleteLink"
                             dense
                             no-caps
-                            color="red-5"
+                            color="negative"
                             class="q-pr-md"
                         />
                     </q-card-actions>
diff --git a/VueApp/src/CMS/router/index.ts b/VueApp/src/CMS/router/index.ts
index 7e7068ad..8bbd44b9 100644
--- a/VueApp/src/CMS/router/index.ts
+++ b/VueApp/src/CMS/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 as cmsRouter }
diff --git a/VueApp/src/ClinicalScheduler/components/SchedulerNavigation.vue b/VueApp/src/ClinicalScheduler/components/SchedulerNavigation.vue
index f5d7f85a..4564215f 100644
--- a/VueApp/src/ClinicalScheduler/components/SchedulerNavigation.vue
+++ b/VueApp/src/ClinicalScheduler/components/SchedulerNavigation.vue
@@ -14,7 +14,6 @@
             label="Home"
             to="/ClinicalScheduler/"
             :exact="true"
-            :aria-controls="`home-panel`"
             :id="`home-tab`"
             role="tab"
         />
@@ -24,7 +23,6 @@
             label="Schedule by Rotation"
             :to="{ name: 'RotationSchedule' }"
             :class="rotationTabClass"
-            :aria-controls="`rotation-panel`"
             :id="`rotation-tab`"
             role="tab"
         />
@@ -34,7 +32,6 @@
             :label="permissionsStore.clinicianViewLabel"
             :to="{ name: 'ClinicianSchedule' }"
             :class="clinicianTabClass"
-            :aria-controls="`clinician-panel`"
             :id="`clinician-tab`"
             role="tab"
         />
diff --git a/VueApp/src/ClinicalScheduler/components/WeekCell.vue b/VueApp/src/ClinicalScheduler/components/WeekCell.vue
index 989666c3..f49427d5 100644
--- a/VueApp/src/ClinicalScheduler/components/WeekCell.vue
+++ b/VueApp/src/ClinicalScheduler/components/WeekCell.vue
@@ -2,7 +2,12 @@
     <q-card
         :class="cardClasses"
         clickable
+        tabindex="0"
+        role="button"
+        :aria-label="`Week ${week.weekNumber} starting ${formatDate(week.dateStart)}, ${assignments.length} ${inflect('assignment', assignments.length)}`"
         @click="handleClick"
+        @keyup.enter.self.prevent="handleClick"
+        @keyup.space.self.prevent="handleClick"
         @touchstart="handleTouchStart"
         @touchend="handleTouchEnd"
         @touchmove="handleTouchMove"
@@ -151,6 +156,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue"
 import { useTimeoutFn } from "@vueuse/core"
+import { inflect } from "inflection"
 import { useDateFunctions } from "@/composables/DateFunctions"
 import { ANIMATIONS } from "../constants/app-constants"
 
diff --git a/VueApp/src/ClinicalScheduler/pages/ClinicalSchedulerHome.vue b/VueApp/src/ClinicalScheduler/pages/ClinicalSchedulerHome.vue
index 081e661a..15960282 100644
--- a/VueApp/src/ClinicalScheduler/pages/ClinicalSchedulerHome.vue
+++ b/VueApp/src/ClinicalScheduler/pages/ClinicalSchedulerHome.vue
@@ -66,7 +66,7 @@
                                         class="opacity-70"
                                     />
                                 </div>
-                                <p class="text-grey-7 q-mb-sm">Schedule clinicians for a specific rotation</p>
+                                <p class="text-grey-8 q-mb-sm">Schedule clinicians for a specific rotation</p>
                             </q-card-section>
                         </q-card>
                     </div>
@@ -107,7 +107,7 @@
                                         class="opacity-70"
                                     />
                                 </div>
-                                <p class="text-grey-7 q-mb-sm">Schedule rotations for a specific clinician</p>
+                                <p class="text-grey-8 q-mb-sm">Schedule rotations for a specific clinician</p>
                                 <q-banner
                                     v-if="permissionsStore.hasOnlyOwnSchedulePermission"
                                     dense
diff --git a/VueApp/src/ClinicalScheduler/router/index.ts b/VueApp/src/ClinicalScheduler/router/index.ts
index d9299ba9..844164df 100644
--- a/VueApp/src/ClinicalScheduler/router/index.ts
+++ b/VueApp/src/ClinicalScheduler/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router"
 import { clinicalSchedulerRoutes as routes } from "./routes"
 import { useRequireLogin } from "@/composables/RequireLogin"
+import { useRouteFocus } from "@/composables/use-route-focus"
 
 const baseUrl = import.meta.env.VITE_VIPER_HOME
 const router = createRouter({
@@ -14,4 +15,6 @@ router.beforeEach((to) => {
     return requireLogin(true, "SVMSecure.ClnSched")
 })
 
+useRouteFocus(router)
+
 export { router as clinicalSchedulerRouter }
diff --git a/VueApp/src/Computing/router/index.ts b/VueApp/src/Computing/router/index.ts
index 342c133b..ff93d5eb 100644
--- a/VueApp/src/Computing/router/index.ts
+++ b/VueApp/src/Computing/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router"
 import { routes } from "./routes"
 import { useRequireLogin } from "@/composables/RequireLogin"
+import { useRouteFocus } from "@/composables/use-route-focus"
 
 const baseUrl = import.meta.env.VITE_VIPER_HOME
 const router = createRouter({
@@ -14,4 +15,6 @@ router.beforeEach((to) => {
     return requireLogin()
 })
 
+useRouteFocus(router)
+
 export { router }

From 836be4ebcbeef7e92bad853fb9ac961b845bd257 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Tue, 7 Apr 2026 11:51:59 -0700
Subject: [PATCH 2/3] VPR-104 fix(a11y): ClinicalScheduler chip contrast and
 banner roles

- Use grey-4 background for unselected chips in RecentSelections to
  provide visual distinction from card background
- Add role and aria-hidden to ScheduleBanner and ClinicalSchedulerHome
  banner for screen reader accessibility
---
 .../src/ClinicalScheduler/components/RecentSelections.vue   | 3 +--
 VueApp/src/ClinicalScheduler/components/ScheduleBanner.vue  | 6 +++++-
 .../src/ClinicalScheduler/pages/ClinicalSchedulerHome.vue   | 2 ++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/VueApp/src/ClinicalScheduler/components/RecentSelections.vue b/VueApp/src/ClinicalScheduler/components/RecentSelections.vue
index 355201ad..634958b5 100644
--- a/VueApp/src/ClinicalScheduler/components/RecentSelections.vue
+++ b/VueApp/src/ClinicalScheduler/components/RecentSelections.vue
@@ -37,9 +37,8 @@
                         <q-chip
                             v-for="item in items"
                             :key="getItemKey(item)"
-                            :color="isItemSelected(item) ? 'primary' : undefined"
+                            :color="isItemSelected(item) ? 'primary' : 'grey-4'"
                             :text-color="isItemSelected(item) ? 'white' : 'dark'"
-                            :outline="!isItemSelected(item)"
                             clickable
                             size="sm"
                             class="q-mr-xs"
diff --git a/VueApp/src/ClinicalScheduler/components/ScheduleBanner.vue b/VueApp/src/ClinicalScheduler/components/ScheduleBanner.vue
index da6b969b..f1d04dcd 100644
--- a/VueApp/src/ClinicalScheduler/components/ScheduleBanner.vue
+++ b/VueApp/src/ClinicalScheduler/components/ScheduleBanner.vue
@@ -2,10 +2,14 @@
     <q-banner
         v-if="shouldShow"
         :class="bannerClass"
+        :role="type === 'error' ? 'alert' : 'status'"
         rounded
     >
         <template #avatar>
-            <q-icon :name="iconName" />
+            <q-icon
+                :name="iconName"
+                aria-hidden="true"
+            />
         </template>
         <div class="text-body2">
             <strong v-if="title">{{ title }}</strong>
diff --git a/VueApp/src/ClinicalScheduler/pages/ClinicalSchedulerHome.vue b/VueApp/src/ClinicalScheduler/pages/ClinicalSchedulerHome.vue
index 15960282..af4bea8b 100644
--- a/VueApp/src/ClinicalScheduler/pages/ClinicalSchedulerHome.vue
+++ b/VueApp/src/ClinicalScheduler/pages/ClinicalSchedulerHome.vue
@@ -113,11 +113,13 @@
                                     dense
                                     inline-actions
                                     class="text-primary bg-primary-1 rounded-borders"
+                                    role="status"
                                 >
                                     <template #avatar>
                                         <q-icon
                                             name="info"
                                             size="14px"
+                                            aria-hidden="true"
                                         />
                                     </template>
                                     <span class="text-caption">Your schedule only</span>

From bd470b4dad09184cdcc6b0497ee1ceda5e0a209f Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Thu, 9 Apr 2026 19:49:26 -0700
Subject: [PATCH 3/3] VPR-104 fix(a11y): ClinicalScheduler, CMS, Computing
 contrast and titles

- Fix ScheduleLegend and WeekCell contrast colors
- Add tab fade prevention to schedule views
- Fix CMS Link color, add Computing page title
---
 VueApp/src/CMS/components/Link.vue            |  2 +-
 .../components/ScheduleLegend.vue             | 14 +++++++++----
 .../components/SchedulerNavigation.vue        |  2 +-
 .../ClinicalScheduler/components/WeekCell.vue | 21 +++++++++++++------
 .../components/WeekScheduleCard.vue           |  2 +-
 .../pages/ClinicianScheduleView.vue           |  8 ++++---
 .../pages/RotationScheduleView.vue            | 19 ++++++++++-------
 web/Areas/Computing/Views/Index.cshtml        |  5 ++++-
 8 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/VueApp/src/CMS/components/Link.vue b/VueApp/src/CMS/components/Link.vue
index b981b6fd..7803401a 100644
--- a/VueApp/src/CMS/components/Link.vue
+++ b/VueApp/src/CMS/components/Link.vue
@@ -51,7 +51,7 @@ const props = defineProps<{
 }>()
 
 function getLinkCollectionTagColor(order: number) {
-    const colors = ["orange", "grey", "purple", "green", "blue"]
+    const colors = ["warning", "secondary", "negative", "positive", "info"]
     return colors.length >= order ? colors[order - 1] : colors[colors.length - 1]
 }
 
diff --git a/VueApp/src/ClinicalScheduler/components/ScheduleLegend.vue b/VueApp/src/ClinicalScheduler/components/ScheduleLegend.vue
index 425d1220..7428969b 100644
--- a/VueApp/src/ClinicalScheduler/components/ScheduleLegend.vue
+++ b/VueApp/src/ClinicalScheduler/components/ScheduleLegend.vue
@@ -39,7 +39,7 @@
                         </div>
                         <div
                             class="q-mb-xs q-mt-xs text-caption"
-                            style="color: var(--ucdavis-poppy)"
+                            style="color: var(--ucdavis-black-80)"
                         >
                             <strong>Tip:</strong> When selecting weeks that already contain your selected
                             {{ itemType }}(s), the button changes to "Delete Selected" for bulk removal
@@ -77,8 +77,8 @@
                         <q-icon
                             name="star"
                             size="xs"
-                            color="amber"
-                            class="legend-icon"
+                            color="warning"
+                            class="legend-icon legend-star-outlined"
                             aria-hidden="true"
                         />
                         <span class="legend-text">Current primary evaluator</span>
@@ -149,13 +149,19 @@ const isMac = computed(() => {
     align-items: center;
     gap: 8px;
     font-size: 13px;
-    color: var(--ucdavis-black-50);
+    color: var(--ucdavis-black-80);
 }
 
 .legend-icon {
     flex-shrink: 0;
 }
 
+/* Dark outline on gold star icon for WCAG contrast on white backgrounds */
+.legend-star-outlined {
+    -webkit-text-stroke: 1px var(--ucdavis-black-80);
+    paint-order: stroke fill;
+}
+
 .legend-text {
     line-height: 1.4;
 }
diff --git a/VueApp/src/ClinicalScheduler/components/SchedulerNavigation.vue b/VueApp/src/ClinicalScheduler/components/SchedulerNavigation.vue
index 4564215f..1e03023d 100644
--- a/VueApp/src/ClinicalScheduler/components/SchedulerNavigation.vue
+++ b/VueApp/src/ClinicalScheduler/components/SchedulerNavigation.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- Navigation tabs with proper active state for parameterized routes -->
     <q-tabs
-        class="text-grey q-mb-md"
+        class="text-grey-8 tabs-no-fade q-mb-md"
         active-color="primary"
         indicator-color="primary"
         align="left"
diff --git a/VueApp/src/ClinicalScheduler/components/WeekCell.vue b/VueApp/src/ClinicalScheduler/components/WeekCell.vue
index f49427d5..b8e6b0fa 100644
--- a/VueApp/src/ClinicalScheduler/components/WeekCell.vue
+++ b/VueApp/src/ClinicalScheduler/components/WeekCell.vue
@@ -3,7 +3,7 @@
         :class="cardClasses"
         clickable
         tabindex="0"
-        role="button"
+        role="group"
         :aria-label="`Week ${week.weekNumber} starting ${formatDate(week.dateStart)}, ${assignments.length} ${inflect('assignment', assignments.length)}`"
         @click="handleClick"
         @keyup.enter.self.prevent="handleClick"
@@ -99,8 +99,8 @@
                                 dense
                                 icon="star"
                                 size="sm"
-                                color="amber"
-                                class="week-cell__primary-btn"
+                                color="warning"
+                                class="week-cell__primary-btn week-cell__star-outlined"
                                 aria-label="Primary evaluator"
                                 :disable="true"
                             >
@@ -113,8 +113,11 @@
                                 dense
                                 :icon="assignment.isPrimary ? 'star' : 'star_outline'"
                                 size="sm"
-                                :color="assignment.isPrimary ? 'amber' : 'grey-5'"
-                                class="week-cell__primary-btn"
+                                :color="assignment.isPrimary ? 'warning' : 'grey-8'"
+                                :class="[
+                                    'week-cell__primary-btn',
+                                    assignment.isPrimary ? 'week-cell__star-outlined' : '',
+                                ]"
                                 :aria-label="
                                     assignment.isPrimary
                                         ? 'Primary evaluator. Click another clinician\'s star to transfer primary status.'
@@ -456,6 +459,12 @@ const cardClasses = computed(() => {
     flex-shrink: 0;
 }
 
+/* Dark outline on gold star icons for WCAG contrast on white backgrounds */
+.week-cell__star-outlined :deep(.q-icon) {
+    -webkit-text-stroke: 1px var(--ucdavis-black-80);
+    paint-order: stroke fill;
+}
+
 .week-cell__empty {
     display: flex;
     align-items: center;
@@ -465,7 +474,7 @@ const cardClasses = computed(() => {
 
 .week-cell__empty-text {
     font-size: 12px;
-    color: var(--ucdavis-black-40);
+    color: var(--ucdavis-black-60);
     font-style: italic;
 }
 
diff --git a/VueApp/src/ClinicalScheduler/components/WeekScheduleCard.vue b/VueApp/src/ClinicalScheduler/components/WeekScheduleCard.vue
index 20bc4b6b..11501538 100644
--- a/VueApp/src/ClinicalScheduler/components/WeekScheduleCard.vue
+++ b/VueApp/src/ClinicalScheduler/components/WeekScheduleCard.vue
@@ -20,7 +20,7 @@
                 :week="week"
             >
                 <div class="text-center q-py-sm">
-                    <div class="text-grey-6 text-caption">
+                    <div class="text-grey-7 text-caption">
                         {{ !isPastYear ? "Click to add assignment" : "No assignments" }}
                     </div>
                 </div>
diff --git a/VueApp/src/ClinicalScheduler/pages/ClinicianScheduleView.vue b/VueApp/src/ClinicalScheduler/pages/ClinicianScheduleView.vue
index b93fee2b..71c04a44 100644
--- a/VueApp/src/ClinicalScheduler/pages/ClinicianScheduleView.vue
+++ b/VueApp/src/ClinicalScheduler/pages/ClinicianScheduleView.vue
@@ -75,11 +75,12 @@
             />
 
             <!-- No clinician selected -->
-            <ScheduleBanner
+            <StatusBanner
                 v-if="!selectedClinician && !loadingSchedule"
                 type="info"
-                :custom-message="SCHEDULE_MESSAGES.SELECTION.NO_CLINICIAN"
-            />
+            >
+                {{ SCHEDULE_MESSAGES.SELECTION.NO_CLINICIAN }}
+            </StatusBanner>
 
             <!-- Schedule display -->
             <div v-if="selectedClinician">
@@ -169,6 +170,7 @@ import { useScheduleNormalization } from "../composables/use-schedule-normalizat
 import { useDeleteMode } from "../composables/use-delete-mode"
 import type { RotationWithService } from "../types/rotation-types"
 import ScheduleBanner from "../components/ScheduleBanner.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 import RecentSelections from "../components/RecentSelections.vue"
 import AccessDeniedCard from "../components/AccessDeniedCard.vue"
 import {
diff --git a/VueApp/src/ClinicalScheduler/pages/RotationScheduleView.vue b/VueApp/src/ClinicalScheduler/pages/RotationScheduleView.vue
index 9e67adb5..a87b1489 100644
--- a/VueApp/src/ClinicalScheduler/pages/RotationScheduleView.vue
+++ b/VueApp/src/ClinicalScheduler/pages/RotationScheduleView.vue
@@ -94,18 +94,22 @@
             />
 
             <!-- No rotation selected message -->
-            <ScheduleBanner
+            <StatusBanner
                 v-else-if="!selectedRotation"
                 type="info"
-                custom-message="Please select a rotation to view its schedule."
-            />
+            >
+                Please select a rotation to view its schedule.
+            </StatusBanner>
 
             <!-- Instructions (only show when rotation is selected and not past year) -->
-            <ScheduleBanner
+            <StatusBanner
                 v-else-if="selectedRotation && !isPastYear"
-                type="instructions"
-                custom-message="This list of clinicians should contain any clinician scheduled for the rotation in the current or previous year. The user can click on a clinician to select them, and then click on any week to schedule them."
-            />
+                type="info"
+            >
+                This list of clinicians should contain any clinician scheduled for the rotation in the current or
+                previous year. The user can click on a clinician to select them, and then click on any week to schedule
+                them.
+            </StatusBanner>
 
             <!-- Clinician selector section (only show when rotation is selected and not past year) -->
             <RecentSelections
@@ -214,6 +218,7 @@ import YearSelector from "../components/YearSelector.vue"
 import SchedulerNavigation from "../components/SchedulerNavigation.vue"
 import type { WeekItem } from "../components/WeekScheduleCard.vue"
 import ScheduleBanner from "../components/ScheduleBanner.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 import RecentSelections from "../components/RecentSelections.vue"
 import AccessDeniedCard from "../components/AccessDeniedCard.vue"
 import { ACCESS_DENIED_MESSAGES, ACCESS_DENIED_SUBTITLES } from "../constants/permission-messages"
diff --git a/web/Areas/Computing/Views/Index.cshtml b/web/Areas/Computing/Views/Index.cshtml
index 0c6a7c23..0cf38fc9 100644
--- a/web/Areas/Computing/Views/Index.cshtml
+++ b/web/Areas/Computing/Views/Index.cshtml
@@ -1 +1,4 @@
-@await Component.InvokeAsync("CMSBlocks", new {friendlyName = "computing-home"})
+@{
+    ViewData["Title"] = "Computing";
+}
+@await Component.InvokeAsync("CMSBlocks", new {friendlyName = "computing-home"})