diff --git a/js/density-main.ts b/js/density-main.ts index 4a423b1..78694be 100644 --- a/js/density-main.ts +++ b/js/density-main.ts @@ -19,6 +19,7 @@ import DensityDescriptionStrings_en from './description/density-description-stri import DensityDescriptionStrings_es from './description/density-description-strings_es.js'; // eslint-disable-line default-import-match-filename import DensityDescriptionLogic from './description/density-description-logic.js'; // eslint-disable-line default-import-match-filename import DescriptionContext from '../../joist/js/DescriptionContext.js'; +import '../../scenery-phet/js/accessibility/describers/Alerter.js'; const simOptions: SimOptions = { credits: { diff --git a/js/description/density-description-logic.js b/js/description/density-description-logic.js index 1e78766..09f9403 100644 --- a/js/description/density-description-logic.js +++ b/js/description/density-description-logic.js @@ -12,6 +12,30 @@ export default () => phet.joist.DescriptionContext.registerLogic( { if ( introScreen ) { const introScreenView = context.get( 'density.introScreen.view' ); + const alerter = new phet.sceneryPhet.Alerter( { + alertToVoicing: false, + descriptionAlertNode: introScreenView + } ); + + const blockA = context.get( 'density.introScreen.model.blocks.blockA' ); + const blockB = context.get( 'density.introScreen.model.blocks.blockB' ); + + [ blockA, blockB ].forEach( block => { + const isBlockA = block === blockA; + + // const blockUtterance = new phet.utteranceQueue.Utterance( { + // + // } ); + + context.lazyLink( block.visibleProperty, isVisible => { + alerter.alert( strings.blockVisibilityAlert( isBlockA, isVisible ) ); + } ); + context.lazyLink( block.userControlledProperty, userControlled => { + alerter.alert( strings.blockUserControlledAlert( isBlockA, userControlled ) ); + } ); + } ); + + const simStateDescriptionNode = new phet.scenery.Node( { tagName: 'p' } ); @@ -30,11 +54,13 @@ export default () => phet.joist.DescriptionContext.registerLogic( { ] } ) ); - const modeProperty = context.get( 'density.introScreen.model.modeProperty' ); - - context.link( modeProperty, mode => { + context.link( context.get( 'density.introScreen.model.modeProperty' ), mode => { simStateDescriptionNode.innerContent = strings.screenSummarySimStateDescription( mode.toString() ); } ); + + // context.lazyLink( context.get( 'density.introScreen.model.modeProperty' ), mode => { + // alerter.alert( mode.toString() === 'ONE_BLOCK' ? strings.oneBlockAlert() : strings.twoBlockAlert() ); + // } ); } }, added( tandemID, obj ) { diff --git a/js/description/density-description-strings_en.js b/js/description/density-description-strings_en.js index 616a34e..eeb7a27 100644 --- a/js/description/density-description-strings_en.js +++ b/js/description/density-description-strings_en.js @@ -11,14 +11,12 @@ export default () => phet.joist.DescriptionContext.registerStrings( { screenSummarySimStateDescription( blockMode ) { - if ( blockMode.toString() === 'ONE_BLOCK' ) { - return 'We have one block'; - } - else if ( blockMode.toString() === 'TWO_BLOCKS' ) { - return 'We have two blocks'; - } - else { - throw new Error(); - } + return `There ${blockMode === 'ONE_BLOCK' ? 'is one block' : 'are two blocks'}.`; + }, + blockVisibilityAlert( isBlockA, isVisible ) { + return `Block ${isBlockA ? 'A' : 'B'} ${isVisible ? 'added' : 'removed'}`; + }, + blockUserControlledAlert( isBlockA, isUserControlled ) { + return `${isUserControlled ? 'Grabbed' : 'Dropped'} block ${isBlockA ? 'A' : 'B'}`; } } );