search

phetsims / projectile-data-lab

"Projectile Data Lab" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
0 stars 0 forks source link

Keyboard nav is buggy with projectile selector buttons #255

Closed Nancy-Salpepi closed 6 months ago

Nancy-Salpepi commented 6 months ago

Test device MacBook Air M1 chip

Operating System 14.3.1

Browser Safari 17.3.1

Problem description For https://github.com/phetsims/qa/issues/1060, on all screens: once I focus on the projectile selector buttons (large pink rectangle) on the Field sign with keyboard nav, I can use the arrow keys to move through the different projectiles. Pressing tab again, moves focus to just the increment button. Pressing tab another time moves focus to just the decrement button. If I press either of these, then the large focus rectangle reappears and I have to tab through those buttons once again to move on. It is very odd.

Steps to reproduce

  1. On any screen, launch a bunch of projectiles
  2. Tab to the Field sign so that the focus is around both buttons/data--press the left arrow a couple of times
  3. Press Tab again (focus is now only on increment button) and press space/enter -- focus rectangle is now around buttons/data again
  4. Press Tab 2 times (focus is now only on decrement button) and press space/enter -- focus rectangle is now around buttons/data again
  5. Press Tab --focus is back on increment button

Visuals

https://github.com/phetsims/projectile-data-lab/assets/87318828/04aed81d-10e2-4261-ab7d-e87b6e6ca32a

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Projectile Data Lab‬ URL: https://phet-dev.colorado.edu/html/projectile-data-lab/1.0.0-dev.22/phet/projectile-data-lab_all_phet.html Version: 1.0.0-dev.22 2024-03-18 16:30:54 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3.1 Safari/605.1.15 Language: en-US Window: 1393x699 Pixel Ratio: 2/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 (1.0) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}
Nancy-Salpepi commented 6 months ago

This problem also seems to be specific to safari. The individual increment/decrement buttons aren't part of the tab order for mac + chrome or chromebook but are in safari.

samreid commented 6 months ago

@matthew-blackman and I are wondering if this was fixed by: https://github.com/phetsims/scenery/issues/1606. UPDATE: It was not fixed. We can reproduce the problem on safari. We may need to consult with @jessegreenberg

samreid commented 6 months ago

I fixed this by making the individual left/right buttons non-focusable. It seems to be working well on safari now. Closing.