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

No keyboard nav instructions for moving objects #168

Closed KatieWoe closed 3 years ago

KatieWoe commented 3 years ago

Test device Dell Operating System Win 10 Browser Chrome Problem description For https://github.com/phetsims/qa/issues/701. The keyboard nav dialog on the third screen does not discus dragging objects around. This means there are no instructions for the k1 and lambda 1 measuring tools. They are not complicated to figure out, but we may want to add instructions anyway.

Visuals

moveobjects

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Fourier: Making Waves‬ URL: https://phet-dev.colorado.edu/html/fourier-making-waves/1.0.0-dev.47/phet/fourier-making-waves_en_phet.html Version: 1.0.0-dev.47 2021-08-29 19:29:57 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/92.0.4515.159 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 commented 3 years ago

That's also true of the first (Discrete) screen.

@arouinfar please specify what (if anything) you'd like done here. If you want keyboard help, please provide a mockup of what that should look like for each screen.

arouinfar commented 3 years ago

For the Discrete and Wave Packet screens, add a "Measurement Tools" section directly below the "Slider Controls" section. The "Measurement Tools" title only appears on the Discrete screen, but I think it is appropriate for both screens. If you disagree, @pixelzoom , we can instead use "Component Spacing Tools" as the title on the Wave Packet Screen.

We can model these sections after the "Move Book" section of Friction.

image

They keys will be exactly the same, but the text should read:

Measurement Tools Move tool [arrows] or [WASD] Move slower [Shift] + [arrows] or [Shift] + [WASD]

pixelzoom commented 3 years ago

@jessegreenberg @zepumph Presumably what @arouinfar has specified in the comment above is the same (or similar, except for labeling) for anything that has a KeyboardDragListener.

For implementing:

Move tool [arrows] or [WASD]

... I see KeyboardHelpSelection.getGrabReleaseHelpSection, but I cannot use it because it has language specific to "grab".

For implementing:

Move slower [Shift] + [arrows] or [Shift] + [WASD]

... it looks like Friction rolls its own help control in MoveBookHelpSection. So I'm guessing there's no support in KeyboardHelpSelection.

How do you you recommend that I proceed? Do you want to provide reusable support for describing KeyboardDragListener keys? Or should I continue with the "roll your own" pattern?

pixelzoom commented 3 years ago

On second thought... I'll start by cobbling together my own MeasurementToolsKeyboardHelpSection, and then have someone from the a11y team review it.

zepumph commented 3 years ago

The language (left column with English) tends to be sim specific enough that most of our factored out code has been in KeyboardHelpIconFactory with creating the right column Node with icons. I would recommend cobbling! Happy to review after the initial pass.

pixelzoom commented 3 years ago

Done in the above commit. Screenshots below is the same for Discrete and Wave Packet screens.

One deviations from @arouinfar's specification: the "Measurement Tools" section is ABOVE the "Slider Controls" section, because @terracoda said in a recent discussion that more sim-specific things come before more general things.

@arouinfar please review in master.

screenshot_1228
arouinfar commented 3 years ago

One deviations from @arouinfar's specification: the "Measurement Tools" section is ABOVE the "Slider Controls" section, because @terracoda said in a recent discussion that more sim-specific things come before more general things.

Good call! Looks good in master.

Not sure if the implementation needs further review, so back to @pixelzoom.

pixelzoom commented 3 years ago

I'm confident that the implementation is solid. I reused everything that I could from KeyboardHelpIconFactory and KeyboardHelpSection. So I'll close this issue.

@KatieWoe thanks for reporting. This is a nice improvement.