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
UI-only changes to Bridge token list rendering and accessibility; no auth, transactions, or API contract changes.

Overview
Improves Bridge token selector scrolling performance and iOS VoiceOver behavior without changing selection or balance logic.

BridgeTokenSelector tunes the token list: ESTIMATED_ITEM_HEIGHT is 68 (documented from padding/avatar sizes), and the FlatList gets initialNumToRender, maxToRenderPerBatch, windowSize, and removeClippedSubviews to cut over-rendering on long lists.

TokenSelectorItem wraps the row in React.memo, hoists shared balance text styles, and sets accessible={false} on inner Box layouts so the row’s TouchableOpacity stays the single focusable control on iOS. Balance rows pass explicit textVariant / textColor instead of spreading style objects.

TokenButton drops the Box wrapper: layout moves onto TouchableOpacity’s pillContainer style so the pill is one simpler touch target.

^{Reviewed by Cursor Bugbot for commit 7185cac. 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 1 potential issue.

^{❌ 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 08b4c18. Configure here.}

[sonarqubecloud]

Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeSwap, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The three changed files are all within the Bridge UI component directory and involve:

1. BridgeTokenSelector.tsx: Minor constant adjustment (ESTIMATED_ITEM_HEIGHT 72→68) and FlatList performance props (initialNumToRender, maxToRenderPerBatch, windowSize, removeClippedSubviews). These are standard React Native FlatList optimizations that improve rendering performance without changing behavior.

2. TokenButton.tsx: Refactoring that removes the Box wrapper and moves flex styles directly into the StyleSheet pillContainer. The visual output is identical — same layout, same styles, just simplified JSX structure.

3. TokenSelectorItem.tsx: Performance optimizations — moving inline style objects to module-level constants (avoids re-creation on each render), adding accessible={false} to Box components, and wrapping the component with React.memo. Also refactors tokenBalanceTextProps spreading to explicit prop passing.

These changes are scoped entirely to the Bridge token selector UI. They are low-risk refactoring and performance improvements with no logic changes, no API changes, and no controller/Engine modifications.

SmokeSwap is selected because it directly covers swap and bridge trading flows, including the token selector UI that was modified.
SmokeConfirmations is selected per the SmokeSwap tag description which states: "When selecting SmokeSwap, also select SmokeConfirmations (transaction confirmations are part of the flow)."

No other tags are needed as the changes are isolated to Bridge UI components with no impact on accounts, networks, identity, snaps, browser, or other wallet features.

Performance Test Selection:
While the changes include FlatList performance optimizations (initialNumToRender, maxToRenderPerBatch, windowSize, removeClippedSubviews) and React.memo wrapping in the Bridge token selector, these are targeted micro-optimizations within a specific UI component. The available performance test tags (@PerformanceSwaps, @PerformanceLaunch, etc.) measure broader flow-level performance metrics rather than individual component render optimizations. The changes are unlikely to produce measurable differences in the performance test suite's timing metrics, and no performance test infrastructure was modified. No performance tests are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud