add ToC swipe gesture support for toggling open/close #243
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
…age width on mobile Signed-off-by: Rito Rhymes <[email protected]>
…ntent underneath it Signed-off-by: Rito Rhymes <[email protected]>
Convert TOC wrapper to a semantic landmark with aria-label and a stable id for aria-controls. Keep nav button aria-expanded synced on open/close. Set aria-current='location' on the active ToC link and clear it from the previous active link. Close the ToC via Escape key when the nav toggle is visible. Signed-off-by: Rito Rhymes <[email protected]>
Signed-off-by: Rito Rhymes <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
Adds swipe gesture controls for the mobile/tablet Table of Contents (ToC) drawer:
Gestures are only enabled when the nav toggle button is visible (i.e., on mobile/tablet viewports). To prevent accidental toggles, swipe handling is ignored when the gesture begins inside horizontally scrollable elements (e.g., code blocks).
Dependency
This PR is stacked on PR #242, which establishes the foundational open/close state behavior and keeps
aria-expandedcorrectly synced. This PR builds on that foundation so swipe interactions update the same state and accessibility attributes.Rationale
Given the extreme length of the page, the ToC drawer on mobile is essential to navigate with and can be expected to be used frequently so its accessibility and ergonomics matter. Swiping to open/close a side drawer is a common and familiar behavior and may be preferred for some users, and it can be more comfortable than needing to stretch your thumb to the top of the screen each time to open it.
Testing
You can test the functionality out on this live demo: https://zaproxy-api.ritovision.com/
The sensitivity should behave such that vertical scrolling shouldn’t trigger the toggle, nor should tiny left/right movements that are more indicative of incidental finger shifting rather than an intentional swipe.
I tested this on an Android phone (≈450px width) on Chrome, Firefox, and Edge; the behaviors were consistent, smooth, and stable across each.