From 41d6bb7ea32c91a15b3a954c1b836b7a29fd550c Mon Sep 17 00:00:00 2001
From: pixelzoom <cmalley@pixelzoom.com>
Date: Tue, 30 Aug 2022 13:14:00 -0600
Subject: [PATCH] convert ComboBoxKeyboardHelpSection to TS,
 https://github.com/phetsims/scenery-phet/issues/769

---
 .../help/ComboBoxKeyboardHelpSection.ts       | 45 +++++++++++--------
 js/keyboard/help/KeyboardHelpSectionRow.ts    |  2 +-
 2 files changed, 27 insertions(+), 20 deletions(-)

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<string>;
 
-    options = merge( {
+  // the item being changed by the combo box, lower case as used in a sentence
+  thingAsLowerCaseSingular?: string | TReadOnlyProperty<string>;
 
-      // {string|TReadOnlyProperty.<string>} Heading for the section, should be capitalized as a title
-      headingString: sceneryPhetStrings.keyboardHelpDialog.comboBox.headingStringStringProperty,
+  // plural version of thingAsLowerCaseSingular
+  thingAsLowerCasePlural?: string | TReadOnlyProperty<string>;
+};
+
+export type ComboBoxKeyboardHelpSectionOptions = SelfOptions & KeyboardHelpSectionOptions;
+
+export default class ComboBoxKeyboardHelpSection extends KeyboardHelpSection {
 
-      // {string|TReadOnlyProperty.<string>} 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.<string>} plural version of thingAsLowerCaseSingular
-      thingAsLowerCasePlural: sceneryPhetStrings.keyboardHelpDialog.comboBox.options,
+    const options = optionize<ComboBoxKeyboardHelpSectionOptions, SelfOptions, KeyboardHelpSectionOptions>()( {
+
+      // 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<string>, so ensure that we have a TReadOnlyProperty<string>.
     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<string> ) => 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<string> | 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.