Focus order is not logical after a webview panel is blurred when using keyboard navigation.

[miniwangdali]

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

• VS Code Version: 1.85.2
• OS Version: Windows 11 Enterprise (Windows_NT x64 10.0.22631.3007)

Version: 1.85.2 (user setup)
Commit: 8b3775030ed1a69b13e4f4c628c612102e30a681
Date: 2024-01-18T06:40:10.514Z
Electron: 25.9.7
ElectronBuildId: 26354273
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Windows_NT x64 10.0.22631

Description We are building a VS Code extension. We have a webview panel opened as some preview mechanism in the editor section. During the accessibility test, the testers reported the focus order is not logical when they move focus into the webview. We have made some corresponding change to mitigate the problem. But there is still a logic problem on where the focus should move to after blurring the webview panel in editor section.

After the webview panel in editor section is blurred, the focus moves to "Go back" button in the menu bar at the top instead of going to the output/terminal section below the editor section.

I found a similar problem reported in VS Code: https://github.com/microsoft/vscode/issues/166768 I see in the issue a comment said

there is a valid way to navigate through the workbench (including WebViews) in the expected way by using the workbench.action.focusNextPart and workbench.action.focusPreviousPart commands.

If that is possible, how can I leverage these two commands to control the keyboard navigation? I think it's possible for us to move the focus to the output section. But after that, the focus order will go back to the editor if you keep hitting tab. Then the user will stuck in a loop of output section -> statusbar -> editor section(our webview panel). Another problem is we don't have control when the focus is moved to previous one when it is in the editor section since the focus can be on the tab or the actions of this tab. Ideally, the focus order should be navigated naturally.

Is there a solution to this problem?

Actual behavior: Focus moves to status bar when Shift + Tab is pressed. Red arrow is where the focus moves to when Tab is pressed.

Expected behavior: Blue arrow is where I think the focus should move to when Shift + Tab is pressed. Orange arrow is where I think the focus should move to when Tab is pressed.

Please see below video as a reference:

https://github.com/microsoft/vscode/assets/5415452/a59cf4a6-d1ff-4033-b3a1-89d4d635b53a

[kupatkar99]

A11yMAS; #A11yTCS; #DesktopApp; #Win32; #Visual Studio Code Client; #BM-VisualStudioCodeClient-Win32-Aug2023; #WCAG2.4.3; #Focus Order; #A11ySev2;

[isidorn]

This is a known limiation of a webview that we can not control the content inside it and how focus moves. I suggest to file this issue against an extension that contributes this webview, so they can try to do focus hacks to solve this issue. Thank you

[miniwangdali]

We own the extension. What focus hack should we use to move the focus correctly to a section outside the webview? Do we need to cover every key combination and scenario that can move a focus in/out the webview? I remember there are internal commands workbench.action.focusNextPart and workbench.action.focusPreviousPart. Is there a clear example on how to use those commands correctly? I remember I tried these two commands but they moved the focus to some invisible place. Also, it's not only about the problem when focus move out of the webview. It's also a problem when focus should move into the webview but it jumps to another section. How does extension control that scenario?