VS Code Onboarding TPI Fixes#309628
Merged
eli-w-king merged 5 commits intorelease/1.116from Apr 13, 2026
Merged
Conversation
- Make 'Continue with GitHub' a true primary button (accent bg, white text/icon) - Change 'Skip' to secondary style on the sign-in step - Replace 'Continue' with tertiary 'Continue without Signing In' on sign-in step - Other steps retain their original button styles
…izing - Swap Skip/Continue without Signing In button styles (Skip → ghost, Continue → secondary) - Fix focus rings on primary-colored buttons using double-ring box-shadow pattern - Add focus-visible styling for doc links (Agents tutorial) - Fix focus ring clipping on Agents tutorial link - Bump theme card label font-size from 10px to 12px Fixes #309377 Fixes #309380 Fixes #309381 Fixes #309386
…pport - Make theme cards individually tabbable (tabindex=0) instead of roving tabindex - Separate focus (outline ring) from selected (border+box-shadow) for clear visual distinction - Add high contrast overrides using contrastBorder/contrastActiveBorder - Fix focus clipping by changing step-content overflow to visible and adding grid padding Fixes #309517
joshspicer
approved these changes
Apr 13, 2026
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.
Summary
Revises the button hierarchy on the first page (Sign In step) of the 2026 onboarding wizard to better emphasize the primary action while maintaining accessibility. Also fixes focus visibility across all onboarding steps, adjusts theme label sizing, and improves theme card keyboard navigation and high contrast support.
Changes
"Continue with GitHub" button → Primary
--vscode-button-background/--vscode-button-foreground(accent background with white text)--vscode-button-foregroundto ensure contrast/accessibility on the accent background"Skip" button → Ghost (step 0 only)
"Continue" button → Secondary "Continue without Signing In" (step 0 only)
Focus visibility fixes
focusBorder— ensuring focus is always visible regardless of theme:focus-visiblestyling for doc links (Agents tutorial) with proper outlineoutline-offsetto 2px on all standard buttonsTheme card accessibility
tabindex="0") instead of roving tabindex radio groupcontrastBorder/contrastActiveBorderforhc-blackandhc-lightthemesstep-contentoverflow to visible and adding grid paddingTheme label sizing
font-sizefrom 10px to 12px to align with other button/label textFiles changed
src/vs/workbench/contrib/welcomeOnboarding/browser/media/variationA.css— Button styling, focus rings, theme labels, HC overridessrc/vs/workbench/contrib/welcomeOnboarding/browser/onboardingVariationA.ts— Step-aware button state logic, theme card tabindexFixes: #309377
Fixes: #309380
Fixes: #309381
Fixes: #309386
Fixes: #309517