Merge pull request #197965 from r3m0t/selfish-crawdad

[Acc] Keyboard accessible tooltips- Fixes #132344
microsoft · Nov 27, 2023 · a55ca03 · a55ca03
2 parents c6eb717 + 53246b5
commit a55ca03
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/src/vs/base/browser/ui/actionbar/actionViewItems.ts b/src/vs/base/browser/ui/actionbar/actionViewItems.ts
@@ -223,7 +223,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 {
@@ -237,9 +237,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);
 		}
 	}
@@ -407,10 +406,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
@@ -135,7 +135,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
@@ -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
@@ -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 = '';