From 6ef843ff0be75b6fc2abe16e2e202917cd0d7d68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kalash=20Thakare=20=E2=98=AF=EF=B8=8E?= Date: Fri, 27 Mar 2026 23:29:34 +0530 Subject: [PATCH] fix: remove persistent focus outline on walkthrough step checkbox click (#300872) When clicking a walkthrough step checkbox in an expanded step, a blue focus border appeared and persisted until clicking elsewhere. This was caused by the codicon element receiving tabindex='0' when the step expands, making it focusable on mouse click with no CSS rule to suppress the default outline. Added :focus (outline: none) and :focus-visible (outline with focusBorder) rules for .getting-started-step .codicon, mirroring the existing pattern used for button elements in the same file. --- .../browser/media/gettingStarted.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css b/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css index fefdf4c9dfe..f72871782c5 100644 --- a/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css +++ b/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css @@ -897,6 +897,16 @@ margin-right: 9px; } +/* Don't show focus outline on mouse click. Instead only show outline on keyboard focus. */ +.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon:focus { + outline: none; +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon:focus-visible { + outline: 1px solid var(--vscode-focusBorder); + outline-offset: 0; +} + .monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox.codicon:not(.checked)::before { opacity: 0;