search

phetsims / fourier-making-waves

"Fourier: Making Waves" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
6 stars 3 forks source link

Inconsistent text wrapping in keyboard shortcuts dialog with string test #205

Closed stemilymill closed 2 years ago

stemilymill commented 2 years ago

Win10 Chrome v. 94.0.4606.61

for https://github.com/phetsims/qa/issues/711

In the Wave Game screen, in the keyboard shortcuts dialog, the "Check your answer" text wraps with ?stringTest=double whereas all other text shrinks to fit. I did not see this in other string tests.

?stringTest=double keyboard shortcuts double string

?stringTest=long keyboard shortcuts long string

no query keyboard shortcuts reg

pixelzoom commented 2 years ago

Investigating...

I was instructed to use Molecules and Light as the exemplar for how to create keyboard help. It explicitly sets lineWrap in MoleculesAndLightKeyboardHelpContent:

    const rowOptions = { labelOptions: { lineWrap: 200 } };
    const playPauseRow = KeyboardHelpSection.createPlayPauseKeyRow( pauseOrPlayShortcutString, pauseOrPlayShortcutDescriptionString, rowOptions );
    const stepForwardRow = KeyboardHelpSection.createStepForwardKeyRow( stepForwardShortcutString, stepForwardShortcutDescriptionString, rowOptions );

... which looks like this:

screenshot_1307

Fourier therefore followed the same pattern. The relevant code is in GameControlsHelpSection.js, which is explicitly setting lineWrap:

    const rowOptions = { labelOptions: { lineWrap: 200 } };

    const checkAnswerRow = KeyboardHelpSection.createGlobalHotkeyRow(
      fourierMakingWavesStrings.keyboardHelpDialog.checkYourAnswer,
      fourierMakingWavesStrings.a11y.keyboardHelpDialog.checkYourAnswerDescription,
      new LetterKeyNode( 'C' ),
      rowOptions
    );
pixelzoom commented 2 years ago

Since I don't think lineWrap is useful here, I've removed it. See screenshot below with stringTest=double and stringTest=long. Pushed to master and 1.0 branches. Ready for review in next RC.

screenshot_1309 screenshot_1310
pixelzoom commented 2 years ago

Ready for review in next RC. To verify:

  1. Run the sim with ?stringTest=double
  2. Go to the Wave Packet screen
  3. Press the keyboard help button in the navigation bar.
  4. Verify that the keyboard help dialog looks like the screenshot in https://github.com/phetsims/fourier-making-waves/issues/205#issuecomment-933848982
  5. Repeat steps 1-4 with ?stringTest=long