From 53246b54112102c8c88c658d1703b82553bffe23 Mon Sep 17 00:00:00 2001
From: Tomer Chachamu <tomer.chachamu@gmail.com>
Date: Fri, 10 Nov 2023 21:18:47 +0000
Subject: [PATCH] Fixes #132344

Ensures some elements with tabindex=-1 have the title attribute (breadcrumbs and the editor title toolbar), allowing keyboard accessible tooltips
---
 src/vs/base/browser/ui/actionbar/actionViewItems.ts      | 9 ++++-----
 src/vs/platform/windows/electron-main/windows.ts         | 2 +-
 .../workbench/browser/parts/editor/breadcrumbsControl.ts | 3 +++
 .../codeEditor/browser/outline/documentSymbolsTree.ts    | 4 +++-
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/vs/base/browser/ui/actionbar/actionViewItems.ts b/src/vs/base/browser/ui/actionbar/actionViewItems.ts
index a317f1c1d3e35..acaa5ba4604b6 100644
--- a/src/vs/base/browser/ui/actionbar/actionViewItems.ts
+++ b/src/vs/base/browser/ui/actionbar/actionViewItems.ts
@@ -219,7 +219,7 @@ export class BaseActionViewItem extends Disposable implements IActionViewItem {
 			return;
 		}
 		const title = this.getTooltip() ?? '';
-		this.updateAriaLabel();
+		this.updateAriaLabel(title);
 		if (!this.options.hoverDelegate) {
 			this.element.title = title;
 		} else {
@@ -233,9 +233,8 @@ export class BaseActionViewItem extends Disposable implements IActionViewItem {
 		}
 	}
 
-	protected updateAriaLabel(): void {
+	protected updateAriaLabel(title: string): void {
 		if (this.element) {
-			const title = this.getTooltip() ?? '';
 			this.element.setAttribute('aria-label', title);
 		}
 	}
@@ -404,10 +403,10 @@ export class ActionViewItem extends BaseActionViewItem {
 		}
 	}
 
-	protected override updateAriaLabel(): void {
+	protected override updateAriaLabel(title: string): void {
 		if (this.label) {
-			const title = this.getTooltip() ?? '';
 			this.label.setAttribute('aria-label', title);
+			this.label.title = title;
 		}
 	}
 
diff --git a/src/vs/platform/windows/electron-main/windows.ts b/src/vs/platform/windows/electron-main/windows.ts
index dd832b583fd58..503879236c808 100644
--- a/src/vs/platform/windows/electron-main/windows.ts
+++ b/src/vs/platform/windows/electron-main/windows.ts
@@ -132,7 +132,7 @@ export function defaultBrowserWindowOptions(accessor: ServicesAccessor, windowSt
 			autoplayPolicy: 'user-gesture-required',
 			// Enable experimental css highlight api https://chromestatus.com/feature/5436441440026624
 			// Refs https://github.com/microsoft/vscode/issues/140098
-			enableBlinkFeatures: 'HighlightAPI',
+			enableBlinkFeatures: 'HighlightAPI, KeyboardAccessibleTooltip',
 			...overrides?.webPreferences,
 			sandbox: true
 		},
diff --git a/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts b/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts
index cf307fec7e5b4..b26cc8d7836fe 100644
--- a/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts
+++ b/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts
@@ -130,6 +130,9 @@ class FileItem extends BreadcrumbsItem {
 	render(container: HTMLElement): void {
 		// file/folder
 		const label = this._labels.create(container);
+		this._disposables.add(label.onDidRender(() => {
+			container.title = container.children[0]?.ariaLabel ?? '';
+		}));
 		label.setFile(this.element.uri, {
 			hidePath: true,
 			hideIcon: this.element.kind === FileKind.FOLDER || !this.options.showFileIcons,
diff --git a/src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts b/src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts
index e088be4a01b24..2fa2dc93297ec 100644
--- a/src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts
+++ b/src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts
@@ -134,12 +134,14 @@ export class DocumentSymbolRenderer implements ITreeRenderer<OutlineElement, Fuz
 	renderElement(node: ITreeNode<OutlineElement, FuzzyScore>, _index: number, template: DocumentSymbolTemplate): void {
 		const { element } = node;
 		const extraClasses = ['nowrap'];
+		const title = localize('title.template', "{0} ({1})", element.symbol.name, symbolKindNames[element.symbol.kind]);
 		const options: IIconLabelValueOptions = {
 			matches: createMatches(node.filterData),
 			labelEscapeNewLines: true,
 			extraClasses,
-			title: localize('title.template', "{0} ({1})", element.symbol.name, symbolKindNames[element.symbol.kind])
+			title
 		};
+		template.container.title = title;
 		if (this._configurationService.getValue(OutlineConfigKeys.icons)) {
 			// add styles for the icons
 			template.iconClass.className = '';