Div with role checkbox not reading checked/unchecked on performing action

[sandeepnmenon]

Steps to reproduce:

Open following codepen : https://codepen.io/sandeepnmenon/pen/NWKOgYo
Tab till the check button in the header of the table.
Check/Uncheck using space button

Actual behavior:

NVDA not reading checked/unchecked

Expected behavior:

NVDA should read checked/unchecked

System configuration

NVDA version: 2019.2.1

Windows version: Windows 10

Name and version of other software in use when reproducing the issue:

React: 16.8.6
Office fabric: 7.60.0

Does the issue still occur after restarting your PC?: Yes

[Adriani90]

I am not able to reproduce this in NVDA alpha-19159,cde557d5.
Tested in Chrome 78 and Firefox 70. In which browser are you trying? In my case NVDA says "checked" and "not checked" when pressing space bar on the elements.
Please test with last alpha. You can download the alpha version here:
https://www.nvaccess.org/files/nvda/snapshots/

[sandeepnmenon]

I am trying in Chrome browser.
To be clear, NVDA does read checked/unchecked on the elements.
It is not reading the same only the for the select all button at the top left of the table.

As for the rows it is reading out "space" when pressing space.
I downloaded the NVDA alpha-19159,cde557d5 version and can reproduce the issue.
Please try to reproduce in the codepen shared in the issue

[Adriani90]

Ok I confirm I can reproduce this issue only for the checkbox "select all items" in Chrome as well as in Firefox: CC: @jcsteh.

[sandeepnmenon]

Ok I confirm I can reproduce this issue only for the checkbox "select all items" in Chrome as well as in Firefox: CC: @jcsteh.

@Adriani90 @jcsteh
Any update on this?

[jcsteh]

I can reproduce it, but I don't know for certain what's causing it. My hunch is that it has something to do with the fact that when you toggle that checkbox, it toggles the checkboxes for every other row on that page. Because there are a lot of rows, that is a *lot* of stateChange events. Perhaps they're being throttled somewhere, very likely NVDA (since handling too many events causes performance problems). If that's the case, I don't really know what can be done here.

[sandeepnmenon]

@jcsteh
Any update on this? Is it something that will be picked up for being fixed?

[Adriani90]

@sandeepnmenon see the comment from Jamie above.

[sandeepnmenon]

I can reproduce it, but I don't know for certain what's causing it. My hunch is that it has something to do with the fact that when you toggle that checkbox, it toggles the checkboxes for every other row on that page. Because there are a lot of rows, that is a lot of stateChange events. Perhaps they're being throttled somewhere, very likely NVDA (since handling too many events causes performance problems). If that's the case, I don't really know what can be done here.

So is that the case?

[sandeepnmenon]

@Adriani90 @jcsteh
Please mark the issue appropriately to convey if it is going to be fixed or not.

[Adriani90]

cc: @feerrenrut which priority would you assign to this one?

[feerrenrut]

There isn't a clear way to deal with this situation. I also expect it's possible for a web author to develop a work around, probably with an improved experience. For instance, I would prefer to hear 200 items checked, rather than just checked.

If we can verify that NVDA is indeed throwing away a flood of stateChange events. One possible solution worth prototyping is to see if we can determine that one of the stateChange events relates to the current focus, and keep that one.

In terms of priority, I think a P3. I don't expect that it is happening often, and it is possible to read the state after it has changed, and I suspect it's possible to work around this issue.

@sandeepnmenon We don't know for sure we can fix this, it will require investigation. It's severity means that is not going to jump in front of other work. Please don't rely on this being fixed in the short term.

[jcsteh]

If I'm right about events being dropped as per #10484 (comment), #11077 should fix this.

[jcsteh]

It seems I'm correct about events being dropped. I have a branch which drops events except those targeted at specific objects (the focus, etc.). With that change, this test case works as expected. This is still pretty experimental, though. I just thought it worth noting for anyone looking into this.

[LeonarddeR]

@sandeepnmenon it looks like the codepen has changed since your initial comment. Could you please restore it?

[LeonarddeR]

Dear @sandeepnmenon, another friendly reminder to restore the example in the initial message of this issue.

[sandeepnmenon]

@LeonarddeR Apologies for the late reply since I am not longer working on React accessibility. Unfortunately I was not able to setup NVDA in ubuntu.
As per the repro steps, the error occurs in the check/uncheck action of any select all checkbox in DetailsList React Component as in https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/basic
Apologies for not able to fix the codepen and find repro.
If not reproducing in action of select all checkbox of top left in DetailsList component, please close the issue.

[LeonarddeR]

No problem at all @sandeepnmenon, many thanks for responding again.
I can no longer reproduce it given your example from Microsoft in both Edge and Firefox, so I will close this as you suggested.