Improve the accessibility for the test report page

[jvesouza]

I can navigate the java test reports using the keyboard but I cannot activate the link that seems to lead to the test source using the enter key.
This is a big problem for those who cannot use the mouse.

cc: @isidorn

[jdneo]

@jvesouza

I found that it may have some issue with the tab order, but the shortcut for Navigate to Source is working on my side when I use the Enter key. Would you mind to tell us what you can hear when you use the test report page?

Also attached a video in case @isidorn has input for this :)

demo.mp4

[jvesouza]

After running the tests I perform the following steps:

• I press ctrl + shift + p and type report.
• I use the arrows until I find Java: Show Test Report.
• I press the enter key.
• I use the tab key to explore the report view.

The following items are read by orca, the screen reader used by me, each time I press the tab key:

• All3 page tab.
• Passed3 page tab.
• Relaunch the tests push button.
• navigate to source link.

At this point I try to activate the link by pressing the tab key but nothing happens.

[jdneo]

How about pressing 'enter' instead of 'tab' when you hear 'navigate to source link'?

[jvesouza]

OOPS!!!

I made a mistake in my previous comment. I actually tried to activate the link by pressing the enter key and not the tab key.
The correct text is:
At this point I try to activate the link by pressing the enter key but nothing happens.

Sorry for my mistake.

[isidorn]

@jvesouza thanks for providing great feedback

@jdneo so this looks like a custom web view created by the java-test extension. Some recommendation:

• consider setting more user friendly aria labels for the buttons in the web view
• Note that José is using Linux with Orca. Let me know if you want to setup Orca on Linux if you would like to try to repro this (should not be more than 15mins if you already have a Linux machine or a VM)
• Pass focus to editor once the Show Test Report is triggered (maybe you already do but I do not see this in the video)

[jdneo]

@isidorn Thank you for the suggestions, I guess it may related with the focus.

@jvesouza I guess I know what's happening there.

If it is possible, would you mind to update the VS Code setting: java.test.report.position to currentView (the character V is upper case, and other characters are all lower case). And then try it again?

by default, the test report is opened in the next column, and when triggering navigate to source, the focus is preserved, so the editor is opened but not get the focus. By setting java.test.report.position to currentView, the opened source editor is in the same column as the test report and it will grab the focus.

Anyway, updating the setting is just a workaround, I will meanwhile check the implementation to see if we can set preserveFocus to false

Hope this is the root cause, please let me know if this works.

[jvesouza]

I included in the settings.json file the following line:
"java.test.report.position":"currentView"

After that I got the following result:

• When I press the enter key on a link nothing seems to happen. The orca doesn't read anything.
• If I press the tab key, nothing is read by the orca.
• If I press the f6 key, the focus is moved to the test class, apparently to the test method.

I can't say for sure if the method is correct because when I used the tab key I just heard it navigate to the source, without mentioning the name of the test method.

[jdneo]

Thanks for the feedback. I'll try to add more friendly aria labels tomorrow.

How about after that, I give a private build to you for validation. You can let me know if anything is missing or unclear?

[jvesouza]

I will certainly test as many times as necessary. I am very interested in making VScode accessibility the best possible. Here in Brazil we have several blind people who use this tool and the better the accessibility the more productive we will be.
Thanks.

[jdneo]

@jvesouza I added some aria-labels into the test report page, it still have some problems but you can have a try first. Here is private build:
vscode-java-test-0.27.0.vsix.zip

Same as before, it's a zip file, after unzip it, you'll find the .vsix file.

The problem I cannot solve now is that the test report uses the collapsible accordion component from Bootstrap to show the execution details for each method. Though I have added the aria related attributes but the Narrator still cannot tell the current state (whether it is collapsed or expanded).

@isidorn
I also find that the with the same snippet, Narrator can telling the collapse state in my Edge browser, but when I put the code into the VS Code webview, Narrator keeps silent when I press enter to change the collapse state of the component.

Here is the step to reproduce it:

1. Clone the code here: https://github.com/jdneo/vscode-extension-samples/tree/jdneo/test-webview/webview-sample
2. After setup the code, run it and open the webview through the command Cat Coding: Start cat coding session.
3. The webview content is the same as https://getbootstrap.com/docs/4.6/components/collapse/#accordion-example, so you can check the different behavior between browser and VS Code.

@isidorn I'm not sure if it's related with Electron? Please let me know if I need to file an issue at VS Code repo.

Thanks.

[jvesouza]

It was excellent.
Now when I press the enter key when the focus is on navigating to the source, the class is opened and the focus is moved to the beginning of the method.

When I press the enter key in the method details, the orca reads expanded or collapsed depending on the current state. However, no other information is read.

[jdneo]

@jvesouza I think maybe I can add some tab-index for the detail part, then you can tab the focus when the component is expanded.

So next I'll do some change to make the detailed information in the expanded area can be read by the screen reader.

For those passed tests, there is no more information in that expanded area.

For those failed tests, you can find stackstrace inside that. Should the tab get the focus of the entire stacktrace or each tab switch to the next line of the stacktrace?

[jvesouza]

If it is possible to navigate the stack trace using the arrows, I prefer to have access to the entire stack trace instead of accessing one line at a time with the tab key.

[isidorn]

@jdneo that sounds related to Electron. Though we recommend testing using NVDA screen reader, since it is free, open source and the most popular. So we actually do not test with Narrator (mostly based on community feedback)