Incorrect Keyboard Focus Order in "AIGC-Test Extension" Window: A11y_Visual Studio Code_AIGC Window_FocusOrder

[ManishaC1]

[Check out Accessibility Insights!]- Identify accessibility bugs before check-in and make bug fixing faster and easier.

GitHubTags:

#A11yTCS; #A11ySev2; #DesktopApp; #Win32; #Visual Studio Code Client; #BM-VisualStudioCodeClient-Win32-Aug2023; #WCAG2.4.3; #FocusOrder; #AILimited; #WWL:Bug1643902; #A11yMAS;

Environment and OS details:

Version: 1.85.0-insider (user setup)
Commit: b3a649f
Date: 2023-11-15T09:43:13.091Z
Electron: 25.9.4
ElectronBuildId: 25127168
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Windows_NT x64 10.0.22621

Windows 11 22H2(OS Build 22621.2821)

Pre-requisites:

Here are the steps for using the AIGC extension in VS Code from scratch:

1. Download and install the latest version of VS Code from the official website: https://code.visualstudio.com/download.

• Choose the right version to match your OS and select the standalone installer.

• Once downloaded, double click the installer to install VS Code with default settings.

2. Download and install Git from the official website: https://git-scm.com/downloads.

• Choose the right version to match your OS and select the default settings during installation.

3. Open VS Code by searching for it in the Windows start menu.

4. Clone the repository from Azure DevOps .

• Switch to Source Control, click on Clone repository, paste the Repo URL(https://microsoftdigitallearning.visualstudio.com/DefaultCollection/Courseware/_git/LP_Sample_Qijie-Test), choose a local folder to store the content, and wait for the cloning process to complete.

• Click Open in New Window and select "Yes, I trust the authors" in the pop-up window.

5. Install the AIGC extension for VS Code.

• Download the AIGC extension file ( AIGC-Test-0.0.46.vsix), select Extensions in VS Code, click three dots, select "Install from VSIX...", navigate to the extension file, select it, and click Install.

• The AIGC-Test icon should appear in the Installed extension list.

6. Click on the AIGC extension icon in the left side of VS Code to open the AIGC window.

• To move it to the right side, select View, click on Appearance, select "Secondary Side Bar", and drag the AIGC icon to the right side.

7. Open a markdown file under the includes folder, select the entire text, right click, and select "AIGC: Generate Knowledge check".

• In the AIGC window, verify the prompt is automatically selected as "Design knowledge check questions on ", type a number in "Number of Questions", and click the Send icon.

• Wait for the AIGC response with two knowledge check questions.

• To insert the generated content to your file, put the cursor at the end of the content, click Insert in the AIGC window, and verify that the two questions are appended to the content.

Repro Steps:

1. Launch Visual Studio
2. Install AIGC-Test Extension.
3. Tab within the AIGC-Test Extension section, check whether focus order is logical.

Actual Result:

Keyboard Focus Order within "AIGC-Test Extension" window is not correct. When the focus is on the "Close" button and the enter key is pressed, the focus shifts to the "Status bar" located outside of the extension window. And with the next Tab key is pressed, the focus moves onto the prompt within the extension.

Expected Result:

Upon pressing the enter key while the focus is on the "Close" button, the keyboard focus should remain within the confines of the extension window.
Close button-->Clear chat button-->Insert button-->Edit section

Attachment:

Visual Studio Code_Incorrect focus Order.zip

[ManishaC1]

WWL Bug link-->https://dev.azure.com/worldwidelearning/WWL%20Accessibility/_workitems/edit/1643902

[meganrogge]

I am not sure what you mean. Can you please provide a gif?

[vscodenpa]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!

[ManishaC1]

@meganrogge
Please activate the bug.

I have attached a gif capturing incorrect focus order using NVDA screen reader. Without screen reader it would be hard to understand about the whereabouts of the focus order. Additionally, I've included another detailed video addressing the issue.
Observed focus order: close button-->status bar present outside of chat window-->edit section present within chat section.
Expected focus order: close button-->clear chat button-->Insert button-->edit section.

Recording-20240109_202230.mp4

[meganrogge]

when I follow your repro steps, I get an error so cannot continue. Furthermore, this seems like a niche edge case. Could you pls provide repro steps that demonstrate a more general/ easier to hit issue? Thanks.

Also cc @isidorn in case i'm misunderstanding