search

phetsims / molecules-and-light

"Molecules and Light" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
2 stars 5 forks source link

Screen reader says that Visible light was selected when UV light was (Jaws) #260

Closed KatieWoe closed 4 years ago

KatieWoe commented 4 years ago

Test device Dell Operating System Win 10 Browser Chrome Problem description For https://github.com/phetsims/QA/issues/461. Connected to https://github.com/phetsims/molecules-and-light/issues/259. There are some situations where the screen reader seems to indicate that the wrong light was selected. This occurs when using Jaws highlight to select an option, rather than the pink highlight (described in the above issue). This does not occur consistently, but can still be reproduced in a reasonable amount of time. Steps to reproduce

  1. Reproduce https://github.com/phetsims/molecules-and-light/issues/259
  2. Use the bugged method of select to choose visible light
  3. Press the right arrow until it lets you choose UV as indicated by the green line (if this happens in one press the bug is more likely to happen.
  4. Press space for UV
  5. Repeat until bug appears

Visuals https://drive.google.com/file/d/1I4zBizHxdu8mgFNK0O3vSODi0mz2pUdu/view?usp=sharing

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Molecules and Light‬ URL: https://phet-dev.colorado.edu/html/molecules-and-light/1.5.0-dev.21/phet/molecules-and-light_en_phet.html?ea&a11y&supportsSound Version: 1.5.0-dev.21 2019-12-13 19:43:51 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36 Language: en-US Window: 1536x722 Pixel Ratio: 2.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: {}
jessegreenberg commented 4 years ago

I agree that this seems incorrect and see the issue in the provided video recording. But I am not able to produce this bug on my machine with JAWS.

When I use the cursor method to select a radio button, it correctly reports the new button.

jessegreenberg commented 4 years ago

At least JAWS is correctly reporting "Visible button, NOT checked 3/4" in the recorded video. One difference I notice is that in your recording @KatieWoe the pink highlight does not appear when the radio button is selected. That doesn't happen for me, is anything done to get it in that state @KatieWoe?

KatieWoe commented 4 years ago

I used space. I think you mentioned using enter. That might be doing it.

jessegreenberg commented 4 years ago

Interesting, even with space it selects the new radio button and moves focus to the pink highlight to the "Ultraviolet" radio button.

jessegreenberg commented 4 years ago

@KatieWoe and I met. It seems like I undertsnad the issue but we are seeing different behaviors. I am going to search for user settings related to this. I am also going to update JAWS to see if that has an impact.

jessegreenberg commented 4 years ago

OK updating JAWS definitely had an impact and I am seeing this behavior now. Ill investigate soon.

jessegreenberg commented 4 years ago

I am looking into this again. To clarify, it isn't that JAWS says "Visible light was selected when UV light was (Jaws)", its that it says "visible light was NOT checked, rather than saying UV light is checked" (see https://drive.google.com/file/d/1I4zBizHxdu8mgFNK0O3vSODi0mz2pUdu/view?usp=sharing). The experience is likely still confusing to the user but it isn't as wrong.

jessegreenberg commented 4 years ago

With monitorEvents( window ) in chrome dev tools I see image

So in this case, Jaws is trying to "click" something by sending a fake mouse event to the screen. That is why we lose focus in these examples.

jessegreenberg commented 4 years ago

When I do the same steps in a basic html example I get the following events image

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TEST PAGE</title>
  </head>
  <body>
<form>
  <ul>
    <li>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">Male</label><br>
    </li>
    <li>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">Female</label><br>
    </li>
    <li>
      <input type="radio" id="other" name="gender" value="other">
      <label for="other">Other</label>
    </li>
  </ul>
</form>
  </body>
</html>
jessegreenberg commented 4 years ago

Coming back to this issue and I am no longer able to produce it. I see the green line selecting the "list item" for the radio button, and then it moves to the radio button just like in https://github.com/phetsims/molecules-and-light/issues/260#issue-539318694 but activating the radio button with spacebar always results in JAWS reading the correct radio button label. Closing this issue.