Reading box not always highlighted

[Nancy-Salpepi]

Test device MacBook Air M1 chip

Operating System 11.4

Browser Safari 14.1.1

Problem description https://github.com/phetsims/qa/issues/676

When moving back and forth between reading blocks, either by using the keyboard nav or the mouse, the boxes aren't always highlighted.

Steps to reproduce

1. Click on the preference icon in the toolbar to open
2. Navigate to audio preferences
3. Hover over and then click the statement: Voice and highlight content as you interact.
4. Before the voicing finishes reading the statement in step 3, move to and click on another reading block.
5. The second block will not be highlighted when it is being read.

Visuals https://drive.google.com/file/d/1mq62lQB5Bjn-y68R2sC1CAEWTjSPX54Q/view?usp=sharing

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪John Travoltage‬ URL: https://phet-dev.colorado.edu/html/john-travoltage/1.6.0-rc.1/phet/john-travoltage_all_phet.html Version: 1.6.0-rc.1 2021-07-22 18:05:38 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Safari/605.1.15 Language: en-us Window: 1352x683 Pixel Ratio: 2/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 (1.0) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 31 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 8192x8192 OES_texture_float: true Dependencies JSON: {}

[jessegreenberg]

Reproduced on mac Safari, though I have not seen this on Windows yet. I will investigate.

[jessegreenberg]

Before the voicing finishes reading the statement in step 3, move to and click on another reading block.

I verified this is important, it seems that if you start a new utterance before the previous one stops speaking, we never get a new "start" event to trigger the new highlight.

[jessegreenberg]

I found that when I removed the cancel function from voicingManager I get all of the start and end events on Safari.

[jessegreenberg]

I found this bug report from 10 months ago, report of the same issue: https://developer.apple.com/forums/thread/660405

[jessegreenberg]

Workaroundsd listed in that issue are not working for me.

I think what we need to do is alert behind a timeout again, that solves all of the Safari problems. But do it on all platforms so it is consistent. We used to do this only on Safari but that caused inconsistencies that were tough to track down. Every time we speak, we add a listener to the timer that will requested speech synth to speak, and then remove that listener when it finishes. Whenever the queue is cleared, remove all listeners on the timer.

[jessegreenberg]

The timeout was removed in https://github.com/phetsims/john-travoltage/issues/408. It caused some alerts to spam when rapidly changing values because many alerts could be added to the back of the synth queue in the delay after the queue was cleared with cancel(). If all listeners added to the timeout are removed in cancel I think that problem will still be resolved.

[jessegreenberg]

After the above commit it is working much better for me in Safari. @Nancy-Salpepi would you mind testing again on master? Change was made to scenery so be sure to at least pull that repo on phettest before checking.

[Nancy-Salpepi]

Looks good in master! No issues.

[jessegreenberg]

Great, thanks! Ill move the change into the release branch.