Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-02 08:15:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: remove persistent focus outline on walkthrough step checkbox click (#300872)

Browse Source 
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.
This commit is contained in:
Kalash Thakare ☯︎
2026-03-27 23:29:34 +05:30
committed by GitHub
parent a29c4cf52b
commit 6ef843ff0b
1 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css
View File

@@ -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;