ol-carousel touch gestures and swipe physic refinements#13101
Open
lokesh wants to merge 2 commits into
Open
Conversation
Touch swipes were unreliable: starting a vertical page scroll on the carousel could fire a page navigation (pointercancel was handled as a release), horizontal swipes scrolled the page underneath, and after the first page transition the swipe surface went dead on iOS (the pointerdown listener lived on the translated track). - Resolve gesture ownership with an axis lock (8px dead zone, 2:1 horizontal bias) and preventDefault page scroll once locked - Treat pointercancel as an abort that springs home, never a navigation - Move gesture listeners to the untransformed viewport so the whole surface stays swipeable on every page - Smooth velocity (EMA over >=4ms windows, capped, stale samples discarded) so release momentum is stable - Land long drags on the nearest page; momentum carries at most one page beyond it Adds a jest suite covering the gesture state machine.
lokesh
changed the title
ol-carousel refinements: - Deepen the cover lookahead from one page to two on the first hover or keyboard focus, so fast page-flipping stays ahead of the loaded range. Skipped on data-saver / 2g connections; fires at most once. - Add arrow-key / Home / End navigation to the page-indicator tablist with a roving tabindex (APG Tabs pattern), plus tests. - Regenerate custom-elements.json to match.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Follow-up polish to #13077 (no linked issue).
A set of refinements to
<ol-carousel>: smoother touch swiping, smarter cover-image loading, and full keyboard navigation.carousel.mp4
Touch & swipe
Cover loading
Keyboard
Testing
/developers/design#carousel(use Chrome device mode for touch)No visual changes. Tests live in
tests/unit/js/OlCarousel.test.js(18 tests) covering the gesture behavior and keyboard navigation.Stakeholders
@RayBB