Add "display mode" to ComboBox

[pixelzoom]

1/17/19 phet-io meeting, requested by @kathy-phet:

Add {BooleanProperty} singleItemDisplayProperty, default false. Hides the arrow and vertical separator on the ComboBoxButton, and set's pickable: false on the ComboBox.

[pixelzoom]

This will involve instrumenting ComboBoxButton, which is currently not implemented.

[pixelzoom]

Implemented in the above commits.

While implementing this, I decided that displayOnlyProperty was a better name. Here it is in ComboBoxButton:

      this.displayOnlyProperty = new BooleanProperty( false, {
        tandem: options.tandem.createTandem( 'displayOnlyProperty' ),
        phetioDocumentation: 'disables interaction with the ComboBox and makes it appear like value display'
      } );

Here's how it looks in Studio with Beer's Law Lab. First with false (the normal state):

Here's how it looks where set to true. The arrow and vertical separator are hidden, and the combo box is not interactive.

@ariel-phet please assigning someone to review.

[pixelzoom]

phetioDocumentation was revised to:

phetioDocumentation: 'disables interaction with the ComboBox button ' +
                     'and makes it appear like a display that shows the current selection'

[samreid]

@chrisklus and I reviewed and it looks great, we made minor modifications above. Back to @pixelzoom to sign off on the minor changes. Close if all is well.

[pixelzoom]

👍

@samreid FYI, it looks like a bunch of commit above are for some other issue with title "Remove whitespace from tandem strings". Up to you whether to tag those commits with the correct issue number.

Closing.

[pixelzoom]

Reopening. I think this Property may be misplaced. It should probably be a Property of ComboBox, not ComboBoxButton. And in addition to changing the look of ComboBoxButton, it should hide the listBox.

@samreid your opinion?

[zepumph]

Over in #914, @samreid and I realized that this "displayOnly" characteristic was not implemented with respect to the PDOM.

[samreid]

I believe this patch is all we need:

Subject: [PATCH] Update range for TEMPERATURE_CELSIUS_LATITUDE, see https://github.com/phetsims/least-squares-regression/issues/92
---
Index: js/ComboBox.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/ComboBox.ts b/js/ComboBox.ts
--- a/js/ComboBox.ts	(revision 46abda161799f96f2d7c6c0c25daab94b138f973)
+++ b/js/ComboBox.ts	(date 1734987456575)
@@ -458,6 +458,12 @@
 
     // support for binder documentation, stripped out in builds and only runs when ?binder is specified
     assert && window.phet?.chipper?.queryParameters?.binder && InstanceRegistry.registerDataURL( 'sun', 'ComboBox', this );
+
+    // TODO: Remove this test harness, see https://github.com/phetsims/sun/issues/451
+    // eslint-disable-next-line phet/bad-sim-text
+    setInterval( () => {
+      this.displayOnlyProperty.value = !this.displayOnlyProperty.value;
+    }, 5000 );
   }
 
   public override dispose(): void {
Index: js/ComboBoxButton.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/ComboBoxButton.ts b/js/ComboBoxButton.ts
--- a/js/ComboBoxButton.ts	(revision 46abda161799f96f2d7c6c0c25daab94b138f973)
+++ b/js/ComboBoxButton.ts	(date 1734987428631)
@@ -313,11 +313,12 @@
   /**
    * Sets the button to look like a value display instead of a combo box button.
    * See https://github.com/phetsims/sun/issues/451
-   * TODO: What does the PDOM look like when set to displayOnly? https://github.com/phetsims/sun/issues/451
    */
   public setDisplayOnly( displayOnly: boolean ): void {
     this.arrow.visible = !displayOnly;
     this.separatorLine.visible = !displayOnly;
+
+    this.tagName = displayOnly ? 'p' : 'button';
   }
 
   /**

Note this patch has a test harness in it, you can launch in http://localhost/center-and-variability/center-and-variability_a11y_view.html?brand=phet&ea&debugger, open the preferences => Simulation, and see the a11y view change from button to p.

@zepumph does this look right to you? Anything else for this issue? If you commit, please remove the test harness tagged for removal with a TODO.

[samreid]

UPDATE: Please see further investigation in #617 (comment)

[zepumph]

I got to a commit point. I was able to test that this sounds good for nvda, and that studio correctly behaves when toggling displayOnly mode.

Here is the test code I used at the bottom of the ComboBox constructor:

    const oldX = window.x;
    window.x = () => {
      oldX && oldX();
      this.displayOnlyProperty.value = !this.displayOnlyProperty.value
    };

[samreid]

I reviewed the commit and it looks good to go, closing.

[zepumph]

I see this assertion in Buoyancy phet-io fuzzing that is likely from this:

buoyancy-basics : phet-io-fuzz : unbuilt
URL: http://128.138.93.172/continuous-testing/ct-snapshots/1736251271603/buoyancy-basics/buoyancy-basics_en.html?continuousTest=%7B%22test%22%3A%5B%22buoyancy-basics%22%2C%22phet-io-fuzz%22%2C%22unbuilt%22%5D%2C%22snapshotName%22%3A%22snapshot-1736251271603%22%2C%22timestamp%22%3A1736255646199%7D&ea&brand=phet-io&phetioStandalone&fuzz&phetioLogFuzzedValues
ERROR: QUERY: ea&brand=phet-io&phetioStandalone&fuzz&phetioLogFuzzedValues
Uncaught Error: Assertion failed: trying to set focus on a Node that is not focusable
STACK: Error: Assertion failed: trying to set focus on a Node that is not focusable
    at window.assertions.assertFunction (http://128.138.93.172/continuous-testing/ct-snapshots/1736251271603/assert/js/assert.js:45:21)
    at assert (../../../../../../../scenery/js/accessibility/pdom/ParallelDOM.ts:800:16)
    at focus (../../../../../sun/js/ComboBox.ts:314:20)
    at focusButtonCallback (../../../../../sun/js/ComboBoxListBox.ts:119:6)
    at apply (../../../../../tandem/js/PhetioAction.ts:162:16)
    at execute (../../../../../sun/js/ComboBoxListBox.ts:144:19)
    at inputEvent (../../../../../../scenery/js/input/Input.ts:1875:91)
    at dispatchToListeners (../../../../../../scenery/js/input/Input.ts:1914:11)
    at dispatchToTargets (../../../../../../scenery/js/input/Input.ts:1828:9)
    at dispatchEvent (../../../../../../scenery/js/input/Input.ts:1628:9)
    at upEvent (../../../../../../scenery/js/input/Input.ts:395:11)
    at apply (../../../../../tandem/js/PhetioAction.ts:162:16)
    at execute (../../../../../../scenery/js/input/Input.ts:1194:23)
    at mouseUp (../../../../../../scenery/js/input/InputFuzzer.js:275:26)
    at mouseToggle (../../../../../../scenery/js/input/InputFuzzer.js:40:11)
    at action (../../../../../../scenery/js/input/InputFuzzer.js:107:6)
    at fuzzEvents (../../../../../joist/js/SimDisplay.ts:221:23)
    at fuzzInputEvents (../../../../../joist/js/Sim.ts:1146:42)
    at fuzzFrame (../../../../../joist/js/Sim.ts:1047:11)

[zepumph]

I think that will clean up CT, but I'll check back in a few columns.

[zepumph]

All fixed up, and I tested manually also by toggling displayOnly mode in studio when the list box was open. Closing