design: governance voting UI with tally and confirmation

[Killerjunior]

Summary

Implements the Governance Voting UI for token-holder proposals across src/components/OfferingDetail.tsx under the #governance tab. Enables token holders to inspect proposal context, track quorum achievement, review vote tallies with color-blind accessible visualizations, assess voting power, and cast votes through an accessible confirmation modal flow with retry capabilities.

Closes #629

Root Cause / Motivation

Token holders had no unified, accessible interface within an offering's details to review on-chain governance proposals, assess quorum progress, and submit their votes. Proposals require accessible tally displays (WCAG 2.1 AA compliant for color-blind users), clear voting power summaries, and safe transaction confirmation dialogs that prevent double-submissions and allow error recovery.

Solution Details

1. Governance Voting Component (src/components/GovernanceVoting/):
   • Proposal header with status pills (active, pre_voting, passed, rejected, quorum_failed), category tags, and timeline countdowns.
   • Quorum requirement progress bar with numeric values and milestone indicator.
   • Segmented stacked vote tally bar pairing high-contrast colors with distinct SVG/CSS textures (.gv-bar--for, .gv-bar--against, .gv-bar--abstain), numeric percentages, token amounts, and an sr-only fallback table.
   • Live region (aria-live="polite") announcing vote tally changes to screen readers.
   • Voting power summary card showing token weight and voter eligibility status.
   • Vote selection radiogroup (For, Against, Abstain) with arrow key navigation and defensive disablement.
   • Accessible confirmation modal with focus trapping, Escape key close, focus restoration, double-submit protection, and error recovery with an inline retry action.
2. OfferingDetail Integration (src/components/OfferingDetail.tsx):
   • Added "governance" tab to SETTINGS_TABS and renderPanelContent.
   • Wired in proposal data and full backward compatibility with all existing tabs (general, distributions, compliance, documents, danger).
3. Documentation (docs/uiux/governance-proposal-detail.md):
   • Documented the governance proposal voting pattern, color-blind texture guidelines, and accessibility specifications.

Testing Steps

1. Run npx vitest run src/components/GovernanceVoting/GovernanceVoting.test.tsx src/components/OfferingDetail.test.tsx.
2. Verify all 42 unit and integration tests pass, including automated jest-axe checks.
3. Open http://localhost:5173/offerings/1#governance in a browser.
4. Verify the Governance tab is active and renders proposal header, quorum progress, tally bar with textures, and voting power card.
5. Select a vote choice (For, Against, Abstain) and click Review & Cast Vote.
6. Verify the confirmation modal traps focus, closes on Escape, and submits successfully, updating the tally.

CI Checklist

• Code adheres to repository style guides and architecture.
• Fully typed TypeScript without any or placeholders.
• 100% passing tests (42/42) including edge cases and boundary conditions.
• Zero axe accessibility violations (WCAG 2.1 AA compliant).
• Linter passes with zero errors on all added/modified files.
• Backwards-compatible with all existing OfferingDetail tabs and routing.

[drips-wave]

@Killerjunior Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits