fixed: web(WalletModal): enable focus trap inside wallet selection modal by GABRIELOFGOD · Pull Request #577 · Fundable-Protocol/stellar_client_os

GABRIELOFGOD · 2026-07-29T18:57:10Z

close #392
close #394

Summary by CodeRabbit

Accessibility
- Improved keyboard navigation by keeping focus within the wallet connection modal.
- Restored focus to the wallet trigger after closing the modal with Escape.
- Added clearer selection state announcements for wallet options and improved button behavior.
Style
- Refined wallet modal and overlay presentation.
Tests
- Added end-to-end coverage for focus trapping and Escape-key close behavior.

drips-wave · 2026-07-29T18:57:17Z

@GABRIELOFGOD 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

coderabbitai · 2026-07-29T18:57:50Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4d297cb0-2f45-4b8c-a264-9abbd895a134

📥 Commits

Reviewing files that changed from the base of the PR and between 0c7fdbb and eb41366.

📒 Files selected for processing (4)

.gitignore
apps/web/src/components/organisms/connect-button.tsx
apps/web/src/components/organisms/wallet-modal.tsx
apps/web/src/providers/StellarWalletProvider.tsx

📝 Walkthrough

Walkthrough

The wallet modal now traps keyboard focus and restores focus to its trigger after closing. Wallet controls expose explicit semantics. End-to-end tests cover these interactions. Stellar wallet state initialization now reads uppercase persisted addresses and stellar_wallet_id.

Changes

Wallet modal accessibility

Layer / File(s)	Summary
Trigger markers and focus behavior `apps/web/src/components/organisms/connect-button.tsx`, `apps/web/src/components/organisms/wallet-modal.tsx`	Wallet triggers receive `data-wallet-trigger`. Modal close focuses the mounted trigger. Wallet controls define button types and selection state.
Keyboard focus validation `apps/web/e2e/wallet-connection.spec.ts`, `apps/web/test-results/.last-run.json`, `.gitignore`	End-to-end tests verify focus containment and trigger restoration. The recorded test result is failed, and `test-results` is ignored.

Wallet state restoration

Layer / File(s)	Summary
Persisted wallet initialization `apps/web/src/providers/StellarWalletProvider.tsx`	Provider initializers read uppercase persisted addresses and `stellar_wallet_id`. One address path accepts only TESTNET state.
Session restoration `apps/web/src/providers/StellarWalletProvider.tsx`	Session restoration adds direct local-storage reads before existing reads, resulting in duplicate declarations within the effect scope.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant WalletModal
  participant WalletTrigger
  User->>WalletModal: Open wallet modal
  User->>WalletModal: Press Tab or Shift+Tab
  WalletModal->>WalletModal: Keep focus inside dialog
  User->>WalletModal: Press Escape
  WalletModal->>WalletTrigger: Restore focus to trigger

Possibly related PRs

Fundable-Protocol/stellar_client_os#80: Related wallet modal focus-trap and focus-restoration changes.
Fundable-Protocol/stellar_client_os#579: Related structured wallet-state restoration in StellarWalletProvider.
Fundable-Protocol/stellar_client_os#555: Related wallet connection trigger and provider state handling.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The updated apps/web/test-results/.last-run.json appears unrelated to the modal focus-trap fix.	Remove the generated test-results artifact from the PR unless it is intentionally versioned as part of the feature.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The modal focus trap fix and accompanying tests address issue `#392`'s acceptance criteria.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: fixing focus trapping in the WalletModal wallet selection modal.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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.6)

apps/web/src/components/organisms/wallet-modal.tsx

File contains syntax errors that prevent linting: Line 136: Unexpected token. Did you mean {'>'} or >?; Line 262: expected } but instead the file ends

apps/web/src/providers/StellarWalletProvider.tsx

File contains syntax errors that prevent linting: Line 122: Expected a statement but instead found ')'.; Line 462: expected , but instead found ;; Line 463: expected } but instead the file ends

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

apps/web/e2e/wallet-connection.spec.ts (1)
87-106: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy lift

Cover focus restoration after a successful connection.

This test closes with Escape before connect() replaces the disconnected trigger. Add a mocked successful-connect flow that asserts focus lands on the newly mounted connected-wallet trigger after the modal auto-closes.
🤖 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 `@apps/web/e2e/wallet-connection.spec.ts` around lines 87 - 106, Extend the
wallet connection focus test around the existing Escape scenario to mock a
successful connect flow, allowing connect() to replace the disconnected trigger
and auto-close the modal. Assert that focus is restored to the newly mounted
connected-wallet trigger after the successful connection, rather than only
validating the pre-connection Escape behavior.

🤖 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 `@apps/web/test-results/.last-run.json`:
- Around line 1-4: Remove the generated test-results/.last-run.json artifact
from the change, and update the repository ignore configuration to exclude
generated test-result files such as .last-run.json.

---

Nitpick comments:
In `@apps/web/e2e/wallet-connection.spec.ts`:
- Around line 87-106: Extend the wallet connection focus test around the
existing Escape scenario to mock a successful connect flow, allowing connect()
to replace the disconnected trigger and auto-close the modal. Assert that focus
is restored to the newly mounted connected-wallet trigger after the successful
connection, rather than only validating the pre-connection Escape behavior.

🪄 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 Plus

Run ID: 9c836ead-b344-47e6-aa92-6e18382050a3

📥 Commits

Reviewing files that changed from the base of the PR and between 375c936 and 0c7fdbb.

📒 Files selected for processing (4)

apps/web/e2e/wallet-connection.spec.ts
apps/web/src/components/organisms/connect-button.tsx
apps/web/src/components/organisms/wallet-modal.tsx
apps/web/test-results/.last-run.json

… format

GABRIELOFGOD · 2026-07-29T19:50:09Z

New commit made
close #394

Idrhas · 2026-08-03T14:00:35Z

dont forget to offramp using https://stellar.fundable.finance/offramp its fast, free and p2p rates

Idrhas · 2026-08-03T14:02:34Z

dont forget to offramp using https://stellar.fundable.finance/offramp its fast, free and p2p rates

Idrhas · 2026-08-03T14:14:06Z

dont forget to offramp using https://stellar.fundable.finance/offramp its fast, free and p2p rates

fixed: web(WalletModal): enable focus trap inside wallet selection modal

0c7fdbb

coderabbitai Bot reviewed Jul 29, 2026

View reviewed changes

Comment thread apps/web/test-results/.last-run.json

web(StellarWalletProvider): normalize public keys to uppercase StrKey…

4205d17

… format

coderabbitai Bot mentioned this pull request Jul 29, 2026

feat: responsive wallet modal with Freighter, Albedo & Rango support #584

Merged

Merge branch 'main' into main

eb41366

Idrhas merged commit df6c453 into Fundable-Protocol:main Aug 7, 2026
1 check was pending

Navigation Menu

Uh oh!

fixed: web(WalletModal): enable focus trap inside wallet selection modal - #577

fixed: web(WalletModal): enable focus trap inside wallet selection modal#577
Idrhas merged 3 commits into
Fundable-Protocol:mainfrom
GABRIELOFGOD:main

GABRIELOFGOD commented Jul 29, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

drips-wave Bot commented Jul 29, 2026

Uh oh!

coderabbitai Bot commented Jul 29, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

GABRIELOFGOD commented Jul 29, 2026

Uh oh!

Idrhas commented Aug 3, 2026

Uh oh!

Idrhas commented Aug 3, 2026

Uh oh!

Idrhas commented Aug 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

GABRIELOFGOD commented Jul 29, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Summary by CodeRabbit

Uh oh!

drips-wave Bot commented Jul 29, 2026

Uh oh!

coderabbitai Bot commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

GABRIELOFGOD commented Jul 29, 2026

Uh oh!

Idrhas commented Aug 3, 2026

Uh oh!

Idrhas commented Aug 3, 2026

Uh oh!

Idrhas commented Aug 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

GABRIELOFGOD commented Jul 29, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 29, 2026 •

edited

Loading