Badge Icon Asset Manager
Component Detail
Description
Manages badge icon assets ensuring WCAG 2.2 AA contrast compliance. Provides icon resolution by badge definition ID, supports locked/unlocked visual variants, and ensures all icons have corresponding accessible text labels. Integrates with Flutter's asset system and design token colors.
badge-icon-asset-manager
Summaries
The Badge Icon Asset Manager ensures that every badge shown in the application meets WCAG 2.2 AA accessibility standards, meaning the platform is usable by peer mentors and coordinators with visual impairments. This is not only the right thing to do for inclusivity, but it also reduces legal and reputational risk associated with inaccessible software. Professionally presented, accessible badge visuals enhance the perceived quality of the recognition program, increasing the emotional value of each earned badge and reinforcing the platform's role as a credible, polished tool that organisations are proud to deploy.
A low-complexity mobile component with no external service dependencies, making it a safe early delivery item for the mobile team. The primary delivery risk is asset completeness — all badge definitions must have corresponding icon assets (both locked and unlocked variants) before the component can be fully tested. A clear asset handoff process with the design team should be established early to avoid late-stage blockers. Accessibility validation (WCAG 2.2 AA contrast checks) should be part of the QA checklist for every new badge type added in future, which means defining a repeatable verification process now saves rework later.
Estimated implementation: 1–2 sprint days.
Implemented as a mobile-side utility (Flutter) that resolves asset paths from a badge definition ID using a deterministic naming convention. The getIconPath method supports a locked boolean variant, allowing a single call pattern across all badge display contexts. validateContrast checks icon pixel data against design token background colors, enabling automated contrast assertion in widget tests. preloadIconsForBadges should be called at screen initialisation to warm Flutter's asset cache.
getFallbackIcon provides a safe default for definitions without matched assets, preventing null-path render failures. Integration point: consumed by badge display widgets; depends on Flutter's AssetBundle and design token color constants defined in the project's theme layer.
Responsibilities
- Resolve badge icon asset paths by definition ID
- Provide locked and unlocked icon variants
- Validate icon contrast ratios against design token backgrounds
- Supply fallback icons for missing badge assets
Interfaces
getIconPath(String badgeDefinitionId, {bool locked = false}) -> String
getFallbackIcon() -> String
validateContrast(String iconPath, Color background) -> bool
preloadIconsForBadges(List<BadgeDefinition> badges)