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)

[jdneo]

@isidorn You are right, I download NVDA and it works now!

[jdneo]

@jvesouza how about this one?
vscode-java-test-0.27.0.vsix.zip

[jvesouza]

I think that from the point of view of accessibility it was not very good.

• When pressing the enter key when the focus is on the method name, the detail view is displayed but I can only navigate it using the tab key.
• The detail view has a series of links but I cannot activate them with the enter key.
• If the detail view is being displayed, I need to press the tab key many times until I reach the next method.

If there is a quick way to jump from one method to another while the detail view is active, I think things get a lot better

[jdneo]

When pressing the enter key when the focus is on the method name, the detail view is displayed but I can only navigate it using the tab key.

Does arrow-up and arrow-down not work?

The detail view has a series of links but I cannot activate them with the enter key.

I can improve it by not preserve the focus when the link is triggered

If the detail view is being displayed, I need to press the tab key many times until I reach the next method.

So far I have no good solution for this, since there will be many links in the detail page. I'm looking for a way to skip all these links if it is possible. A workaround I can find is when the focus is in the detail view, use Page Up or Page Down to go the the first or last line. Then use Tab/Shift + Tab to switch the focus, but not convenient.

---

We can bind some special keyboard shortcut to help navigate from different test methods. But it may conflicts with other existing bindings.

[jvesouza]

When pressing the enter key when the focus is on the method name, the detail view is displayed but I can only navigate it using the tab key.

Does arrow-up and arrow-down not work?
No.

If the detail view is being displayed, I need to press the tab key many times until I reach the next method.

So far I have no good solution for this, since there will be many links in the detail page. I'm looking for a way to skip all these links if it is possible. A workaround I can find is when the focus is in the detail view, use Page Up or Page Down to go the the first or last line. Then use Tab/Shift + Tab to switch the focus, but not convenient.

Unfortunately pageUp and pageDown don't seem to produce any action in linux, at least in the distro I'm using.
Would it be possible to close the detail view by pressing the escape key? I think that would help a lot.

[jdneo]

@jvesouza That's also a great idea. But I'm not sure if the escape key will conflict with other shortcuts. For example, Esc may be used to stop screen reader?

[jvesouza]

Normally, to stop speech on the screen reader, the ctrl key is used.
I don't think we will have any problems using the escape key, but @isidorn may be the best person to comment on it.

[isidorn]

@jdneo feel free to use the Esc key. VS Code handles potential keyboard conflicts quite well based on focus and weight of contibuted commands. So in practice I think it will work just fine if you register the shortcut only when the focus is in the detail view (using a when clause).

[jdneo]

Thank you all for the suggestion!

@jvesouza please try this one. Now the test report view will listen to the ESC press event to collapse the detail view.
vscode-java-test-0.27.0.vsix.zip

[jvesouza]

@jdneo I think it was perfect.
I have just one more suggestion to make, if possible and relevant.

How about just displaying the navigation link to the source only within the detail view?
The advantage, at least in my opinion, is that if we have for example 20 methods, we will have to press the tab key 40 times to reach the last method. If the navigation link is not present, that number drops to 20.

[jdneo]

@jvesouza Thank you for your feedback!

How about just displaying the navigation link to the source only within the detail view?

Emm, This is not a decision that I can quickly make by now. Since there will be some users who might need this button display out of the detail view.

But at least, I will raise several PRs to improve the accessibility of the test report page to unblock the users based on our above discussion.

[jvesouza]

Okay, I understand perfectly. I figured the answer would be something like this.
Thank you very much.