CTS - MyAssessment UI changes

[rlorenzo]

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 labels — aria-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 test — assessment-bubble.test.ts passes

[Copilot]

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