VPR-104 fix(a11y): ClinicalScheduler, CMS, Computing, CAHFS accessibility (PR 6 of 6) by rlorenzo · Pull Request #146 · ucdavis/VIPER

rlorenzo · 2026-04-03T16:09:00Z

ClinicalScheduler, CMS, Computing, CAHFS accessibility — PR 6 of 6 in the VPR-104 accessibility audit.

ARIA & Keyboard

Fix C7: remove invalid aria-controls from SchedulerNavigation route tabs (4.1.2 Name, Role, Value)
Fix S10: add keyboard handlers to WeekCell clickable card (2.1.1 Keyboard, 4.1.2 Name, Role, Value)

Route Focus

Fix C4: add useRouteFocus to CMS, ClinicalScheduler, Computing, CAHFS routers (2.4.3 Focus Order)

Document titles (2.4.2 Page Titled)

Add ViewData["Title"] to Computing Index.cshtml

Color Contrast (1.4.3 Contrast (Minimum))

Fix M6: replace color="green" → "positive", color="red-5" → "negative" in CMS
Fix S8: text-grey-7 → text-grey-8 on ClinicalSchedulerHome card descriptions
ScheduleLegend chip contrast improvements — brand colors and adjusted backgrounds
WeekCell contrast: darker text on muted backgrounds for status cells
Tab fade prevention on ClinicianScheduleView and RotationScheduleView so inactive tab labels meet AA contrast

Banner roles

Add role="status" / accessible class pattern to ClinicalScheduler banners so status changes are announced

Copilot

Pull request overview

This PR completes a set of accessibility fixes across ClinicalScheduler, CMS, Computing, and CAHFS, primarily improving keyboard/screen-reader behavior during navigation and on interactive card elements.

Changes:

Added route-change focus management (useRouteFocus) to multiple area routers to ensure focus moves on navigation.
Improved ClinicalScheduler keyboard/screen-reader support (removed invalid aria-controls; added button semantics + keyboard activation + aria-label to WeekCell).
Updated UI colors/text contrast in CMS and ClinicalScheduler (Quasar semantic colors; darker grey text).

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
VueApp/src/Computing/router/index.ts	Hooks up `useRouteFocus(router)` after navigation.
VueApp/src/CMS/router/index.ts	Hooks up `useRouteFocus(router)` after navigation.
VueApp/src/CMS/pages/ManageLinkCollections.vue	Replaces non-semantic colors with `positive`/`negative`.
VueApp/src/ClinicalScheduler/router/index.ts	Hooks up `useRouteFocus(router)` after navigation.
VueApp/src/ClinicalScheduler/pages/ClinicalSchedulerHome.vue	Improves text contrast (`text-grey-7` → `text-grey-8`).
VueApp/src/ClinicalScheduler/components/WeekCell.vue	Adds keyboard activation + `aria-label` for clickable week cards.
VueApp/src/ClinicalScheduler/components/SchedulerNavigation.vue	Removes invalid `aria-controls` attributes from route tabs.
VueApp/src/CAHFS/router/index.ts	Hooks up `useRouteFocus(router)` after navigation.

…lity (PR 6 of 6) - 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

- 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

- Fix ScheduleLegend and WeekCell contrast colors - Add tab fade prevention to schedule views - Fix CMS Link color, add Computing page title

Copilot

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 5 comments.

Copilot · 2026-04-11T04:16:22Z

VueApp/src/ClinicalScheduler/components/WeekCell.vue

        :class="cardClasses"
        clickable
+        tabindex="0"
+        role="group"


The card is interactive (click + keyboard handlers) but is given role="group". This role doesn’t convey that the element is actionable to assistive tech and also overrides Quasar’s default semantics for clickable. Consider removing the explicit role or switching it to role="button" (and keeping the aria-label) so the announced role matches the behavior.

Suggested change

role="group"

role="button"

Copilot · 2026-04-11T04:16:22Z

VueApp/src/ClinicalScheduler/components/WeekCell.vue

+        @keyup.enter.self.prevent="handleClick"
+        @keyup.space.self.prevent="handleClick"


Keyboard activation is handled on keyup, including Space. For non-native buttons, Space’s default page scroll typically occurs on keydown, so preventing only keyup may not stop scrolling and can make activation unreliable. Prefer handling Enter/Space on keydown (and preventDefault there) to align with ARIA button behavior.

Suggested change

@keyup.enter.self.prevent="handleClick"

@keyup.space.self.prevent="handleClick"

@keydown.enter.self.prevent="handleClick"

@keydown.space.self.prevent="handleClick"

Copilot · 2026-04-11T04:16:23Z

VueApp/src/ClinicalScheduler/components/WeekCell.vue

+    -webkit-text-stroke: 1px var(--ucdavis-black-80);
+    paint-order: stroke fill;


-webkit-text-stroke is non-standard and isn’t supported in Firefox for font-based icons, so the contrast ‘outline’ may not appear for a portion of users. Consider a more cross-browser approach (e.g., text-shadow outline, swapping to an outlined SVG/icon variant, or adding a contrasting background) so the WCAG contrast improvement applies consistently.

Suggested change

-webkit-text-stroke: 1px var(--ucdavis-black-80);

paint-order: stroke fill;

text-shadow:

-1px 0 0 var(--ucdavis-black-80),

1px 0 0 var(--ucdavis-black-80),

0 -1px 0 var(--ucdavis-black-80),

0 1px 0 var(--ucdavis-black-80),

-1px -1px 0 var(--ucdavis-black-80),

1px -1px 0 var(--ucdavis-black-80),

-1px 1px 0 var(--ucdavis-black-80),

1px 1px 0 var(--ucdavis-black-80);

Copilot · 2026-04-11T04:16:23Z

VueApp/src/ClinicalScheduler/components/ScheduleLegend.vue

 }

+/* Dark outline on gold star icon for WCAG contrast on white backgrounds */
+.legend-star-outlined {


Same cross-browser concern here: -webkit-text-stroke won’t apply in Firefox for font icons, so the star may still fail contrast there. Consider a more broadly supported outlining technique (e.g., text-shadow) or a different icon treatment that maintains contrast across browsers.

Suggested change

.legend-star-outlined {

.legend-star-outlined {

/* Cross-browser fallback for icon/text outlining, including Firefox */

text-shadow:

-1px 0 0 var(--ucdavis-black-80),

1px 0 0 var(--ucdavis-black-80),

0 -1px 0 var(--ucdavis-black-80),

0 1px 0 var(--ucdavis-black-80),

-1px -1px 0 var(--ucdavis-black-80),

1px -1px 0 var(--ucdavis-black-80),

-1px 1px 0 var(--ucdavis-black-80),

1px 1px 0 var(--ucdavis-black-80);

Copilot · 2026-04-11T04:16:23Z

VueApp/src/ClinicalScheduler/components/WeekCell.vue

+        tabindex="0"
+        role="group"
+        :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"


WeekCell’s new keyboard interaction (Enter/Space activation on the card) is important a11y behavior but isn’t covered by tests. Given the existing Vitest suite under VueApp/src/ClinicalScheduler/__tests__, consider adding a component test that verifies keyboard activation triggers the same emit/click behavior and that Space does not scroll the page (preventDefault).

Copilot AI review requested due to automatic review settings April 3, 2026 16:09

Copilot started reviewing on behalf of rlorenzo April 3, 2026 16:09 View session

Copilot AI reviewed Apr 3, 2026

View reviewed changes

rlorenzo force-pushed the VPR-104-accessibility-audit-Remaining branch 5 times, most recently from 7cf22ec to c856893 Compare April 8, 2026 05:22

rlorenzo added 3 commits April 9, 2026 23:17

VPR-104 fix(a11y): ClinicalScheduler, CMS, Computing contrast and titles

bd470b4

- Fix ScheduleLegend and WeekCell contrast colors - Add tab fade prevention to schedule views - Fix CMS Link color, add Computing page title

rlorenzo force-pushed the VPR-104-accessibility-audit-Remaining branch from c856893 to bd470b4 Compare April 10, 2026 16:08

rlorenzo requested a review from Copilot April 11, 2026 04:11

Copilot started reviewing on behalf of rlorenzo April 11, 2026 04:12 View session

Copilot AI reviewed Apr 11, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VPR-104 fix(a11y): ClinicalScheduler, CMS, Computing, CAHFS accessibility (PR 6 of 6)#146

VPR-104 fix(a11y): ClinicalScheduler, CMS, Computing, CAHFS accessibility (PR 6 of 6)#146
rlorenzo wants to merge 3 commits intoVPR-104-accessibility-audit-basefrom
VPR-104-accessibility-audit-Remaining

rlorenzo commented Apr 3, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 11, 2026

Uh oh!

Copilot AI Apr 11, 2026

Uh oh!

Copilot AI Apr 11, 2026

Uh oh!

Copilot AI Apr 11, 2026

Uh oh!

Copilot AI Apr 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@keyup.enter.self.prevent="handleClick"
		@keyup.space.self.prevent="handleClick"

		-webkit-text-stroke: 1px var(--ucdavis-black-80);
		paint-order: stroke fill;

-    -webkit-text-stroke: 1px var(--ucdavis-black-80);
-    paint-order: stroke fill;
+    text-shadow:
+        -1px 0 0 var(--ucdavis-black-80),
+px 0 0 var(--ucdavis-black-80),
+-1px 0 var(--ucdavis-black-80),
+1px 0 var(--ucdavis-black-80),
+        -1px -1px 0 var(--ucdavis-black-80),
+px -1px 0 var(--ucdavis-black-80),
+        -1px 1px 0 var(--ucdavis-black-80),
+px 1px 0 var(--ucdavis-black-80);

Conversation

rlorenzo commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ARIA & Keyboard

Route Focus

Document titles (2.4.2 Page Titled)

Color Contrast (1.4.3 Contrast (Minimum))

Banner roles

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rlorenzo commented Apr 3, 2026 •

edited

Loading