Black rectangular outline of balloon's original position present when using VO + keyboard nav

[Nancy-Salpepi]

Test device Mac 11 (M1 chip)

Operating System 11.4

Browser safari 14.1.1

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

When using VO and keyboard nav, a black rectangular outline remains in the place where the balloon originated. VO will indicate that I am moving the balloon etc (see movie), but if I pause, it then says I'm on an empty movable.

Steps to reproduce

1. Tab into sim
2. Turn on VoiceOver
3. Tab over to the balloon and press the space bar
4. Move the balloon using the arrow keys or AWSD

Visuals

https://drive.google.com/file/d/1FUsm1O59Buq5dvUqF6LOXQflqKBpHpDb/view?usp=sharing

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Balloons and Static Electricity‬ URL: https://phet-dev.colorado.edu/html/balloons-and-static-electricity/1.5.0-dev.35/phet/balloons-and-static-electricity_all_phet.html Version: 1.5.0-dev.35 2021-08-06 21:46:41 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: 1440x683 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]

Thanks @Nancy-Salpepi -

This is related to interactive description so I will take a look at this one.

[jessegreenberg]

OK I understand this issue now. Thanks for reporting @Nancy-Salpepi. The black highlight that we see here is the highlight from VoiceOver itself, and it looks like it doesn't animate with moving components. In the following screenshot I am showing the actual HTML element representing the balloon in the PDOM and you can see that it is moving with the balloon but the VO highlight does not move.

There is nothing we can do about this, but I think it would be good for design to be aware that this will be the behavior in the published sim. @terracoda can you please review and comment or close?

[jessegreenberg]

The other part of this is the hint that VO does when the balloon is in its "draggable" state,

You are on an empty movable.

"Movable" is coming from the aria-roledescription, but no idea why it calls it "empty". @terracoda please let me know if this is worth taking time to investigate.

[terracoda]

The un-moving VO black highlight is a known issue. This VO highlight is an option that can be turned off. We could recommend turning it off when using our sims since having it on is a bit distracting AND we have taken the care to design our own focus highlights which are pretty bright and bold.

Re: "empty" I am noticing this "empty" business with Big Sur. Voice Over never said this before.

It sounds to me like Voice Over may not be seeing/accessing the accessible name properly. We have an open issue about this for the grab button, can't remember what repo. Could this be another instance of that problem?

On grab, screen readers including VO should say something like:

Yellow Balloon, grabbed, movable

These 3 strings might happen in a different order, but I think that is what we are supposed to hear.

@jessegreenberg, should we mention this in our other open issue?

[terracoda]

Won't fix VO's balck highlight.

[terracoda]

@jessegreenberg, I'll open a new issue about the "empty" business. Could you link that to the other related issue on this?

[jessegreenberg]

Sounds good, thanks @terracoda, closing this issue. See you in #525!