Links for errors and warnings on status bar are not correctly labelled for screen readers

[Neurrone]

• VSCode Version: Code - Insiders 1.20.0-insider (2bab83a, 2018-01-10T05:13:51.946Z)
• OS Version: Windows_NT x64 10.0.15063
• Extensions (4)

  Extension	Author (truncated)	Version
  vscode-markdownlint	Dav	0.12.1
  vscode-rust	kal	0.4.2
  rust	rus	0.3.2
  markdown-preview-enhanced	shd	0.3.2

Another relatively small thing.

Steps to Reproduce:

1. Go to the status bar of an open file with NVDA open.
2. You will hear something like:

content info landmark 
link master
link
link
link 0
link
link 0

The "link 0" appear to be indicating the number of errors/warnings. Expected it to read "0 warnings" or "0 errors", perhaps this could be done by aria-label?

Also, not sure if the links read out as just "link" are part of the errors/warning links that launch the problem window (somehow spanning multiple lines in virtual cursor) or if they are different.

[dbaeumer]

@isidorn is this on our list somewhere. Do we need to address it?

[isidorn]

@dbaeumer no this is not on the list, so you can adrress it when you want.

[Neurrone]

Is there a prioritized list of which to fix first? Would be curious to take a look.

[isidorn]

I actually prefer the accessiibility issues @Neurrone filled compared to our accessiblity testing team. So assigning this to October to investigate if something can be done here.
@Neurrone thanks for filling great issues

[Neurrone]

@isidorn Np, this is relatively minor. I'm currently using it at work for web development, and am filing what I've experienced. Appreciate the great work you guys are doing :).

[isidorn]

This seems like low hanging fruit to me.
@alexr00 would you like to look into this?
If you do not have time let me know and I can assign myself.

[alexr00]

I talked with @isidorn about this and it looks like this is a status bar problem. None of the items in the status bar are able to be tabbed to and get focus. This was deliberate since the status bar doesn't have new information and it would just be more things to be tabbed through. If we add an aria-label for each status bar item and allow them to be tabbed too, then the label will get read out when the item is clicked or tabbed too.

@Neurrone is tabbing through the status bar something that would be useful?

@bpasero for status bar.

[bpasero]

Yeah I am not sure what else to say here. If we want to fix this issue by adding tabindex to status bar entries we risk making a lot of people upset that you now need to tab 20 more times around the UI to reach an element of choice (provided that is the only way how to fix this).

[isidorn]

@alexr00 can you please experiment with setting the tabindex=-1 to the statusbar items.
This basically means that those items should not be tabable, but can be focusable. This might be what we are looking for.
More details here https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

[alexr00]

Adding tabindex=-1 causes the title of the element to be narrated when the status bar item is clicked. It also still keeps it from getting tabbed to. This would probably be good to add to all status bar entries.

This still doesn't provide a narration when hovering over the element. @Neurrone is narration on hover useful?

[isidorn]

@alexr00 my guess would be that narattion on hover is useful, for helping with mouse navigation.
So it seems that tabindex=-1 is better then the current state. So I would go with that approach.
But let's wait for @Neurrone feedback.

[Neurrone]

1. Having the aria-label set would be useful regardless of which approach we go for.
2. Regarding this being focusable, the main use I have for clicking these is to expand / collapse or move focus to the problems or notifications pane. I usually activate these by using the screen reader's virtual buffer, which is able to simulate clicks if its able to find an element, so didn't realize that it isn't reachable via tab navigation. Since the issue's scope is just for labels not being read and this might cause other issues, I suggest we defer changing tabIndex, until we get more feedback about making it tabbable being useful.
3. I don't use the mouse much, so wouldn't be able to judge how useful hover would be.

[isidorn]

@Neurrone Thanks for feedback.
@alexr00 @bpasero So I suggest to go with tabindex=-1 for all status bar items. This will not make them reachable via tab navigation, but will make NVDA read out it's title as if it were an aria-label.

[bpasero]

Fine by me.

[alexr00]

To verify, start a screen reader then click on the errors, warnings, and infos entry in the status bar. It should read something like "link No Problems" or "link 1 Problems".

[isidorn]

@alexr00 it is cool that we added the tabindex, but could we try to get rid of reading "link" as a prefix. Could you try to add an aria-label which would just be "No Problems" for example, would that change the screen reader behavior to not read "link"?
Basically itemContainer ariaLabel = name

[alexr00]

@isidorn if I do that then it just reads it twice. Once as "No Problems" then again with "link No Problems". I'm going to leave it without the aria-label for now.

[isidorn]

Thanks for trying it out. Yeah that is due to this NVDA issue nvaccess/nvda#7841