Keyboard nav on handles only works with right/left

[KatieWoe]

Test device Samsung Operating System Win 11 Browser Chrome Problem description For https://github.com/phetsims/qa/issues/1100 When using keyboard nav to move the wall of the container or the lid of the container, only left/right will produce movement, but up/down will make sound and disable other items like it should be moving, while no movement happens. Steps to reproduce

1. Go to the first screen
2. With keyboard nav, focus on the handle to enlarge/shrink the container
3. Press the up/down arrow keys and compare to the right/left arrow keys

Visuals

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Gas Properties‬ URL: https://phet-dev.colorado.edu/html/gas-properties/1.1.0-dev.17/phet/gas-properties_all_phet.html Version: 1.1.0-dev.17 2024-06-20 23:30:56 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Language: en-US Window: 1536x695 Pixel Ratio: 1.25/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 32767x32767 OES_texture_float: true Dependencies JSON: {}

[pixelzoom]

Meeting with @arouinfar and @Nancy-Salpepi:

• We want only left/right arrow buttons to work.
• We do not want sound with up/down buttons. But it looks like that might be baked into SoundRichDragListener. I'll need to consult with @jessegreenberg.

[pixelzoom]

Constraining the motion to horizontal is the responsibility of the sim; see ResizeHandleKeyboardDragListener and LidHandleKeyboardDragListener. What we need is an option to turn off sound for up/down or left/right arrows, for cases where dragging is constrained to 1 axis.

It looks like @jessegreenberg is out this week, so this may be blocked until 7/8.

[pixelzoom]

I said:

What we need is an option to turn off sound for up/down or left/right arrows, for cases where dragging is constrained to 1 axis.

Looking at SoundDragListener, this does not seem practical. Here's the code that plays the sound when the drag starts:

      // @ts-expect-error - The args have implicit any type because of the union of KeyboardDragListenerOptions and
      // DragListenerOptions. I (JG) couldn't figure out how to type this properly, even defining the args.
      listenerOptions.start = ( ...args ) => {

        // @ts-expect-error - see above note.
        previousStart && previousStart( ...args );
        dragClip!.play();
      };

There is currently has no way to check which key has been pressed. Perhaps that could be resolved by figuring out the problem mentioned with args, and maybe getting key info from those args. But it would add complication.

I'm going to discuss options with @arouinfar.

[pixelzoom]

Summary of discussion with @arouinfar:

• The handles were designed to use DragListener, not to behave like sliders, so the fact that only left/right arrows work is correct.
• It's OK that there is no sound for the up/down arrows, but no up/down motion. This tells the user that that the handles will not move up/down.
• If someone wants to change this in the future, it can be addressed in Gas Properties (and other sims that behave like this, eg FEL and GO) via an MR.

So there is nothing to do here, and closing this issue as "won't fix".

[pixelzoom]

Reopening. While investigating a different issue, I discovered this option in KeyboardDragListener. With keyboardDragDirection: 'leftRight' we get the desired behavior.

// Possible movement types for this KeyboardDragListener. 2D motion ('both') or 1D motion ('leftRight' or 'upDown').
type KeyboardDragDirection = 'both' | 'leftRight' | 'upDown';
...
  // Specifies the direction of motion for the KeyboardDragListener. By default, the position Vector2 can change in
  // both directions by pressing the arrow keys. But you can constrain dragging to 1D left-right or up-down motion
  // with this value.
  keyboardDragDirection?: KeyboardDragDirection;

[pixelzoom]

@KatieWoe please review, close if OK. When using the keyboard, the left/right arrows will move the handles and make sound. The up/down arrows will be ignored and will not make sound.

[KatieWoe]

Looks good on main