zepumph
commented
3 years ago This went smoothly for RectangularRadioButton. I committed the simple line change above. @jessegreenberg it would be good to take a look at that to confirm.
It was much weirder for AquaRadioButton. I made a patch below to note my progress. It is not a ButtonNode, so I tried to compose Voicing into AquaRadioButton.
The issue was that upon selecting new items with arrow keys, the next AquaRadioButtons gets focused. I traced it back to this line in Input.js. I'm unsure why there is this discrepancy between radio button implementations.
Steps to reproduce:
- Apply this patch when sun/joist/tambo are on preferences branch
- Go to BASE
- With dev tools open, go to the aqua radio buttons with keyboard, focus them. Note that the object response works correctly here.
- Then arrow key down twice to "Show Charge Differences", there should be a debugger and in it you can see that from the selection change, there is a focus change based on the relatedTarget code in Input.js
The issue here is that we can't hard code this in common code if it happens on selection too, because selection often removes the object response because it is part of the context response. @jessegreenberg please advise. Note that this isn't blocking Ratio and proportion, but means that the radio buttons in common code have an inconsistent state and API between each other.
```diff
Index: sun/js/AquaRadioButtonGroup.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/sun/js/AquaRadioButtonGroup.js b/sun/js/AquaRadioButtonGroup.js
--- a/sun/js/AquaRadioButtonGroup.js (revision 1b9f94afce534dc27912b6303e304d8ee241dc82)
+++ b/sun/js/AquaRadioButtonGroup.js (date 1620075246258)
@@ -90,13 +90,20 @@
new Node( { children: [ new HStrut( maxItemWidth ), item.node ] } ) :
item.node;
- const radioButton = new AquaRadioButton( property, item.value, content,
- merge( {}, options.radioButtonOptions, {
- tandem: item.tandemName ? options.tandem.createTandem( item.tandemName ) : Tandem.REQUIRED,
- labelContent: item.labelContent || null,
- soundPlayer: multiSelectionSoundPlayerFactory.getSelectionSoundPlayer( i ),
- a11yNameAttribute: CLASS_NAME + instanceCount
- } ) );
+ const aquaRadioButtonOptions = merge( {}, options.radioButtonOptions, {
+ tandem: item.tandemName ? options.tandem.createTandem( item.tandemName ) : Tandem.REQUIRED,
+ soundPlayer: multiSelectionSoundPlayerFactory.getSelectionSoundPlayer( i ),
+ a11yNameAttribute: CLASS_NAME + instanceCount
+ } );
+
+ // If there is labelContent, then apply it for interactive description (pdom) and voicing (object response)
+ if ( item.labelContent ) {
+ aquaRadioButtonOptions.labelContent = item.labelContent;
+ aquaRadioButtonOptions.voicingCreateObjectResponse = event => event.type === 'focus' ? item.labelContent : null;
+ }
+
+ const radioButton = new AquaRadioButton( property, item.value, content,
+ aquaRadioButtonOptions );
// set pointer areas
if ( options.orientation === 'vertical' ) {
Index: sun/js/AquaRadioButton.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/sun/js/AquaRadioButton.js b/sun/js/AquaRadioButton.js
--- a/sun/js/AquaRadioButton.js (revision 1b9f94afce534dc27912b6303e304d8ee241dc82)
+++ b/sun/js/AquaRadioButton.js (date 1620073898099)
@@ -8,6 +8,7 @@
import InstanceRegistry from '../../phet-core/js/documentation/InstanceRegistry.js';
import merge from '../../phet-core/js/merge.js';
+import Voicing from '../../scenery/js/accessibility/speaker/Voicing.js';
import FireListener from '../../scenery/js/listeners/FireListener.js';
import Circle from '../../scenery/js/nodes/Circle.js';
import Node from '../../scenery/js/nodes/Node.js';
@@ -70,6 +71,9 @@
super();
+ // voicing
+ this.initializeVoicing();
+
// @public (read-only)
this.value = value;
@@ -177,5 +181,7 @@
AquaRadioButton.DEFAULT_RADIUS = DEFAULT_RADIUS;
+Voicing.compose( AquaRadioButton );
+
sun.register( 'AquaRadioButton', AquaRadioButton );
export default AquaRadioButton;
\ No newline at end of file
Index: scenery/js/accessibility/speaker/webSpeaker.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/scenery/js/accessibility/speaker/webSpeaker.js b/scenery/js/accessibility/speaker/webSpeaker.js
--- a/scenery/js/accessibility/speaker/webSpeaker.js (revision 69220950bad3891beb0e4016a065938008c1c816)
+++ b/scenery/js/accessibility/speaker/webSpeaker.js (date 1620073765266)
@@ -55,7 +55,7 @@
this.initialized = false;
// whether or ot the webSpeaker is enabled - if false, there will be no speech
- this.enabledProperty = new BooleanProperty( false );
+ this.enabledProperty = new BooleanProperty( true );
// @private {DerivedProperty} - Controls whether or not speech is allowed with synthesis.
// This controlling Property can be set with setCanSpeakProperty.
Index: balloons-and-static-electricity/js/balloons-and-static-electricity-main.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/balloons-and-static-electricity/js/balloons-and-static-electricity-main.js b/balloons-and-static-electricity/js/balloons-and-static-electricity-main.js
--- a/balloons-and-static-electricity/js/balloons-and-static-electricity-main.js (revision 6853e1abaf23506b503bb08fac97462a86c6c0a0)
+++ b/balloons-and-static-electricity/js/balloons-and-static-electricity-main.js (date 1620073774549)
@@ -6,15 +6,16 @@
* @author Sam Reid (PhET Interactive Simulations)
*/
+import PreferencesConfiguration from '../../joist/js/preferences/PreferencesConfiguration.js';
import Screen from '../../joist/js/Screen.js';
import Sim from '../../joist/js/Sim.js';
import simLauncher from '../../joist/js/simLauncher.js';
-import SoundOptionsDialogContent from './balloons-and-static-electricity/view/SoundOptionsDialogContent.js';
import Tandem from '../../tandem/js/Tandem.js';
import BASEConstants from './balloons-and-static-electricity/BASEConstants.js';
import BASEModel from './balloons-and-static-electricity/model/BASEModel.js';
import BASEKeyboardHelpContent from './balloons-and-static-electricity/view/BASEKeyboardHelpContent.js';
import BASEView from './balloons-and-static-electricity/view/BASEView.js';
+import SoundOptionsDialogContent from './balloons-and-static-electricity/view/SoundOptionsDialogContent.js';
import balloonsAndStaticElectricityStrings from './balloonsAndStaticElectricityStrings.js';
// constants
@@ -36,6 +37,14 @@
graphicArts: 'Sharon Siman-Tov',
thanks: 'Thanks to Mobile Learner Labs for working with the PhET development team to convert this simulation to HTML5.'
},
+ preferencesConfiguration: new PreferencesConfiguration( {
+ audioOptions: {
+ supportsVoicing: true
+ },
+ visualOptions: {
+ supportsInteractiveHighlights: true
+ }
+ } ),
hasKeyboardHelpContent: true,
createOptionsDialogContent: () => SOUND_OPTIONS_DIALOG_CONTENT
};
Index: utterance-queue/js/UtteranceQueue.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/utterance-queue/js/UtteranceQueue.js b/utterance-queue/js/UtteranceQueue.js
--- a/utterance-queue/js/UtteranceQueue.js (revision 35ec385a6ef4b6515024277ea1befb125fb8e3dd)
+++ b/utterance-queue/js/UtteranceQueue.js (date 1620075246268)
@@ -155,6 +155,10 @@
utterance = new Utterance( { alert: utterance } );
}
+ if ( utterance.alert === 'Show charge differences' ) {
+ debugger;
+ }
+
// If there are any other items in the queue of the same type, remove them immediately because the added
// utterance is meant to replace it
this.removeUtterance( utterance, {
```
jessegreenberg
terracoda
From https://github.com/phetsims/ratio-and-proportion/issues/384, it seems that we can get an on-focus object response put into common code for all radio buttons. For selection, we usually defer to the usage to implement (for interactive description and voicing), but it should be easy enough to use labelContent to supply the voicing object response.
I'll do this for aqua and rectangular radio buttons.