Skip to content

Disable app article swipe on interactive atom blocks #14131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

frederickobrien
Copy link
Member

@frederickobrien frederickobrien commented Jun 25, 2025

In the same spirit as #14127 this fires the Bridget function disableArticleSwipe() when readers are interacting with interactive embed blocks. The implementation here is more targeted than on interactive articles, more akin to carousels and key events in live blogs.

This will allow interactive embeds to have a wider range of features. At present a lot of touch events don't work as intended because they clash with Android's 'swipe for next article' feature.

Would really value @guardian/dotcom-platform's take on this as we don't want to overstep. As per #14140 the changes here currently apply to interactive elements but not atoms. The PR will will need further work to cover the use cases we want it to.

Alternatively, we could deprecate the swipe for next article feature entirely...

Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@frederickobrien frederickobrien requested review from a team June 25, 2025 11:07
@frederickobrien frederickobrien self-assigned this Jun 25, 2025
@frederickobrien frederickobrien added this to the Visuals milestone Jun 25, 2025
Copy link

github-actions bot commented Jun 25, 2025

@frederickobrien frederickobrien linked an issue Jun 25, 2025 that may be closed by this pull request
Copy link

github-actions bot commented Jun 25, 2025

Size Change: +1.33 kB (+0.13%)

Total Size: 1.05 MB

Filename Size Change
dotcom-rendering/dist/728.client.web.********************.js 0 B -3.6 kB (removed) 🏆
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 5.75 kB +3.23 kB (+128.68%) 🆘
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.3 kB -708 B (-5.88%)
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.74 kB -2.03 kB (-23.11%) 🎉
dotcom-rendering/dist/1665.client.web.********************.js 4.42 kB +4.42 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1160.client.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/137.client.web.********************.js 3.82 kB 0 B
dotcom-rendering/dist/1521.client.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/1931.client.web.********************.js 2.83 kB 0 B
dotcom-rendering/dist/21.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/2102.client.web.********************.js 10.7 kB 0 B
dotcom-rendering/dist/2244.client.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/233.client.web.********************.js 3.18 kB 0 B
dotcom-rendering/dist/2373.client.web.********************.js 4.52 kB 0 B
dotcom-rendering/dist/2400.client.web.********************.js 2.11 kB 0 B
dotcom-rendering/dist/2523.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/2629.client.web.********************.js 5.84 kB 0 B
dotcom-rendering/dist/2909.client.web.********************.js 20 kB 0 B
dotcom-rendering/dist/3342.client.web.********************.js 3.67 kB 0 B
dotcom-rendering/dist/3944.client.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/3979.client.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/4079.client.web.********************.js 11.8 kB 0 B
dotcom-rendering/dist/4183.client.web.********************.js 20.5 kB 0 B
dotcom-rendering/dist/420.client.web.********************.js 4.35 kB 0 B
dotcom-rendering/dist/4312.client.web.********************.js 3.07 kB 0 B
dotcom-rendering/dist/4324.client.web.********************.js 5.83 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4524.client.web.********************.js 3.62 kB 0 B
dotcom-rendering/dist/4754.client.web.********************.js 7.66 kB 0 B
dotcom-rendering/dist/5117.client.web.********************.js 49.9 kB 0 B
dotcom-rendering/dist/5128.client.web.********************.js 19.8 kB 0 B
dotcom-rendering/dist/5462.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/5549.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/5895.client.web.********************.js 22.8 kB 0 B
dotcom-rendering/dist/5901.client.web.********************.js 4.21 kB 0 B
dotcom-rendering/dist/5980.client.web.********************.js 5.43 kB 0 B
dotcom-rendering/dist/6085.client.web.********************.js 530 B 0 B
dotcom-rendering/dist/6232.client.web.********************.js 620 B 0 B
dotcom-rendering/dist/6255.client.web.********************.js 12 kB 0 B
dotcom-rendering/dist/6316.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/6317.client.web.********************.js 4.24 kB 0 B
dotcom-rendering/dist/6346.client.web.********************.js 2.75 kB 0 B
dotcom-rendering/dist/6369.client.web.********************.js 4.78 kB 0 B
dotcom-rendering/dist/6501.client.web.********************.js 65.6 kB 0 B
dotcom-rendering/dist/6504.client.web.********************.js 3.29 kB 0 B
dotcom-rendering/dist/6683.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/6694.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/6721.client.web.********************.js 3.2 kB 0 B
dotcom-rendering/dist/6843.client.web.********************.js 3.67 kB 0 B
dotcom-rendering/dist/7008.client.web.********************.js 4.7 kB 0 B
dotcom-rendering/dist/7028.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23.2 kB 0 B
dotcom-rendering/dist/739.client.web.********************.js 528 B 0 B
dotcom-rendering/dist/7540.client.web.********************.js 2.86 kB 0 B
dotcom-rendering/dist/7678.client.web.********************.js 3.78 kB 0 B
dotcom-rendering/dist/7819.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/7829.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/7979.client.web.********************.js 2.75 kB 0 B
dotcom-rendering/dist/7986.client.web.********************.js 3.04 kB 0 B
dotcom-rendering/dist/8110.client.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/8143.client.web.********************.js 16.5 kB 0 B
dotcom-rendering/dist/8361.client.web.********************.js 3.45 kB 0 B
dotcom-rendering/dist/8389.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/8393.client.web.********************.js 3.34 kB 0 B
dotcom-rendering/dist/8406.client.web.********************.js 438 B 0 B
dotcom-rendering/dist/8569.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/8742.client.web.********************.js 4.86 kB 0 B
dotcom-rendering/dist/8938.client.web.********************.js 4.5 kB 0 B
dotcom-rendering/dist/9051.client.web.********************.js 3.4 kB 0 B
dotcom-rendering/dist/9226.client.web.********************.js 7.93 kB 0 B
dotcom-rendering/dist/939.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/9465.client.web.********************.js 5.64 kB 0 B
dotcom-rendering/dist/9599.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/9606.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/9999.client.web.********************.js 5.39 kB 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 8.48 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.99 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.78 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 424 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.71 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.61 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 67.7 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.68 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.73 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.57 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 540 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.28 kB 0 B
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.99 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.39 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.69 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 4.42 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.97 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.73 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js 7.33 kB 0 B
dotcom-rendering/dist/FootballTablesCompetitionSelect-importable.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 364 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.47 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.24 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 8.06 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.57 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 779 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.6 kB +4 B (+0.01%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 851 B 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/InteractivesDisableArticleSwipe-importable.client.web.********************.js 2.18 kB 0 B
dotcom-rendering/dist/InteractivesNativePlatformWrapper-importable.client.web.********************.js 3.2 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.72 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.23 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 7.8 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.58 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.59 kB 0 B
dotcom-rendering/dist/LiveblogGutterAskWrapper-importable.client.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.87 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.71 kB 0 B
dotcom-rendering/dist/LoopVideo-importable.client.web.********************.js 5.67 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.64 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 6.03 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 5.95 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.24 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.11 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.36 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 540 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 801 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 752 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 538 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 470 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.7 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.54 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.14 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.82 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 7.2 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.26 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.22 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.24 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.93 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 877 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 1.11 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 2.6 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.52 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.91 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.78 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.13 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.6 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.82 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.5 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.91 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 6.05 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.33 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 843 B 0 B

compressed-size-action

Copy link

github-actions bot commented Jun 25, 2025

@frederickobrien frederickobrien changed the title Disable touch events on interactive atom blocks Disable app article swipe on interactive atom blocks Jun 25, 2025
@jonathonherbert
Copy link
Contributor

Chatted to @frederickobrien briefly about this PR, which is hugely promising — how might we test this? Fred mentioned there aren't many interactives that are likely to exercise this functionality because it does not currently work on Android.

@frederickobrien frederickobrien force-pushed the disable-touch-events-on-interactive-blocks branch from f56854e to a44f936 Compare June 26, 2025 10:18
@frederickobrien frederickobrien marked this pull request as draft June 27, 2025 13:45
@frederickobrien
Copy link
Member Author

Switching this to a draft, @jonathonherbert, because as per #14140 this might need a little more investigation than I initially thought

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Turn off app touch events for interactive embeds?
2 participants