perf(accessibility): fix iOS accessibility in WhatsHappening and TopT… by javiergarciavera · Pull Request #29123 · MetaMask/metamask-mobile

javiergarciavera · 2026-04-21T15:43:57Z

…raders sections

WhatsHappeningCard: collapse double Box wrapper to single node (–1 native node per card)
WhatsHappeningSection, TopTradersSection: View ref + Box gap → View ref style

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 refactor focused on layout/styling and analytics/view tracking wiring; main risk is subtle spacing or event-firing behavior changes when sections are empty/loading.

Overview
Improves homepage section rendering and instrumentation for Top Traders and What’s Happening.

TopTradersSection and WhatsHappeningSection now pass a null sectionRef to useHomeViewedEvent when the section won’t render, avoiding measuring a non-mounted view while preserving the hook’s empty/immediate-fire behavior. Both section headers also gain stable testIDs via WalletViewSelectorsIDs.HOMEPAGE_SECTION_TITLE(...).

WhatsHappeningSection removes the extra Box wrapper (replacing gap with a StyleSheet style on the root View), and WhatsHappeningCard collapses layout into the TouchableOpacity via Tailwind style to reduce one native node per card.

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

github-actions · 2026-04-21T15:44:07Z

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.

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 238ce24. Configure here.}

codecov-commenter · 2026-04-21T16:37:13Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.84%. Comparing base (51b6bbd) to head (e75d976).
⚠️ Report is 40 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #29123      +/-   ##
==========================================
- Coverage   82.15%   81.84%   -0.31%     
==========================================
  Files        5178     5244      +66     
  Lines      137450   138676    +1226     
  Branches    31079    31462     +383     
==========================================
+ Hits       112924   113505     +581     
- Misses      16875    17447     +572     
- Partials     7651     7724      +73

☔ 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.

…raders sections - WhatsHappeningCard: collapse double Box wrapper to single node (–1 native node per card) - WhatsHappeningSection, TopTradersSection: View ref + Box gap → View ref style Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…HappeningSection The testID was only present on the error-state SectionHeader, not on the normal success/loading render path. Consistent with TopTradersSection and the error branch of this same component. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…n won't render When traders are empty after loading the component returns null, leaving the ref unattached. Passing a non-null ref with a null .current silently blocks both the viewport-visibility and the immediate-fire paths of useHomeViewedEvent. Apply the same willRender pattern used by WhatsHappeningSection so the empty-state analytics event fires correctly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions · 2026-05-04T10:59:28Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeWalletPlatform
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 UI components within the Homepage/Trending feature area:

TopTradersSection.tsx: Adds a willRender guard to prevent view-event tracking when the section won't render, and adds a testID (HOMEPAGE_SECTION_TITLE('top-traders')) to the SectionHeader for E2E test automation.
WhatsHappeningSection.tsx: Refactors layout from Box wrapper to View + StyleSheet.create for gap styling, and adds testID (HOMEPAGE_SECTION_TITLE('whats-happening')) to SectionHeader components in both the error state and normal render paths.
WhatsHappeningCard.tsx: Flattens the component hierarchy by moving Tailwind styles directly onto TouchableOpacity instead of using nested Box components, while preserving the same visual output.

These changes are purely UI refactoring within the Trending/Homepage sections. The SmokeWalletPlatform tag covers the Trending discovery tab (search, feed navigation, browser integration) which directly exercises these components. No other test suites are impacted since:

No controller/engine changes
No navigation changes
No shared modal/confirmation changes
No account/network management changes
The testID additions are specifically for E2E test infrastructure in the Trending area

Performance Test Selection:
The changes are minor UI refactoring - flattening component nesting, replacing Box wrappers with View+StyleSheet, and adding testIDs. These are not performance-impacting changes. The layout changes are equivalent in rendering complexity (same visual output, slightly different component tree depth). No data loading, state management, or critical rendering path changes were made.

View GitHub Actions results

sonarqubecloud · 2026-05-04T11:17:12Z

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

cursor Bot reviewed Apr 21, 2026

View reviewed changes

Comment thread app/components/Views/Homepage/Sections/WhatsHappening/WhatsHappeningSection.tsx Outdated

Comment thread app/components/Views/Homepage/Sections/TopTraders/TopTradersSection.tsx Outdated

javiergarciavera force-pushed the perf/social-accessibility branch from 238ce24 to 8e96a8b Compare April 21, 2026 16:16

github-actions Bot added the size-M label Apr 21, 2026

javiergarciavera force-pushed the perf/social-accessibility branch from 8e96a8b to aba8226 Compare April 21, 2026 16:17

javiergarciavera requested a review from a team as a code owner April 21, 2026 16:17

javiergarciavera force-pushed the perf/social-accessibility branch from aba8226 to 8e96a8b Compare April 21, 2026 16:18

github-actions Bot added the risk-low Low testing needed · Low bug introduction risk label Apr 21, 2026

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Apr 21, 2026

javiergarciavera added the no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed label Apr 28, 2026

javiergarciavera force-pushed the perf/social-accessibility branch from 3cde92b to 3872e55 Compare April 28, 2026 16:12

javiergarciavera and others added 3 commits May 4, 2026 12:32

javiergarciavera force-pushed the perf/social-accessibility branch from 3872e55 to e75d976 Compare May 4, 2026 10:57

javiergarciavera added the team-social-ai Social & AI team label May 4, 2026

zone-live approved these changes May 4, 2026

View reviewed changes

javiergarciavera enabled auto-merge May 4, 2026 12:31

javiergarciavera added this pull request to the merge queue May 4, 2026

Merged via the queue into main with commit a614776 May 4, 2026
153 of 156 checks passed

javiergarciavera deleted the perf/social-accessibility branch May 4, 2026 13:03

github-actions Bot locked and limited conversation to collaborators May 4, 2026

metamaskbotv2 Bot added the release-7.77.0 Issue or pull request that will be included in release 7.77.0 label May 4, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

perf(accessibility): fix iOS accessibility in WhatsHappening and TopT…#29123

perf(accessibility): fix iOS accessibility in WhatsHappening and TopT…#29123
javiergarciavera merged 3 commits into
mainfrom
perf/social-accessibility

javiergarciavera commented Apr 21, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Apr 21, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

Uh oh!

codecov-commenter commented Apr 21, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

sonarqubecloud Bot commented May 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

javiergarciavera commented Apr 21, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Apr 21, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

codecov-commenter commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions Bot commented May 4, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented May 4, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

javiergarciavera commented Apr 21, 2026 •

edited by cursor Bot

Loading

codecov-commenter commented Apr 21, 2026 •

edited

Loading