diff --git a/js/keyboard/help/ComboBoxKeyboardHelpSection.ts b/js/keyboard/help/ComboBoxKeyboardHelpSection.ts index 91430296..fcfe0127 100644 --- a/js/keyboard/help/ComboBoxKeyboardHelpSection.ts +++ b/js/keyboard/help/ComboBoxKeyboardHelpSection.ts @@ -1,6 +1,5 @@ // Copyright 2020-2022, University of Colorado Boulder -// @ts-nocheck /** * Help section for explaining how to use a keyboard to interact with a ComboBox. * @@ -9,38 +8,47 @@ import DerivedProperty from '../../../../axon/js/DerivedProperty.js'; import StringProperty from '../../../../axon/js/StringProperty.js'; -import merge from '../../../../phet-core/js/merge.js'; +import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js'; +import optionize from '../../../../phet-core/js/optionize.js'; import StringUtils from '../../../../phetcommon/js/util/StringUtils.js'; import sceneryPhet from '../../sceneryPhet.js'; import sceneryPhetStrings from '../../sceneryPhetStrings.js'; import TextKeyNode from '../TextKeyNode.js'; import KeyboardHelpIconFactory from './KeyboardHelpIconFactory.js'; -import KeyboardHelpSection from './KeyboardHelpSection.js'; +import KeyboardHelpSection, { KeyboardHelpSectionOptions } from './KeyboardHelpSection.js'; import KeyboardHelpSectionRow from './KeyboardHelpSectionRow.js'; -class ComboBoxKeyboardHelpSection extends KeyboardHelpSection { +type SelfOptions = { - /** - * @param {Object} [options] - */ - constructor( options ) { + // Heading for the section, should be capitalized as a title + headingString?: string | TReadOnlyProperty; - options = merge( { + // the item being changed by the combo box, lower case as used in a sentence + thingAsLowerCaseSingular?: string | TReadOnlyProperty; - // {string|TReadOnlyProperty.} Heading for the section, should be capitalized as a title - headingString: sceneryPhetStrings.keyboardHelpDialog.comboBox.headingStringStringProperty, + // plural version of thingAsLowerCaseSingular + thingAsLowerCasePlural?: string | TReadOnlyProperty; +}; + +export type ComboBoxKeyboardHelpSectionOptions = SelfOptions & KeyboardHelpSectionOptions; + +export default class ComboBoxKeyboardHelpSection extends KeyboardHelpSection { - // {string|TReadOnlyProperty.} the item being changed by the combo box, lower case as used in a sentence. - thingAsLowerCaseSingular: sceneryPhetStrings.keyboardHelpDialog.comboBox.option, + public constructor( providedOptions?: ComboBoxKeyboardHelpSectionOptions ) { - // {string|TReadOnlyProperty.} plural version of thingAsLowerCaseSingular - thingAsLowerCasePlural: sceneryPhetStrings.keyboardHelpDialog.comboBox.options, + const options = optionize()( { + + // SelfOptions + headingString: sceneryPhetStrings.keyboardHelpDialog.comboBox.headingStringStringProperty, + thingAsLowerCaseSingular: sceneryPhetStrings.keyboardHelpDialog.comboBox.optionStringProperty, + thingAsLowerCasePlural: sceneryPhetStrings.keyboardHelpDialog.comboBox.optionsStringProperty, + // KeyboardHelpSectionOptions a11yContentTagName: 'ol', // ordered list vBoxOptions: { spacing: 8 // A bit tighter so that it looks like one set of instructions } - }, options ); + }, providedOptions ); // options may be string or TReadOnlyProperty, so ensure that we have a TReadOnlyProperty. const thingAsLowerCasePluralStringProperty = ( typeof options.thingAsLowerCasePlural === 'string' ) ? @@ -51,7 +59,7 @@ class ComboBoxKeyboardHelpSection extends KeyboardHelpSection { options.thingAsLowerCaseSingular; // Create a DerivedProperty that fills in a plural/singular pattern, and support dynamic locale. - const createDerivedStringProperty = patternStringProperty => new DerivedProperty( + const createDerivedStringProperty = ( patternStringProperty: TReadOnlyProperty ) => new DerivedProperty( [ patternStringProperty, thingAsLowerCasePluralStringProperty, thingAsLowerCaseSingularStringProperty ], ( patternString, thingAsLowerCasePluralString, thingAsLowerCaseSingular ) => StringUtils.fillIn( patternString, { @@ -88,5 +96,4 @@ class ComboBoxKeyboardHelpSection extends KeyboardHelpSection { } } -sceneryPhet.register( 'ComboBoxKeyboardHelpSection', ComboBoxKeyboardHelpSection ); -export default ComboBoxKeyboardHelpSection; \ No newline at end of file +sceneryPhet.register( 'ComboBoxKeyboardHelpSection', ComboBoxKeyboardHelpSection ); \ No newline at end of file diff --git a/js/keyboard/help/KeyboardHelpSectionRow.ts b/js/keyboard/help/KeyboardHelpSectionRow.ts index b725609e..9144f6b1 100644 --- a/js/keyboard/help/KeyboardHelpSectionRow.ts +++ b/js/keyboard/help/KeyboardHelpSectionRow.ts @@ -49,7 +49,7 @@ type LabelWithIconListOptions = { type LabelWithIconOptions = { // {string|null} to provide the PDOM description of this row - labelInnerContent?: string | null; + labelInnerContent?: string | TReadOnlyProperty | null; // {string} - Content for this icon that is read by the Voicing feature when in a KeyboardHelpSection. If null, // will default to the options.labelInnerContent.