Skip to content

CTS - MyAssessment UI changes#155

Open
rlorenzo wants to merge 1 commit intomainfrom
VPR-104-accessibility-audit-CTS-myassessments
Open

CTS - MyAssessment UI changes#155
rlorenzo wants to merge 1 commit intomainfrom
VPR-104-accessibility-audit-CTS-myassessments

Conversation

@rlorenzo
Copy link
Copy Markdown
Contributor

@rlorenzo rlorenzo commented Apr 20, 2026

Summary

Accessibility improvements scoped to the CTS MyAssessments page and the shared AssessmentBubble component. Split out from #137 so the page rework and bubble redesign can land as their own PR.

MyAssessments page

  • Heading hierarchy — promote the page title to <h1> and the "Entrustable Professional Activities" heading to <h2> (1.3.1 Info and Relationships)
  • Expanded layout — toggle buttons moved to the left edge of each EPA row; expanded details (date, clinician, service, rating) now align under the EPA name rather than starting at the row origin; comment extends to the full width of the content column
  • Expand/collapse labelsaria-label + aria-expanded on the global expand-all button and each per-EPA expand button; label adapts with state ("Expand details for…" / "Collapse details for…") (4.1.2 Name, Role, Value)
  • Details dialog close button — accessible aria-label="Close dialog" close icon added to the "Assessment Details" dialog header (2.1.1 Keyboard)
  • Details dialog rating pill — the rating in the "Assessment Details" dialog now renders as a color-matched pill (same styling as the expanded inline list) instead of a separate bubble plus loose label, simplifying the layout

AssessmentBubble component

  • Privacy-preserving aria-label — the rating dot no longer announces a numeric score; aria-label reads the descriptive rating name ("Trust with indirect supervision") for both the clickable and the decorative variants, and the numeric value is removed from inside the circle. Prevents screen readers from announcing a student's low rating aloud in shared spaces (4.1.2 Name, Role, Value)
  • Contrast & target size — rating circles became <button> elements with a stepped UC Davis blue palette (rgba(62,127,238,0.3)rgba(11,3,139,1)), a 1.5rem diameter for a larger touch/click target, a gold focus-visible ring, and 0.25rem horizontal spacing so adjacent bubbles never touch. Replaces the old low-contrast light blue fill (1.4.1 Use of Color, 1.4.11 Non-text Contrast)

Test Coverage

  • AssessmentBubble unit tests — new assessment-bubble.test.ts locks in the privacy contract (aria-label must never contain the numeric rating), the value → class mapping, click emission with the correct id, and the non-interactive span variant when id is omitted. 15 tests covering the full component surface.

Test plan

  • /CTS/MyAssessments renders with h1 title, h2 EPA section, and keyboard-accessible expand/collapse controls
  • Screen reader announces level names (not numeric scores) for bubbles in both clickable and decorative variants
  • AssessmentBubble still renders correctly in other CTS pages that use it (AssessmentEpa, AssessmentEpaEdit, AssessmentCompetency, ManageSessionCompetencies)
  • npm run testassessment-bubble.test.ts passes

Copilot AI review requested due to automatic review settings April 20, 2026 18:04
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot wasn't able to review any files in this pull request.

@rlorenzo rlorenzo closed this Apr 20, 2026
@rlorenzo rlorenzo reopened this Apr 20, 2026
Base automatically changed from VPR-104-accessibility-audit-CTS to main April 22, 2026 22:45
Split out from VPR-104-accessibility-audit-CTS. Rework AssessmentBubble
into a button/span pair with proper roles and labels, restyle the rating
bubbles as filled chips, and rebuild the MyAssessments layout with an
h1/h2 hierarchy, accessible expand/collapse controls, and a level-chip
dialog. Adds test coverage for AssessmentBubble.
@rlorenzo rlorenzo force-pushed the VPR-104-accessibility-audit-CTS-myassessments branch from 9db50f7 to daef548 Compare April 28, 2026 02:52
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Apr 28, 2026

Codecov Report

❌ Patch coverage is 85.71429% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 43.25%. Comparing base (5cb764f) to head (daef548).

Files with missing lines Patch % Lines
VueApp/src/CTS/components/AssessmentBubble.vue 85.71% 1 Missing ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##             main     #155   +/-   ##
=======================================
  Coverage   43.24%   43.25%           
=======================================
  Files         862      863    +1     
  Lines       50405    50416   +11     
  Branches     4706     4711    +5     
=======================================
+ Hits        21796    21805    +9     
- Misses      28086    28087    +1     
- Partials      523      524    +1     
Flag Coverage Δ
backend 43.31% <ø> (ø)
frontend 41.87% <85.71%> (+0.18%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@codecov-commenter
Copy link
Copy Markdown

Bundle Report

Changes will increase total bundle size by 4.85kB (0.23%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
viper-frontend-esm 2.14MB 4.85kB (0.23%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: viper-frontend-esm

Assets Changed:

Asset Name Size Change Total Size Change (%)
assets/GenericError-*.css 434 bytes 203.39kB 0.21%
assets/TermManagement-*.js 449 bytes 53.58kB 0.85%
assets/schedule-*.js (New) 51.46kB 51.46kB 100.0% 🚀
assets/CourseDetail-*.js 193 bytes 40.63kB 0.48%
assets/PhotoGallery-*.js 75 bytes 35.62kB 0.21%
assets/InstructorEdit-*.js 245 bytes 32.23kB 0.77%
assets/InstructorList-*.js 31 bytes 26.09kB 0.12%
assets/StaffDashboard-*.js -265 bytes 25.6kB -1.02%
assets/CrossListedCoursesSection-*.js 111 bytes 23.7kB 0.47%
assets/GenericError-*.js -537 bytes 21.11kB -2.48%
assets/ClinicianScheduleView-*.js -1.38kB 18.9kB -6.81%
assets/MultiYearReport-*.js 74 bytes 18.64kB 0.4%
assets/EmergencyContactForm-*.js 17 bytes 17.57kB 0.1%
assets/AuditList-*.js 38 bytes 17.39kB 0.22%
assets/RotationScheduleView-*.js 120 bytes 17.01kB 0.71%
assets/CourseList-*.js 109 bytes 15.99kB 0.69%
assets/EffortTypeList-*.js 71 bytes 15.4kB 0.46%
assets/CourseImportDialog-*.js 43 bytes 10.88kB 0.4%
assets/CourseLinkDialog-*.js 225 bytes 9.31kB 2.48%
assets/ManageBundleCompetencies-*.js 85 bytes 8.9kB 0.96%
assets/StudentClassYear-*.js -1 bytes 8.44kB -0.01%
assets/EmergencyContactView-*.js 36 bytes 8.03kB 0.45%
assets/schedule-*.css (New) 7.07kB 7.07kB 100.0% 🚀
assets/ManageSessionCompetencies-*.js 96 bytes 6.86kB 1.42%
assets/ManageCompetencies-*.js 70 bytes 6.65kB 1.06%
assets/TermSelection-*.js -57 bytes 6.45kB -0.88%
assets/MyAssessments-*.js 832 bytes 6.43kB 14.87% ⚠️
assets/UnitList-*.js 57 bytes 6.34kB 0.91%
assets/CompetenciesBundleReport-*.js 122 bytes 6.1kB 2.04%
assets/AssessmentEpa-*.js 39 bytes 5.73kB 0.69%
assets/EffortRecordEditDialog-*.js 77 bytes 5.42kB 1.44%
assets/SchoolSummary-*.js -114 bytes 4.32kB -2.57%
assets/ManageCourseCompetencies-*.js 52 bytes 3.7kB 1.43%
assets/LevelSelect-*.js -16 bytes 2.65kB -0.6%
assets/SchoolSummary-*.css -49 bytes 1.75kB -2.73%
assets/cts-*.css 1.17kB 1.62kB 258.85% ⚠️
assets/TermManagement-*.css 54 bytes 1.46kB 3.85%
assets/StaffDashboard-*.css -66 bytes 1.45kB -4.34%
assets/CompetenciesBundleReport-*.css 594 bytes 1.28kB 86.97% ⚠️
assets/colors-*.js (New) 891 bytes 891 bytes 100.0% 🚀
assets/StatusBadge-*.js (New) 458 bytes 458 bytes 100.0% 🚀
assets/format-*.js 4 bytes 161 bytes 2.55%
assets/RecentSelections-*.js (Deleted) -51.59kB 0 bytes -100.0% 🗑️
assets/RecentSelections-*.css (Deleted) -6.48kB 0 bytes -100.0% 🗑️

Files in assets/MyAssessments-*.js:

  • ./src/CTS/components/AssessmentBubble.vue → Total Size: 156 bytes

  • ./src/CTS/pages/MyAssessments.vue → Total Size: 142 bytes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants