[Bug] Accessibility: NVDA reads HTML tags in the custom suggestion details pane in the Monaco editor

[AliakseiDormash]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.54.0#XQAAAALuCAAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscxE-KKfddBOfYKIZkI-bRdv2iZJL7d5R2kMIm--ZEG9yPdq0RERDFROlnMLR7GhYQ8bdDssuskiS8Igf_h1fgFHF5o5p4e5eGVVw_uEOMl4kW9iGE9XDPHLW_uHAF3gIYhgzODIuiBb6jzKEX5JyeAbAYrHtrcQmrBcjneRpnUvTfJ7L2nikEu1_uI3g_q5QiEh9VSNa_PNTVxrUbuvyMKgIRbjaiIjXvs6SDzJcvAd1Xls7QSTq5ndFfWTsEpfdvx8tkCELi1EO-1Ohi5waile3nLxNILRIEwj4Pv6aV5ayRFgXSbMa1d0rNpuopN1fVM8JNLlu8tuUL2oOEYl9BzcSs-xmnnjycQGL6OZs4ObwMAyOzFKV5JzDuJkkm71M3zciJ2pzQkS_hx8OR4e9J30xbvoyZK6BjRRXAKK6DsxAtHYcr-m2mpgV2ARfh2_Flyil9nbGsIQapYtyIVzcDB9dullvGYmm0S-XVT9wxDr-N-Vk5x17_1r9VYIILVy8jkpgmeQUbfEj0LrdK6UQtxsoVWiZ2dnbJAVYMz9J7B73HaTugUqZu8xbj6TjxngUuwdEZhS9sAHCKM5PJXtbJPt7J99alnvlBaYjzQTrPCxz-wUrjcSjq_WM0osQwEDfAezV8uhKej_2QLnYbS33DLI4gdg0Z0NgDU9in-hYCPC0fI85-UFLEs9Xq_OL2rjYE3Au6Z-lrEvdijT3aigS7OQL9b29gcepRz6EWcYTt8TFowFPbS4JmPcCduxYPTHd3WU-MCBRz1704_Ip_5Vbyx8_etRufR2b2kwjg2qWTVAxqfsgygnqQr0mePzrgP8gCk9HtteJ9RGb7bdk8XcCvjyi9tZgUnxObO5_sSIGfh_lSg6YdGJdhYNX3iYb-F_xkaY7bXl1pIIainzwvxqYdgCVLD8_HaAjqmvtFF0pDppl-q9z66tvDYWs4qRGd86QpcXx__KNwJ_dntdinOnMuj5_Yi-gVK8fToTswy5BqP0lxuH-nlU7GsVHF-1eGxNxFzeOJHyElhOGudYrrJ68TrzauqhENPpFYhlwt3-DEK2QBCIAacflnlwExDg68s_tgV-4lKbZMUUBdzmCLJYX_-5BBF

Monaco Editor Playground Code

// Register a new language
monaco.languages.register({ id: "mySpecialLanguage" });

// Register a tokens provider for the language
monaco.languages.setMonarchTokensProvider("mySpecialLanguage", {
	tokenizer: {
		root: [
			[/\[error.*/, "custom-error"],
			[/\[notice.*/, "custom-notice"],
			[/\[info.*/, "custom-info"],
			[/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
		],
	},
});

// Define a new theme that contains only rules that match this language
monaco.editor.defineTheme("myCoolTheme", {
	base: "vs",
	inherit: false,
	rules: [
		{ token: "custom-info", foreground: "808080" },
		{ token: "custom-error", foreground: "ff0000", fontStyle: "bold" },
		{ token: "custom-notice", foreground: "FFA500" },
		{ token: "custom-date", foreground: "008800" },
	],
	colors: {
		"editor.foreground": "#000000",
	},
});

// Register a completion item provider for the new language
monaco.languages.registerCompletionItemProvider("mySpecialLanguage", {
	provideCompletionItems: (model, position) => {
		var word = model.getWordUntilPosition(position);
		var range = {
			startLineNumber: position.lineNumber,
			endLineNumber: position.lineNumber,
			startColumn: word.startColumn,
			endColumn: word.endColumn,
		};
		var suggestions = [
			{
				label: "simpleText",
				kind: monaco.languages.CompletionItemKind.Text,
				insertText: "simpleText",
				range: range,
			},
			{
				label: "testing",
				kind: monaco.languages.CompletionItemKind.Keyword,
				insertText: "testing(${1:condition})",
				insertTextRules:
					monaco.languages.CompletionItemInsertTextRule
						.InsertAsSnippet,
				range: range,
			},
			{
				label: "ifelse",
				kind: monaco.languages.CompletionItemKind.Snippet,
				insertText: [
					"if (${1:condition}) {",
					"\t$0",
					"} else {",
					"\t",
					"}",
				].join("\n"),
				insertTextRules:
					monaco.languages.CompletionItemInsertTextRule
						.InsertAsSnippet,
				documentation: {
					value: "<span style='color:#3794ff;'>Test suggestion</span>",
					supportHtml: true
				},
				range: range,
			},
		];
		return { suggestions: suggestions };
	},
});

monaco.editor.create(document.getElementById("container"), {
	theme: "myCoolTheme",
	language: "mySpecialLanguage",
});

Reproduction Steps

1. Open the playground with custom documentation with HTML code enabled playground
2. Open NVDA with speech viewer on
3. Open suggestion list by shortcut Ctrl+Space
4. Press Ctrl+Space to open suggestion item details
5. Move from and back to first item (ifelse) with suggestion documentation on to make NVDA read it. (There is bug about it Accessibility: NVDA does not read the suggestion details pane in the Monaco editor vscode#275851)

Actual (Problematic) Behavior

Screen reader reads the details with HTML elements

But if we click on details screen readers reads correct without any tags

Expected Behavior

The screen reader announces the content without HTML tags the same it does after click on it

Additional Context

Environment:

App: Monaco editor v.0.54.0
Browser: Google Chrome v.142.0.7444.61 (Official Build)
OS: Microsoft Windows 11 Enterprise v.0.0.22631 Build 22631
Screen reader NonVisual Desktop Access (NVDA) v.2025.3 (2025.3.0.52596)