Split Views are confusing for screen reader users

[ndarilek]

I've encountered many of these Split Views, and only today discovered how to use them. An example of some of the mistakes I've made:

• I installed the Gradle Tasks extension, which places all discovered tasks under one of these views. Because I didn't know they were collapsed/collapsable, I thought that no tasks were being discovered and gave feedback on an extension issue. Today I discovered that tasks are found just fine. I just didn't know that I had to expand this widget to see them.
• When developing in a container, I was confused about how to install local extensions. There is a button to install multiple extensions at once, but I thought that the Split View was just an empty widget that didn't display local extensions since I was already connected to my container. Now I see how to expand them, and how to access the various widget trees.
• I wasn't sure how to interact with the timeline. Likewise with the outline, and many other views whose functionality I only activated via "focus on X" commands. Previously I discovered these widgets by tabbing, but they only seemed to be populated if I used the specific commands to focus them.

Here are some areas I struggled with:

• No indication is made that these areas are expandable. As is, "Folders section toolbar" sounds like a toolbar for the Folders section, and since right-arrow doesn't move me between buttons in the folders section, I assumed the toolbar was empty.
• But right-arrow does actually expand this item, so suddenly buttons appear in the tab order. Because no state change is announced, I didn't connect the buttons' appearance to my use of right-arrow.

Suggestions:

• "Folders toolbar section" sounds a bit better to me. This implies that I'm on a section of the toolbar, rather than on an empty toolbar for the folders section of the interface.
• I'm not familiar with "section toolbar" or "toolbar section" as a widget. "Folders: section toolbar" is at least clearer in that it separates the specific name from the type. I don't necessarily need this for "Submit new issue pushbutton" because I know what a button is.
• Please communicate collapsable and collapsed state for these widgets.

Thanks.

[isidorn]

@ndarilek great feedback. So taking from your description we have two issues:

• Split view header collapse state is not being read (even though we nicely set aria-expanded)
• Split view header role might not be correct (we use toolbar)
• "Folders section" is our aria label and "toolbar" is announced because we use the role toolbar. Thus the "Folder section toolbar" is read. We might add some text to make users aware how to expand, navigate into.

So some questions:

• What is the correct role to be used for the view header. We use the 'toolbar' role since there might be actions in there
• Why do screen readers not respect the aria-expanded property

@MarcoZehe for role smartness
@joanmarie @joaomoreno

[MarcoZehe]

A toolbar is a container, not an actionable widget itself. So, aria-expanded does not work on such things, it only works on interactive widgets.

What we have here, although I have never encountered one myself yet, is probably a menu button. A button that expands with menu options to select from. MS Office might call these split buttons. But split buttons are such an inconsistent beast in Windows that ARIA never adopted them.

[webczat]

actually I am not quite sure if it is not announced. I don't use nvda/windows generally, but I remember running vscode for a while on windows and I am not sure if nvda didn't actually read the expanded/collapsed status. It would be interesting to see what the other screenreaders like jaws/voice over do there.

[isidorn]

Both NVDA and VoiceOver do not announce "expanded", so it is exactly as @MarcoZehe says, aria-expanded does not work on the toolbar. We should use a different role.

To give more clarity what the split view header is: it has a title and potentialy some actions, it can be expanded and if it is expanded beneath it is usualy content like a whole tree.

So take Explorer as an example in it's header section is the title (Explorer: My Folder) some actions to create new files, refresh and once you expand the header you have the tree to navigate over your files.

[isidorn]

I just tried "menu", "menubutton", "menubar" and for all of those VoiceOver does not announce the expanded state.

We could add the expanded state to the ariaLabel of the header section but that feels wrong. So we shuold try to find a role for which aria-expanded will be respected.

[ndarilek]

Maybe something like this Bootstrap example? https://getbootstrap.com/docs/4.4/components/collapse/ I know VSCode doesn't use Bootstrap or its JavaScript, but you see under the first example a row of collapsable buttons which, when expanded, inject a new section below them. Maybe use that markup as a guide? A row of collapsable buttons, with sections appearing below them, would certainly be more clear IMO.

[isidorn]

@ndarilek thanks for that example, but voiceover does not correctly read the expand state also in that case. And they use the role button which when used in vscode does not really help. At least for VoiceOver. Now I will try Orca...

[ndarilek]

As much as I hate to say it, this may not be fixable in all screen readers. I don't necessarily know if my example correctly follows standards, but it works under Orca, and I've got code deployed using Bootstrap's collapsables which works under Windows as well. Our push should probably be toward following the standard and encouraging non-compliant screen readers to get with the program.

[joanmarie]

@isidorn: While I'm getting accustomed to VSCode thanks to all this work we're doing, without specific steps to reproduce a problem, I don't know where in VSCode to be looking. Numbered lists with super concrete steps (like José provides us) work best for me.

@ndarilek: You filed this issue. 😁 Can I please have some José-style steps to take a look? Thanks!!

[MarcoZehe]

If the example doesn‘t work in Chrome with VoiceOver, try Safari. If that works, it‘s very likely a bug in Chromium.

[isidorn]

Ok, actually Orca behaves great when we put role=button so that might be the way to go here.

@joanmarie sorry! I should have distilled into nice steps. Here they are

1. Open explorer view (ctrl + shift + E)
2. Make sure to have some useless view shown but collapsed like the Open Editors view
3. Use shift + tab from the explorer to focus onto the Open Editors title
4. Orca read "Open Editors section toolbar". Does not read if it is collapsed or not

[isidorn]

@MarcoZehe also does not work with Safari. So smells like a VoiceOver bug.
@joanmarie what was the link to file VoiceOver bugs?

I will now check if the role=button works fine with NVDA and if it does will just push the change in VSCode.

[ndarilek]

It's kind of hard to provide a reproduction here, because it varies widely based on which extensions you have installed, what your context is, etc. For instance, I just opened an empty VSCode window and don't see these widgets anywhere. I can tell you that opening a GitHub project with the GitHub extension installed may or may not show one of these views for pull requests, but I'm learning to use VSCode too so don't always know how to trigger them. But I think we're on the right track in that these views shouldn't be toolbars, and the markup used for them should probably be that linked to from my previous comment. And if someone with more VSCode experience can provide a reproduction that doesn't involve you installing such-and-such extension and opening such-and-such project, I'll defer to them. :) Not sure how to arrive at one of these views otherwise.

[isidorn]

Ok, putting role=button also works on NVDA. So it feels like the way to go here.
@joanmarie I will just push the change. So if you did not setup repro steps, no worries since Orca is doing everything proper.

@ndarilek you can try out vscode insiders from tomorrow which will have my fix and you can let us know if it is good for you know. Or if we should furter fine tune the aria label. Now the collapsed state will be read.

[ndarilek]

Nifty, thanks, I'll install tomorrow and report back here one way or the other.

[joanmarie]

@joanmarie what was the link to file VoiceOver bugs?

I honestly don't know where to file VoiceOver bugs. Perhaps @cookiecrook from Apple Accessibility could let us know?

The link I provided before was when something is potentially a Safari/WebKit accessibility bug: https://bugs.webkit.org/enter_bug.cgi. If we discover a Chromium and WebKit bug in macOS, then the WebKit bug can be fixed by Apple Accessibility folks -- and we can see the corresponding change needed in Chromium for VSCode. On the other hand, if the problem is strictly in VoiceOver, those same Apple folks can direct it to the right source within Apple.

[isidorn]

Thanks, I will file an issue there.

[isidorn]

https://bugs.webkit.org/show_bug.cgi?id=210934

[webczat]

wondering if button is a good role for this, as in... button associates with pressing it with a space. but... not sure what other roles can be used here

[isidorn]

@webczat no other role would have the expanded state read out. And also the headers can be expanded collapsed via space. So I think we are good.

[ndarilek]

Just got code-insiders and this looks great! Thanks for such a quick fix!

[webczat]

if they can, that's okay for me.

[isidorn]

Great, thanks for letting me know. Adding verified label.