Balloon blocks reset and add wall buttons even though pointer areas do not indicate interference

[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/689

When the balloon overlaps part of the reset or add wall button, it is not possible to press them even though it appears the pointer is in the area for those buttons and not in the area for the balloon. I also noticed that in the published version, the balloon is behind those buttons in the sim (see screenshot).

Steps to reproduce

1. Place the balloon so that it overlaps some of the Reset button (I used the ?showPointerAreas query parameter in the gif) and then try to reset the sim.
2. Click the Remove Wall Button
3. Move the balloon so that it overlaps some of the Add Wall Button and try to click on that button

I didn't record with sound, but in both instances it made the same noise as when I click on the balloon--even though not in its pointer area.

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

In the published version, the balloon didn't interfere with the reset/add wall buttons:

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?showPointerAreas 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: {}

[Nancy-Salpepi]

When interactive highlights is turned on, I can now see that it is a rectangular area that is interactive. That is what blocks the ability to interact with the reset/add wall buttons.

[jessegreenberg]

It looks like we tried to fix this in https://github.com/phetsims/balloons-and-static-electricity/issues/281, after that issue I would not expect the balloon to be pickable outside of the eliptical shape but it currently is.

[jessegreenberg]

In #281 it was important that the Image Node for the BalloonNode not be pickable for the pointer areas to work correctly. But it was made pickable for https://github.com/phetsims/balloons-and-static-electricity/issues/456. Not seeing a reason why yet, just an issue reference.

[jessegreenberg]

I went ahead and made the balloonImageNode not pickable again. That should have no impact on accessibility with iOS VoiceOver (the reason for #456). We are not publishing this sim with iOS VoiceOver support, when we revisit that we can investigate if there is in fact a problem.

The pointer areas should correctly be the elliptical shape in your image @Nancy-Salpepi, can you please verify that is the case again? Then I think this can be closed.

[jessegreenberg]

Sorry, not ready yet. I noticed this change made it impossible to pick up the balloon with a keyboard...Checking.

[jessegreenberg]

It is because the GrabDragInteraction uses the balloonImageNode as the targetNode

    const grabDragInteraction = new GrabDragInteraction( balloonImageNode, this.keyboardDragHandler, {
      objectToGrabString: accessibleLabelString,
      dragCueNode: interactionCueNode,

But that node is not pickable.

[jessegreenberg]

The dragHandler is added to this (the BalloonNode), lets try to add the GrabDragInteraction to this as well.

[jessegreenberg]

OK, fixed in the above commit so that pickable: false doesn't interfere with keyboard dragging. @Nancy-Salpepi would you mind checking again?

[Nancy-Salpepi]

Works perfectly @jessegreenberg !!

[jessegreenberg]

Excellent, thanks @Nancy-Salpepi! Closing.