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

Keyboard nav doesn't always work in Equation combo box #195

Closed KatieWoe closed 2 years ago

KatieWoe commented 2 years ago

Test device Dell Operating System Win 10 Browser Chrome Problem description For https://github.com/phetsims/qa/issues/711. Seen with keyboard nav When using the arrow keys to move through the options in the equation combo box on the first screen, only some of the inputs take. Many don't seem to register. The other combo boxes on that page don't seem to do this.

Visuals

https://user-images.githubusercontent.com/41024075/135163737-5ef7b6b6-7f08-4097-a26f-06f599510039.MOV

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Fourier: Making Waves‬ URL: https://phet-dev.colorado.edu/html/fourier-making-waves/1.0.0-rc.1/phet/fourier-making-waves_all_phet.html Version: 1.0.0-rc.1 2021-09-28 15:44:23 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/94.0.4606.61 Safari/537.36 Language: en-US Window: 1280x657 Pixel Ratio: 1.5/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 EDIT: replaced "dropdown box" with "combo box" throughout.

pixelzoom commented 2 years ago

The Equations combo box has a dynamic list. Items in the list are visible based on the domain ("Function of" combo box selection). Based on the behavior I'm seeing... My guess is that ComboBox or ComboBoxListBox is not handling focus traversal properly, and is trying to traverse through items that are invisible.

@jessegreenberg appears to be the responsible dev for focus traversal in ComboBoxListBox, so I'll start by assigning to him. Are there changes that need to be made to support invisible items?

pixelzoom commented 2 years ago

I investigated the general problem, and it's indeed a bug in ComboBoxListBox. Tracking in https://github.com/phetsims/sun/issues/720, and putting this issue on-hold until it's fixed.

pixelzoom commented 2 years ago

phetsims/sun#720 is fixed. I'll need to patch https://github.com/phetsims/sun/commit/8248b7bd3e73a08b5376f6721a2d68f77a87afcd into the 1.0 branch.

pixelzoom commented 2 years ago

https://github.com/phetsims/sun/commit/8248b7bd3e73a08b5376f6721a2d68f77a87afcd was cherry-picked into a new branch of sun, and patched into Fourier 1.0.

Ready for verification in the next RC. To verify:

  1. Run the sim, go to the Discrete screen
  2. Set the "Function of" combo box to "space"
  3. Use the keyboard to navigate to the "Equations" combo box. Verify that you using the arrow keys to move through items in the listbox works as expected.
  4. Repeat steps 2 & 3 for the two other "Function of" combo box choices.
Nancy-Salpepi commented 2 years ago

Keyboard nav in Equations Combo Box is working properly now (verified using above steps).