MI10 - Theme/Contrast Guidance (Light/Dark/HC Tokens)

Module

Web

Status

PARTIALLY_IMPLEMENTED

Description

Color tokens and focus ring styles exist. Theme transition utilities are implemented. However, the specific theming doc docs/modules/ui/micro-theme.md and explicit HC (high-contrast) mode tokens with 4.5:1/3:1 contrast validation were not found as standalone artifacts.

What's Implemented

Color tokens and focus ring styles exist in the Angular codebase
Theme transition utilities are implemented
Dark mode support exists

What's Missing

High-contrast (HC) mode tokens: No dedicated HC theme with WCAG 4.5:1 (normal text) and 3:1 (large text/icons) validated contrast ratios
Theme specification document: No docs/modules/ui/micro-theme.md formalizing the light/dark/HC token sets
Contrast validation tooling: No automated CI check validating contrast ratios across all color tokens
HC mode toggle: No user-facing toggle for high-contrast mode in settings

Implementation Plan

Create HC theme token set with WCAG-validated contrast ratios
Add contrast ratio validation CI check using color-contrast tooling
Add HC mode toggle to user settings
Document theme tokens in docs/modules/ui/micro-theme.md

E2E Test Plan

Setup:
- Log in with a user that has appropriate permissions
- Navigate to the relevant page/section where this feature appears
- Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
Core verification:
- Verify the component renders correctly with sample data
- Verify interactive elements respond to user input
- Verify data is fetched and displayed from the correct API endpoints
Edge cases:
- Verify graceful handling when backend API is unavailable (error state)
- Verify responsive layout at different viewport sizes
- Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)

1.9 KiB Raw Blame History