Jaws reads out incorrect values in scene summary

[KatieWoe]

Test device: Dell Laptop Operating System: Win 10 Browser: Chrome Problem description: For https://github.com/phetsims/QA/issues/219#event-1953042350 and https://github.com/phetsims/QA/issues/217 When the scene description first plays it reads out the initial values for all the sliders and then goes in to a bulleted list with those same values. If you manipulate those sliders and then prompt Jaws to read the scene description again it will read out the (now incorrect) values that the sim started with, then read a list with the actual values. Steps to reproduce:

1. Start Jaws and the sim in chrome
2. Listen to the scene description
3. Use keyboard nav (likely will work without) to change the sliders around
4. Click out of keyboard nav and use the arrow keys to listen to the full scene description again.

Screenshots: https://drive.google.com/file/d/1GgeMP0Nhgm7SZnTnZFrSWO02i-i79M1a/view?usp=sharing

Troubleshooting information (do not edit):

Name: ‪Resistance in a Wire‬ URL: https://phet-dev.colorado.edu/html/resistance-in-a-wire/1.6.0-rc.1/phet/resistance-in-a-wire_en_phet.html Version: 1.6.0-rc.1 2018-11-07 18:26:25 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36 Language: en-US Window: 1536x732 Pixel Ratio: 2.5/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {"assert":{"sha":"928741cf","branch":"HEAD"},"axon":{"sha":"ff00a0bb","branch":"HEAD"},"brand":{"sha":"1fd6682e","branch":"HEAD"},"chipper":{"sha":"fa2fbadf","branch":"HEAD"},"dot":{"sha":"bbbd8526","branch":"HEAD"},"joist":{"sha":"82521d0c","branch":"HEAD"},"kite":{"sha":"380cef53","branch":"HEAD"},"phet-core":{"sha":"1b90ac2f","branch":"HEAD"},"phet-io":{"sha":"38d7b161","branch":"HEAD"},"phet-io-wrapper-classroom-activity":{"sha":"246085c1","branch":"HEAD"},"phet-io-wrapper-hookes-law-energy":{"sha":"7479b0ec","branch":"HEAD"},"phet-io-wrapper-lab-book":{"sha":"c46f7839","branch":"HEAD"},"phet-io-wrappers":{"sha":"a6bc62ca","branch":"HEAD"},"phetcommon":{"sha":"cd63d89a","branch":"HEAD"},"query-string-machine":{"sha":"06ed6276","branch":"HEAD"},"resistance-in-a-wire":{"sha":"38ae25d0","branch":"HEAD"},"scenery":{"sha":"51716674","branch":"HEAD"},"scenery-phet":{"sha":"15dec251","branch":"HEAD"},"sherpa":{"sha":"2cd50500","branch":"HEAD"},"sun":{"sha":"5244d45e","branch":"HEAD"},"tambo":{"sha":"ad355580","branch":"HEAD"},"tandem":{"sha":"4f37a910","branch":"HEAD"}}

[jessegreenberg]

Reproduced, this is a weird bug. I verified that the old content is not in the a11y view or hidden in the HTML. I can't find any of this old list content in the Accessibility Tree inspector in Chrome dev tools.

[jessegreenberg]

It is reading all of the values as though they are not attached to a list. Then after it reads all of the initial values as though they are in a paragraph, it reads out the list items, indicating list role.

[jessegreenberg]

There is duplication on initial read too, it is just less jarring because the content is correct. My theory is that JAWS is reading the accessible name for the unordered list containing the list items, then reading out the list items individually. Accessible names for the list items are updating correctly, but accessible name for the entire list is not.

[jessegreenberg]

Adding these two lines in item.property.link in AccessibleSummaryNode fix the problem, probably because it forces Chrome to recalculate an accessible name in the a11y tree:

        listNode.tagName = null;
        listNode.tagName = 'ul';

EDIT: But ideally, it would be nice if we can prevent JAWS from reading the accessible name of the UL at all.

[jessegreenberg]

@terracoda do you know of a way to make it so that the ul of the scene summary in RIAW doesn't have an accessible name that gets read by the virtual cursor? Is it even a good idea to try this?

[terracoda]

What does JAWS read as the accessible name for the list? I wouldn't think that a list element, a <ul> tag would require an accessible name.

Is the problem occurring because the sliders are in a list?

In testing sonified sims, I have mentioned more than once that I think I am getting duplicate content, but then I haven't been able to consistently reproduce.

Could it have something to do with the iframe and the wrapper?

[terracoda]

@jessegreenberg, the sim sounds fine in VoiceOver. I cannot reproduce the issue with that screen reader.

When I inspect the PDOM I see an empty paragraph element with id="262-340-353-427-429" just after the description of the equation and and empty div element with id="262-340-353-443" just after the description of the wire.

I do not, however, see any duplicate or empty elements in the scene summary before the Play Area.

And maybe since this sim is for publication, there is no need for the wrapper and the iframe, as I do not hear or see any code for an iframe.

[terracoda]

@jessegreenberg, I do not understand this problem, should I ask a JAWS user to try it out?

[jessegreenberg]

The problem is that for the following list:

<ul tabindex="-1">
  <li tabindex="-1">resistance, <b>R</b>, is 0.667 ohms</li>
  <li tabindex="-1">resistivity, <b>rho</b>, is 0.50 ohm centimeters</li>
  <li tabindex="-1">length, <b>L</b>, is 10.00 centimeters</li>
  <li tabindex="-1">area, <b>A</b>, is 7.50 centimeters squared</li>
</ul>

In Chrome, JAWS reading from top to bottom reads it as "resistance R is 0.667 ohms, resistivity rho is 0.50 ohm centimeters, length L is 10.00 centimeters, area A is 7.50 centimeters squared. List with four items. Bullet, resistance R is 0.667 ohms. Bullet, resistivity rho is 0.50 ohm centimeters. Bullet, length L is 10.00 cm, bullet area A is 7.50 centimeters squared."

So it essentially reads the list twice.

[jessegreenberg]

Ah, when I remove tabindex="-1" from the ul the repetition goes away. tabindex="1" was added as a workaround because IE11 adds tabindex=0 to all HTML elements, even those that are not focusable.

[jessegreenberg]

Since we are moving toward supporting Chrome instead of FF, I think we need to stop using tabIndex=-1, I created https://github.com/phetsims/scenery/issues/893 to track this.

[terracoda]

Well, I certainly like removing tabindex=-1 from our code.

As browsers and AT all become more standards compliant, these sorts of work-arounds will be needed less and less.

The tabindex=-1 work-around, though useful, was kind of code invasive ;-)

Thanks for figuring this out @jessegreenberg.

[KatieWoe]

Update: This does also occur in the section that reads out after the equation when looking at the play area.

[KatieWoe]

@jessegreenberg I did see that when jaws was reading the keyboard nav dialog it read everything out twice in a similar manner, though of course nothing can change. Not sure if this is and issue, but logging here since it is connected.

[jessegreenberg]

Sounds good @terracoda thanks!

Thanks @KatieWoe that is really good to know. I expect it to be the same issue Ill check those cases too and see if they go away with https://github.com/phetsims/scenery/issues/893

[jessegreenberg]

This should be fixed in master and I believe it is fixed for all of the cases reported here. @KatieWoe can you please verify that this is fixed in master for the scene summary, the equation section, and the keyboard help dialog?

[KatieWoe]

Looks fixed but a new problem showed up. After reading the values of the slider it says something to the effect of min or mid (I can't quite tell) and then a large number with many decimals. https://drive.google.com/file/d/1qtZHB-EISWZvAN3Me9ZAFxso1f22H5B6/view?usp=sharing

[KatieWoe]

According to @jessegreenberg on Slack this is either a Jaws or a browser problem.

[terracoda]

@jessegreenberg, this might be a problem with accessible slider. I posted a bug about values not rounding properly in https://github.com/phetsims/gravity-force-lab/issues/118.

@KatieWoe, is it sounding like a small slider value, but given to the the 16th decimal place?

[jessegreenberg]

That is correct, this was found and reported in https://github.com/FreedomScientific/VFO-standards-support/issues/112, determined to be a JAWS or browser bug.

[jessegreenberg]

Hmm, thanks @terracoda I think it is a very similar but different issue. The video @KatieWoe posted shows JAWS reading the "min" attribute to many decimal places, and I verified the min attributes are rounded values. https://github.com/phetsims/gravity-force-lab/issues/118 shows a rounding problem with the aria-valuetext and seems more like an AccessibleSlider problem.

[terracoda]

@jessegreenberg the phetsims/gravity-force-lab#118 issue is not just a JAWS issue, so yes, not the same issue. It happens in VoiceOver as well.

[jessegreenberg]

OK, so once https://github.com/phetsims/scenery/issues/893 is reviewed, I will feel more comfortable about cherry picking the fix into the release branch. Reassigning to myself to track the scenery issue and then collaborate with @jbphet to pull the change into the release branch.

[jbphet]

@jessegreenberg - time to move this to the 1.6 release branch of RIAW if possible. Marking as high priority, let me know if I can help.

[jessegreenberg]

I cherry picked the commits into scenery's resistance-in-a-wire-1.6 branch. I tested in JAWS with Chrome and verified that this issue is fixed. Reassigning to @jbphet so he is aware that this is done.

[jbphet]

Thanks @jessegreenberg! This will be verified in the next RC test, unassigning for now.

[KatieWoe]

This seems to be fixed in 1.6.0-rc.2