docs(DiscoverySkip): announce final-step button as "Complete tour"#421
Merged
Conversation
The skillz tour footer reuses Discovery.Skip for the last-step primary
action (visible text "Complete"), but the button hardcoded
`aria-label="Skip tour"`. Screen readers therefore announced the
completion control as its semantic opposite ("Skip tour").
skip() already branches on `root.isLast` — on the final step it calls
skillz.complete() and routes to the completeRoute, so the behavior was
correct; only the label was wrong. Derive the label from the same
`root.isLast` ref (matching DiscoveryNext's existing pattern) so the
mid-tour Exit button stays "Skip tour" and the final button becomes
"Complete tour". No behavior change.
|
commit: |
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
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.
Problem
On the last step of a Skillz tour, the primary button reads "Complete" but announces to screen readers as "Skip tour" — the semantic opposite of the action it performs.
Root cause
The tour footer (
DocsDiscoveryStep.vue) reusesDiscovery.Skipfor two roles:v-if="!isLast")v-else)DiscoverySkip.vuehardcodedaria-label="Skip tour"for both. Itsskip()already branches onroot.isLast— on the final step it callsskillz.complete()and routes to the tour'scompleteRoute, so the behavior was always correct; only the label was wrong.Fix
Derive the label from the same
root.isLastref, mirroring the patternDiscoveryNext.vuealready uses for itsGo to next step→Complete tourswap:Skip tour.Complete tour.No behavior change —
Discovery.Nextis hidden in interactive tours, so the last-step action must remainDiscovery.Skip; only its announced label is corrected.Verification
Drove the
using-searchtour end-to-end in a browser:aria-label="Skip tour"(unchanged)aria-label="Complete tour"(wasSkip tour)status: "completed"and navigates to the tour detail page.