Fixes for UI Tour#1429
Merged
Merged
Conversation
…hanged color of tour titles, fixed back nav issue
✅ Deploy Preview for afmg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the UI Tour experience by aligning the tour prompt button styling with other UI controls, adding keyboard navigation, and tightening step state synchronization so that navigating backward restores the correct underlying UI state (addressing layout corruption issues reported in #1421 / #1422).
Changes:
- Updated the tour prompt button markup and CSS to use a button + SVG icon and refreshed positioning/shadows.
- Added custom keyboard navigation for the tour (arrow keys for previous/next, Esc to exit) and adjusted tour step hooks to better restore UI state when navigating backward.
- Expanded Playwright e2e coverage to validate backward navigation state restoration and to prevent the “toolsContent leak” regression when closing the tour early.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| tests/e2e/ui-tour.spec.ts | Adds extensive e2e regression coverage for backward navigation state restoration and early-close menu corruption scenarios. |
| src/modules/ui-tour.ts | Implements keyboard navigation handling, injects driver.js popover text styling, and adjusts step lifecycle hooks to keep UI state consistent when moving backward. |
| src/index.html | Updates the tour prompt button markup to a semantic <button> with an inline SVG icon. |
| public/index.css | Restyles the tour prompt button to match the app’s minimized button aesthetic and adds hover behavior for the SVG icon. |
Comment on lines
+6
to
+13
| let stylesInjected = false; | ||
| function injectTourStyles(): void { | ||
| if (stylesInjected) return; | ||
| stylesInjected = true; | ||
| const style = document.createElement("style"); | ||
| style.textContent = | ||
| ".driver-popover-title,.driver-popover-description,.driver-popover-progress-text{color:#000!important}"; | ||
| document.head.appendChild(style); |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Owner
|
Thanks. It looks driverjs has a built-in way to allow keyboard navigation and colors, why do we need to build our own? |
Contributor
Author
|
Ok, will look at that |
Contributor
Author
|
@Azgaar - the lint error is in the river generator - not anything I touched. |
Owner
|
No worries. |
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
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.
Description
Addresses bugs #1421 and #1422