"[UI/UX Design] Design VolatilityExposureMeter threshold zones and accessible value annotations"

[1nonlypiece]

[UI/UX Design] Design VolatilityExposureMeter threshold zones and accessible value annotations

Description

src/components/VolatilityExposureMeter/VolatilityExposureMeter.tsx renders exposure but lacks defined threshold zones tied to risk profiles. Design colored threshold bands (safe / caution / danger) with a non-color textual annotation and tooltip so users on the commitment details page understand where their exposure sits relative to their selected risk tier.

Requirements and context

• Must be secure, tested, and documented
• Should be efficient and easy to review
• Align thresholds with RiskProfile tiers used across the create wizard
• Provide a textual label alongside the band (not color-only)
• Add a tooltip explaining what the current exposure means
• Ensure the meter has an accessible name and value via ARIA

Suggested execution

• Fork the repo and create a branch
• git checkout -b feature/volatility-meter-thresholds
• Implement changes
  • Update VolatilityExposureMeter.tsx and its module CSS
  • Add render tests for each threshold band under tests/
  • Document thresholds in docs/accessibility-dense-ui.md
  • Validate ARIA role/aria-valuenow semantics
• Test and commit
  • Run tests, cover edge cases
  • Include test output and notes

Example commit message

feat: add threshold zones and accessible annotations to VolatilityExposureMeter

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours