Incorrect pointer areas for horizontal AquaRadioButtonGroup

[pixelzoom]

As reported in phetsims/beers-law-lab#317, the pointer areas for a horizontal AquaRadioButtonGroup are currently incorrect. For example, we have this group with spacing: 60 (see SoluteFormRadioButtonGroup.ts):

The relevant code in AquaRadioButtonGroup.ts is:

      // set pointer areas - update them when the localBounds change
      radioButton.localBoundsProperty.link( localBounds => {
        if ( options.orientation === 'vertical' ) {
          radioButton.mouseArea = localBounds.dilatedXY( options.mouseAreaXDilation, options.spacing / 2 );
          radioButton.touchArea = localBounds.dilatedXY( options.touchAreaXDilation, options.spacing / 2 );
        }
        else {
          radioButton.mouseArea = localBounds.dilatedXY( options.spacing / 2, options.mouseAreaYDilation );
          radioButton.touchArea = localBounds.dilatedXY( options.spacing / 2, options.touchAreaYDilation );
        }
      } );

For vertial orientation, it's OK to fill the vertical space between buttons with pointer area by including options.spacing in the computation. But for horizontal orientation, that's not OK, and results in exactly this kind of problem.

The solution is to rewrite the else block above like this:

        else {
          radioButton.mouseArea = localBounds.dilatedXY( options.mouseAreaXDilation, options.mouseAreaYDilation );
          radioButton.touchArea = localBounds.dilatedXY( options.touchAreaXDilation, options.touchAreaYDilation );
        }

... which in our example will result in:

[pixelzoom]

Looks like I was the original author of the code in questions. So I'm going to approve and close.