fix: perf(accessibility): fix iOS accessibility in Bridge token selector c…

[javiergarciavera]

…omponents

• BridgeTokenSelector, TokenButton, TokenSelectorItem: Pressable → TouchableOpacity

Description

Changelog

CHANGELOG entry:

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

---

Note

Low Risk
Low risk UI-only changes that tune FlatList rendering and adjust touch/accessibility props; main risk is minor layout/scroll behavior regressions in the token selector.

Overview
Improves Bridge token selector performance by tuning FlatList virtualization (e.g., initialNumToRender, batching/window size, removeClippedSubviews) and updating the estimated row height used for auto-pagination.

Refactors TokenButton and TokenSelectorItem to use TouchableOpacity styling/layout directly (removing the Box wrapper) and tweaks accessibility by marking non-interactive layout containers as accessible={false}.

Cleans up TokenSelectorItem balance rendering by hoisting balance formatting and default text styles, applying tokenBalanceTextProps more explicitly, and memoizing the row component with React.memo.

^{Reviewed by Cursor Bugbot for commit e74d6ff. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 84.61538% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 82.21%. Comparing base (d824f4c) to head (aba8226).
⚠️ Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
...ponents/UI/Bridge/components/TokenSelectorItem.tsx	83.33%	1 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #29128      +/-   ##
==========================================
- Coverage   82.21%   82.21%   -0.01%     
==========================================
  Files        5079     5079              
  Lines      133881   133889       +8     
  Branches    30031    30032       +1     
==========================================
+ Hits       110071   110076       +5     
- Misses      16332    16334       +2     
- Partials     7478     7479       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 61ddee3. Configure here.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
96.7% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeSwap
• Selected Performance tags: @PerformanceSwaps
• Risk Level: low
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are confined to Bridge UI components:

1. BridgeTokenSelector.tsx: Minor constant tweak (ESTIMATED_ITEM_HEIGHT 72→68) and FlatList performance props added (initialNumToRender, maxToRenderPerBatch, windowSize, removeClippedSubviews). These are standard React Native FlatList optimizations that shouldn't break functionality but could affect rendering behavior.

2. TokenButton.tsx: Refactoring that removes the Box wrapper and moves layout styles directly to TouchableOpacity. Functionally equivalent but changes the component tree structure. The pill container styles are preserved.

3. TokenSelectorItem.tsx: Performance optimizations - formatTokenBalance moved to module scope, style objects moved to constants, React.memo wrapping added, accessible={false} added to Box components, and explicit prop passing instead of spread. These are safe refactors.

All changes are in the Bridge token selector UI. The SmokeSwap tag covers swap and bridge trading flows including token selection, which directly exercises these components. No other tags are affected since:

• These are not confirmation-level changes (no transaction submission logic changed)
• No network/chain management changes
• No account management changes
• No core controller changes

Per SmokeSwap tag description: "When selecting SmokeSwap, also select SmokeConfirmations (transaction confirmations are part of the flow)." However, since the changes are purely in the token selector UI (pre-confirmation step) and don't touch confirmation logic, the risk to confirmation flows is minimal. Still, to be safe and follow the tag guidance, SmokeConfirmations should be included.

Performance Test Selection:
The changes include explicit FlatList performance optimizations (initialNumToRender, maxToRenderPerBatch, windowSize, removeClippedSubviews) and React.memo wrapping on TokenSelectorItem. These are performance-focused changes that directly affect rendering performance in the swap/bridge token selector flow. Running @PerformanceSwaps would validate that these optimizations have the intended positive effect and don't introduce regressions.

View GitHub Actions results