UX/UI audit: trend-arrow bug + new-interaction coverage + persona findings (108)

[Dgetsylver]

UX/UI audit — persona-based, 108 findings (30 high · 46 medium · 32 low)

Tracking issue for a persona-based UX/UI audit (newcomer, power user, mobile, i18n, a11y, risk-skeptic) + a new-interaction coverage map + a confirmed trend-arrow rendering bug. Implemented across 4 phased PRs; this issue tracks the full backlog so nothing is lost.

The reported bug (confirmed)

▲11.1% 24h ▲7.0% 7d wraps under the Net-supply/borrow APY value because renderTrendArrow (main.ts:797) injects the .rate-trend span as a 3rd flex sibling into the space-between .apr-row. Fix: dedicated trend slot, render into it (no sibling insert), white-space:nowrap + clamp + aria-labels.

New-interaction UI coverage gaps

• 🔴 /status.html orphaned — not linked from the app.
• 🔴 Auto-rebalance keeper (T2.2/2.3) only surfaced in the one-time tour, not to depositors.
• 🔴 HF/liquidation alerts (T2.5) — modal is APY-only; bell only on Trade view.
• 🟠 Broker-vs-Soroswap routing (T2.1) — Broker shown, route/venue not surfaced.
• 🟠 Onboarding tour — no re-open entry point (startTour exported but unused).
• 🟠 Language switcher — blind EN→ES→PT cycle, no direct picker.
• 🟡 Aquarius best-rate — silent — when unavailable.
• ✅ Compare Pools, vault Trade-on-Aquarius, projected rates — present.

Phased plan

• P1 — bug + coverage: trend-arrow fix; link status page; surface keeper to depositors; HF-alert option + bell reachability; swap Route row; tour re-open + language picker; explain Aquarius —.
• P2 — safety (DeFi-critical): pre-submit position confirmation modal; fix expert-mode tooltip (says "1.005", actual 1.00001) + warning; proactive HF risk band under the slider; inline jargon glossary + liquidation explainer; surface negative-APY/frozen-pool warnings.
• P3 — mobile + a11y: Compare table scroll/one-col at 375px, drawer width, two-col reflow, tap targets; aria on HF bar/trend/sparkles, modal focus management, text-not-only-color signaling.
• P4 — i18n completeness: ~150 missing keys (disclaimer, landing, mobile nav, swap, vault, alert modal, toasts, status, dynamic strings); language dropdown picker; time/relative strings.

Full findings (by severity)

HIGH (30)

• Trend arrow injected as 3rd flex sibling breaks .apr-row, wraps under value — main.ts:797
• /status.html orphaned (not linked) — index.html:240-244 / main.ts:1347-1358
• Auto-rebalance keeper not surfaced to depositors — index.html:746-751
• HF/liquidation alerts modal is APY-only; bell only on Trade — index.html:879-911 / main.ts:3776-3784
• Disclaimer doesn't gate position opening (one-time dismiss) — index.html:15-35
• No pre-submission risk-confirmation modal — main.ts:1900+ / index.html:486
• Preview doesn't surface liquidation risk until HF already low — main.ts:1655-1807
• Expert mode min HF 1.00001 (near-zero margin), weak warning — main.ts:424-426
• Expert-mode discovery + vague behavioral diff — index.html:57,124
• Jargon c_factor/l_factor/HF undefined before slider — index.html:296,424-437
• Negative-APY risk not surfaced at creation — main.ts:1710-1714
• Tour omits liquidation/HF explanation — locales.ts:78-85
• Swap fee/slippage impact hidden — index.html:653-670
• No HF doc link in position panel — index.html:557-561
• a11y: trend arrows color-only (no aria/text) — main.ts:763-798
• a11y: Compare sparklines color-only — style.css:1377-1379
• a11y: HF bar no aria-valuenow/text — index.html:559
• a11y: HF gauge color-only — main.ts:1017-1036
• a11y: portfolio HF dot color-only — index.html:369
• a11y: modals lack focus management — main.ts:3700-3880
• a11y: keyboard shortcuts limited; no leverage/HF presets — main.ts:3673-3713
• No direct HF input / preset buttons — index.html:424-439
• Mobile: Compare table min-width 640 overflows 375px — style.css:1342
• Mobile: two-col minmax breaks at 375px — style.css:483,1234
• Mobile: drawer 260px too wide at 375px — style.css:1223-1230
• i18n: disclaimer modal hardcoded — index.html:14-35
• i18n: landing hero/features/steps hardcoded — index.html:153-245
• i18n: mobile sidebar hardcoded — index.html:75-127
• i18n: 50+ hardcoded JS strings/toasts — main.ts (many)
• i18n: locales missing toast/dynamic keys — locales.ts

MEDIUM (46) and LOW (32)

See the audit transcript; grouped into the phases above. Highlights: auto-quote on swap; Compare table info density + 1.20-HF assumption surfacing; rebalance-keeper trigger explanation; tooltip keyboard access; decorative-symbol aria-hidden; tap targets <44px; toast overlap on mobile; expert-mode badge/time/pool-name i18n; slippage-default justification; data-freshness/sort/pool-frozen color-only.

---

🤖 Audit via parallel persona agents. Phases land as separate PRs referencing this issue.

[drips-wave]

Congratulations, @TheShnider! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @TheShnider: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊