Add KeyboardHelpDialog to binder, phetsims/a11y-research#195

Signed-off-by: Michael Kauzmann <[email protected]>

doc/KeyboardHelpDialog.md

@@ -0,0 +1,10 @@
+---
+title: KeyboardHelpDialog
+category: other-ui
+---
+
+
+## General Design Considerations
+
+* A keyboard help dialog helps guide users with keyboard interaction.
+* If an interaction comes first as an interaction in the sim, it should likely come first in the help dialog. 

js/KeyboardHelpButton.ts

@@ -85,6 +85,9 @@ class KeyboardHelpButton extends JoistButton {
     backgroundColorProperty.link( backgroundColor => {
       icon.image = backgroundColor.equals( Color.BLACK ) ? keyboardIcon_png : keyboardIconOnWhite_png;
     } );
+
+    // support for binder documentation, stripped out in builds and only runs when ?binder is specified
+    assert && phet?.chipper?.queryParameters?.binder && keyboardHelpDialogCapsule.getElement();
   }
 }
 

js/KeyboardHelpDialog.ts

@@ -20,6 +20,7 @@ import joist from './joist.js';
 import JoistStrings from './JoistStrings.js';
 import { AnyScreen } from './Screen.js';
 import Tandem from '../../tandem/js/Tandem.js';
+import InstanceRegistry from '../../phet-core/js/documentation/InstanceRegistry.js';
 
 // constants
 const TITLE_MAX_WIDTH = 670;
@@ -111,6 +112,14 @@ export default class KeyboardHelpDialog extends Dialog {
       otherNode: shortcutsTitleText,
       otherElementName: PDOMPeer.PRIMARY_SIBLING
     } );
+
+    // support for binder documentation, stripped out in builds and only runs when ?binder is specified
+    if ( assert && phet?.chipper?.queryParameters?.binder ) {
+      screenContentNodes.forEach( node => {
+        content.children = [ node ];
+        InstanceRegistry.registerDataURL( 'joist', 'KeyboardHelpDialog', this );
+      } );
+    }
   }
 }