Disable app article swipe on interactive atom blocks #14131
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
|
Size Change: +1.33 kB (+0.13%) Total Size: 1.05 MB
ℹ️ View Unchanged
|
dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx
Outdated
Show resolved
Hide resolved
dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx
Outdated
Show resolved
Hide resolved
frederickobrien
changed the title
|
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
force-pushed
the
disable-touch-events-on-interactive-blocks
branch
from
f56854e to
a44f936
Compare
|
Switching this to a draft, @jonathonherbert, because as per #14140 this might need a little more investigation than I initially thought |
|
"This PR is stale because it has been open 30 days with no activity. Unless a comment is added or the “stale” label removed, this will be closed in 3 days" |
frederickobrien
force-pushed
the
disable-touch-events-on-interactive-blocks
branch
from
a44f936 to
d5e8f89
Compare
CDicksonG
added
the
Pick me up
…rtable.tsx Co-authored-by: Jonathon Herbert <[email protected]>
…rtable.tsx Co-authored-by: Jonathon Herbert <[email protected]>
frederickobrien
force-pushed
the
disable-touch-events-on-interactive-blocks
branch
from
d5e8f89 to
2e7fcf5
Compare
|
"This PR is stale because it has been open 30 days with no activity. Unless a comment is added or the “stale” label removed, this will be closed in 3 days" |
|
This PR was closed because it has been stalled for 3 days with no activity. |
KaliedaRik
approved these changes
Sep 19, 2025
arelra
reviewed
Sep 19, 2025
Comment on lines
355
to
357
| const onTouchStart = () => getInteractionClient().disableArticleSwipe(true); | ||
|
|
||
| const onTouchEnd = () => getInteractionClient().disableArticleSwipe(false); |
There was a problem hiding this comment.
Small performance suggestion.
I think these functions will be created on every render of this component even though they may not be used by the web rendering target. We could inline them in but again they will be created on every render of the component. useCallback is an option but given the functions are idempotent and afaics don't rely on any state could they be moved outside of the component to the module level?
JamieB-gu
reviewed
Sep 19, 2025
There was a problem hiding this comment.
Thanks @frederickobrien , couple of questions about the atom implementation.
Comment on lines
61
to
62
| onTouchStart={isApps ? onTouchStart : undefined} | ||
| onTouchEnd={isApps ? onTouchEnd : undefined} |
There was a problem hiding this comment.
This doesn't appear to be wrapped in an Island, so what allows this code to run on the client?
There was a problem hiding this comment.
The description above says (emphasis mine):
As per #14140 the changes here currently apply to interactive elements but not atoms.
But this is the component for interactive atoms?
(It's deprecated)
Can of worms formally opened.
For recurring pieces, it’s often the same embed offender (old mobile templates degrade it to showing images stacked vertically as a workaround): Here is an ongoing series where it’s still used: https://www.theguardian.com/lifeandstyle/series/flashback
Another alternative would be to switch article swipe to two-finger swipe… |
Reettaphant
added
feature
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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...