NVDA - Space and Enter may not exit dialog

[KatieWoe]

Test device Dell Operating System Win 11 Browser Firefox Problem description For https://github.com/phetsims/qa/issues/831. Seen with NVDA. Haven't been able to reproduce again, so I'm not sure of the exact cause. When trying to exit the Keyboard Nav dialog, pressing enter or space with the x highlighted got rid of the highlight, and tabbing did nothing. It didn't even leave the sim. Pressing enter or space again brought it back, but only esc left the dialog. After starting this issue, I went back to check something, but have not been able to reproduce the issue.

Visuals

https://user-images.githubusercontent.com/41024075/189995076-bd57024a-d702-4148-b696-91b5424e91f2.MOV

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Ratio and Proportion‬ URL: https://phet-dev.colorado.edu/html/ratio-and-proportion/1.2.0-dev.31/phet/ratio-and-proportion_all_phet.html Version: 1.2.0-dev.31 2022-08-24 16:50:40 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:104.0) Gecko/20100101 Firefox/104.0 Language: en-US Window: 1280x667 Pixel Ratio: 1.5/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 Vendor: Mozilla (ANGLE (Intel, Intel(R) HD Graphics Direct3D11 vs_5_0 ps_5_0)) 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: {}

[KatieWoe]

I think I figured out how this happens. If the reading enters into the dialog, or you use arrows to start reading it, then this starts to happen.

[zepumph]

This is very helpful issue for me to see come in. Thank you!

TLDR: This isn't a problem, and I recommend updating QA doc to reflect that and closing.

This isn't a bug or problem at all, but rather just a feature of screen readers, and one that I'm happy for the opportunity to make sure the QA team understands. I don't want to over explain, but I feel like it is important to be complete, so I'm sorry if some of this is review for the team

Screen Readers work as a piece of technology in between the user (keyboard actions) and the browser (the sim). They opperate with something called a virtual cursor, which you can move around without effecting the browser layer. Often the screen reader intercepts controls/behavior without conveying that to the browser (like moving the virtual cursor). In the case described above, this is exactly what is happening here.

Using this line of code, we can see that the focus doesn't leave the close button at all in the browser as I use the arrow keys to navigate through the text of the keyboard dialog.

setInterval( ()=> console.log( document.activeElement), 300)

It continues to print that the focused item is the close button, but the screen reader has moved the virtual cursor, so the screen reader is trying to apply the space/enter onto whatever the text is that you are currently on with virtual cursor.

@jessegreenberg can you please confirm that you agree with the above?

[jessegreenberg]

Yes, that is right - this is the expected behavior for reading with the virtual cursor. @KatieWoe hopefully that makes sense, let us know if you have further questions about this.

[KatieWoe]

Sounds good. Thanks