From e1ce3be5fbd42461a3ec2c286fb255d02688e3f1 Mon Sep 17 00:00:00 2001
From: Adrian Luca <45937542+eidriahn@users.noreply.github.com>
Date: Tue, 30 Dec 2025 05:59:31 +0100
Subject: [PATCH] fix: fixes icons not showing when hovering quick pick
 checkboxes (#285250)

* fix: fixes icons not showing when hovering quick pick checkboxes

* chore: make _title accept IMarkdownString | HTMLElement

* chore: refactors and stripping icon syntax off of ariaLabel

* chore: strip icons for strings in tooltip

---------

Co-authored-by: Eidriahn <adrian@adrianluca.dev>
---
 src/vs/base/browser/ui/toggle/toggle.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/vs/base/browser/ui/toggle/toggle.ts b/src/vs/base/browser/ui/toggle/toggle.ts
index 4944052c8443..f310bff89657 100644
--- a/src/vs/base/browser/ui/toggle/toggle.ts
+++ b/src/vs/base/browser/ui/toggle/toggle.ts
@@ -6,9 +6,11 @@
 import { IAction } from '../../../common/actions.js';
 import { Codicon } from '../../../common/codicons.js';
 import { Emitter, Event } from '../../../common/event.js';
+import { IMarkdownString, isMarkdownString } from '../../../common/htmlContent.js';
+import { getCodiconAriaLabel, stripIcons } from '../../../common/iconLabels.js';
 import { KeyCode } from '../../../common/keyCodes.js';
 import { ThemeIcon } from '../../../common/themables.js';
-import { $, addDisposableListener, EventType, isActiveElement } from '../../dom.js';
+import { $, addDisposableListener, EventType, isActiveElement, isHTMLElement } from '../../dom.js';
 import { IKeyboardEvent } from '../../keyboardEvent.js';
 import { BaseActionViewItem, IActionViewItemOptions } from '../actionbar/actionViewItems.js';
 import { IActionViewItemProvider } from '../actionbar/actionbar.js';
@@ -20,7 +22,7 @@ import './toggle.css';
 export interface IToggleOpts extends IToggleStyles {
 	readonly actionClassName?: string;
 	readonly icon?: ThemeIcon;
-	readonly title: string;
+	readonly title: string | IMarkdownString | HTMLElement;
 	readonly isChecked: boolean;
 	readonly notFocusable?: boolean;
 	readonly hoverLifecycleOptions?: IHoverLifecycleOptions;
@@ -126,7 +128,7 @@ export class Toggle extends Widget {
 	get onKeyDown(): Event<IKeyboardEvent> { return this._onKeyDown.event; }
 
 	private readonly _opts: IToggleOpts;
-	private _title: string;
+	private _title: string | IMarkdownString | HTMLElement;
 	private _icon: ThemeIcon | undefined;
 	readonly domNode: HTMLElement;
 
@@ -153,7 +155,7 @@ export class Toggle extends Widget {
 
 		this.domNode = document.createElement('div');
 		this._register(getBaseLayerHoverDelegate().setupDelayedHover(this.domNode, () => ({
-			content: this._title,
+			content: !isMarkdownString(this._title) && !isHTMLElement(this._title) ? stripIcons(this._title) : this._title,
 			style: HoverStyle.Pointer,
 		}), this._opts.hoverLifecycleOptions));
 		this.domNode.classList.add(...classes);
@@ -246,9 +248,12 @@ export class Toggle extends Widget {
 		this.domNode.classList.add('disabled');
 	}
 
-	setTitle(newTitle: string): void {
+	setTitle(newTitle: string | IMarkdownString | HTMLElement): void {
 		this._title = newTitle;
-		this.domNode.setAttribute('aria-label', newTitle);
+
+		const ariaLabel = typeof newTitle === 'string' ? newTitle : isMarkdownString(newTitle) ? newTitle.value : newTitle.textContent;
+
+		this.domNode.setAttribute('aria-label', getCodiconAriaLabel(ariaLabel));
 	}
 
 	set visible(visible: boolean) {