fix(#475): Add aria-live regions for balance display updates#582
fix(#475): Add aria-live regions for balance display updates#582Rayhab2000 wants to merge 1 commit into
Conversation
…ates - Dashboard (app/[locale]/page.tsx): Add aria-live regions to ACBU balance, USD conversion, and Fiat balance displays to announce updates to screen readers via polling (30s) or after transactions - Send page (app/send/page.tsx): Add aria-live region to available balance display for real-time updates Screen readers now announce balance changes politely without interrupting user's current output. Improves accessibility for visually impaired users who can now perceive balance changes without navigating away.
|
@Rayhab2000 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! 🚀 |
📝 WalkthroughWalkthroughTwo pages receive ARIA live/atomic region attributes on balance display elements. The home page ACBU balance and simulated fiat USD sections are refactored with hardcoded labels, ChangesARIA Live Regions and Balance Display Refactor
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Biome (2.5.0)app/[locale]/page.tsxFile contains syntax errors that prevent linting: Line 134: Expected a statement but instead found '<<<<<<< HEAD:app/[locale]/page.tsx'.; Line 144: Expected a statement but instead found '======= useEffect(() =>'.; Line 165: Expected a statement but instead found ', [opts.token])'.; Line 315: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.; Line 315: expected app/send/page.tsxFile contains syntax errors that prevent linting: Line 384: Expected corresponding JSX closing tag for 'div'.; Line 367: Expected corresponding JSX closing tag for 'Tabs'.; Line 484: expected 🔧 ESLint
app/[locale]/page.tsxParsing error: Merge conflict marker encountered. app/send/page.tsxParsing error: JSX element 'div' has no corresponding closing tag. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/[locale]/page.tsx (1)
134-147: 🎯 Functional Correctness | 🔴 Critical | ⚡ Quick winResolve committed merge-conflict markers before merge.
<<<<<<<,=======,>>>>>>>markers are still in the file, which will fail TypeScript parsing/build.Proposed fix
-<<<<<<< HEAD:app/[locale]/page.tsx const t = useTranslations('home'); const format = useFormatter(); @@ -======= useScrollRestoration('/', !loading); ->>>>>>> origin/dev:app/page.tsx @@ -<<<<<<< HEAD:app/[locale]/page.tsx <h3 className="text-sm font-semibold text-foreground">{t('recent_activity')}</h3> <Link href="/activity" className="text-xs text-primary font-medium">{t('view_all')}</Link> -======= - <h3 className="text-sm font-semibold text-foreground md:text-base">Recent Activity</h3> - <Link href="/activity" className="text-xs text-primary font-medium md:text-sm">View all</Link> ->>>>>>> upstream/dev:app/page.tsxAlso applies to: 315-321
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/`[locale]/page.tsx around lines 134 - 147, Resolve the merge conflict in the page component by removing the conflict markers and keeping the intended logic from both sides. Restore the home page setup around useTranslations, useFormatter, and the features array in app/[locale]/page.tsx, and also preserve the useScrollRestoration('/', !loading) call from the other branch in the same component. Make sure the final file contains no <<<<<<<, =======, or >>>>>>> markers and that the resulting page component compiles cleanly.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/`[locale]/page.tsx:
- Around line 233-235: The loading branch in the page render currently wraps
BalanceSkeleton inside a paragraph, which can create invalid nesting and
hydration issues if the skeleton renders block content. Update the balance/rates
loading branch in page.tsx to use a div wrapper instead of p, keeping the
existing text styling on the wrapper around BalanceSkeleton.
- Around line 214-217: Restore localization on the locale-scoped page by
replacing the newly hardcoded English labels/messages with translated strings
from the existing i18n source. Update the wallet balance label, the missing-rate
notice, and the “Add demo funds” text in the page component so they use the same
translation mechanism as the rest of app/[locale]/page.tsx. Use the existing UI
symbols in this file to locate the affected text and ensure all visible strings
are sourced from locale-aware keys rather than inline English.
---
Outside diff comments:
In `@app/`[locale]/page.tsx:
- Around line 134-147: Resolve the merge conflict in the page component by
removing the conflict markers and keeping the intended logic from both sides.
Restore the home page setup around useTranslations, useFormatter, and the
features array in app/[locale]/page.tsx, and also preserve the
useScrollRestoration('/', !loading) call from the other branch in the same
component. Make sure the final file contains no <<<<<<<, =======, or >>>>>>>
markers and that the resulting page component compiles cleanly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: de9baa0e-0c8e-4a6d-afd7-47d497871301
📒 Files selected for processing (2)
app/[locale]/page.tsxapp/send/page.tsx
| <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 md:text-xs"> | ||
| ACBU | ||
| </p> | ||
| <p className="text-[10px] text-muted-foreground mb-1 md:text-xs">Wallet balance</p> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Revert hardcoded English strings in the locale page.
This route is locale-scoped (app/[locale]/...), but several new labels/messages are now hardcoded (e.g., wallet label, missing-rate notice, “Add demo funds”), causing localization regressions.
Also applies to: 251-252, 270-277
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/`[locale]/page.tsx around lines 214 - 217, Restore localization on the
locale-scoped page by replacing the newly hardcoded English labels/messages with
translated strings from the existing i18n source. Update the wallet balance
label, the missing-rate notice, and the “Add demo funds” text in the page
component so they use the same translation mechanism as the rest of
app/[locale]/page.tsx. Use the existing UI symbols in this file to locate the
affected text and ensure all visible strings are sourced from locale-aware keys
rather than inline English.
| ) : balanceLoading || ratesLoading ? ( | ||
| <<<<<<< HEAD:app/[locale]/page.tsx | ||
| <p className="text-sm text-muted-foreground mt-1.5">{t('approx_usd')} ...</p> | ||
| ) : balance == null ? ( | ||
| <p className="text-sm text-muted-foreground mt-1.5">{t('approx_usd')} —</p> | ||
| ) : acbuUsd != null ? ( | ||
| <p className="text-sm text-muted-foreground mt-1.5 tabular-nums"> | ||
| {t('approx_usd')} {format.number(acbuUsd, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} | ||
| </p> | ||
| ) : ( | ||
| <p className="text-sm text-muted-foreground mt-1.5">{t('approx_usd')} —</p> | ||
| )} | ||
| </div> | ||
| <div className="flex-1 min-w-0 text-right"> | ||
| <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1"> | ||
| {t('fiat')} | ||
| </p> | ||
| <p className="text-[10px] text-muted-foreground mb-1">{t('simulated_usd_equivalent')}</p> | ||
| <div className="text-2xl sm:text-3xl font-bold text-foreground tabular-nums space-y-1"> | ||
| ======= | ||
| <p className="text-sm text-muted-foreground mt-1.5 md:text-base"><BalanceSkeleton variant="compact" /></p> | ||
| ) : acbuUsd != null ? ( |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Avoid rendering BalanceSkeleton inside a <p>.
The loading branch wraps a component in <p>...</p>; if that component renders block content, this creates invalid nesting and can cause hydration/DOM correction issues. Use a <div> wrapper for the skeleton branch.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/`[locale]/page.tsx around lines 233 - 235, The loading branch in the page
render currently wraps BalanceSkeleton inside a paragraph, which can create
invalid nesting and hydration issues if the skeleton renders block content.
Update the balance/rates loading branch in page.tsx to use a div wrapper instead
of p, keeping the existing text styling on the wrapper around BalanceSkeleton.
|
@Rayhab2000 fix conflict |
2 participants
Screen readers now announce balance changes politely without interrupting user's current output. Improves accessibility for
visually impaired users who can now perceive balance changes without navigating away.
closes #475
Summary by CodeRabbit
Accessibility
UI Improvements