vscode: [Acc] Button tooltip doesn't show up on tab\

Does this issue occur when all extensions are disabled?: Yes

VS Code Version: 1.60.0 (user setup)
OS Version: Windows 10

Steps to Reproduce:

Navigate through VS Code Search tab and tab through all the buttons . ( refresh , clear search results , etc. ) ( Search tab is just an example I can see the same behavior in all buttons)

Expected : On the tab navigation to each of the button, the tooltip should be displayed. On escape the tooltip should be dismissed. Keyboard users will not know what is the use of the button through the icon for the button.

Actual : User cannot see the tooltip when they tab into a button. They can only see the tooltip when they hover over. Animation2

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 27 (23 by maintainers)

Commits related to this issue

Fixes #132344 Ensures some elements with tabindex=-1 have the title attribute (breadcrumbs and the editor title toolbar), allowing keyboard accessible tooltips — committed to r3m0t/vscode by r3m0t 8 months ago
Merge pull request #197965 from r3m0t/selfish-crawdad [Acc] Keyboard accessible tooltips- Fixes #132344 — committed to THIS-IS-NOT-A-BACKUP/vscode by meganrogge 7 months ago
start work on #132344 — committed to microsoft/vscode by meganrogge 7 months ago

Most upvoted comments

Ben has adopted the custom hover in our base widgets, so this may now be easier than before?

bpasero on Feb 16, 2024

@meganrogge I sent a draft PR and explained there in more detail what works and doesn’t work. (Tested on Windows 10)

r3m0t on Nov 10, 2023

Kai mentioned I should consider adding a delay like we have for mouse hovers here. I need to see if this is acceptable by accessibility standards.

meganrogge on Feb 29, 2024

@meganrogge the custom hovers are better for accessibility as they’re exposed to the screen reader. The eventual plan is to move to custom hovers throughout the workbench. Generally if the custom hover is being used a title should not be present.

Tyriar on Nov 27, 2023

Thanks, yeah, I run OSS to test, which should work, but doesn’t.

meganrogge on Nov 7, 2023

It can be done in one line due to a contribution by the Edge team to Chromium https://bugs.chromium.org/p/chromium/issues/detail?id=829352#c17

diff --git a/src/vs/platform/windows/electron-main/windows.ts b/src/vs/platform/windows/electron-main/windows.ts
index dd832b583fd..503879236c8 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
                },
~

However, loads of tooltips don’t show up, eg this toolbar (top right)-

Maybe because :focus is on an <a> element which inherits the title attribute from a parent element. This can be reproduced on https://vscode.dev as well.

r3m0t on Oct 28, 2023

@isidorn , Hey, I search to see if there is something already open but couldn’t find it. I hope it is not a duplicate.

setaskin on Sep 5, 2021