Mobile VO reads sim title after pressing Start Sunlight button

[Nancy-Salpepi]

Test device
iPad Air II

Operating System
iOS 15.5

Browser
Safari

Problem description
For phetsims/qa#811
After pressing the Start Sunlight Button, mobile VO says the sim title, heading level, and a few other things before saying "sunlight started"

This doesn't occur on my mac with VO.

Visuals

sunlight.mov

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Greenhouse Effect‬ URL: https://phet-dev.colorado.edu/html/greenhouse-effect/1.1.0-dev.9/phet/greenhouse-effect_all_phet.html?screens=1 Version: 1.1.0-dev.9 2022-06-08 20:37:50 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15 Language: en-US Window: 1371x702 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: 256 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[KatieWoe]

This puts you back at the top. If you start swiping to read the next item, you have to read through the whole description before reaching the controls again.

[KatieWoe]

This also seems to occur on other screen readers, such as Jaws, but it is much more noticeable and/or troublesome on Mobile VO due to the comparative limited ability to move focus around.

[jessegreenberg]

Thanks @Nancy-Salpepi and @KatieWoe - This actually makes sense, after the sunlight button is pressed focus is not placed anywhere and it goes to the top of the screen. The screen reader is telling the user where they are after the button disappears.

This may or may not be OK. One way to fix it is to place focus somewhere after the "start sunlight" button is pressed. Then it will likely read the name of the newly focused component and then say "Sunlight started."

Assigning to @arouinfar and @Matthew-Moore240 to decide if anything should be done.

[arouinfar]

For Mobile VO, this sounds like a pretty poor experience. Could we shift focus to H3: Observation Window? That way, screen readers (including Mobile VO) can pick up where they left off. It also won't disturb the focus order of UI elements. Hitting tab should still take users to the Greenhouse Gas Concentration slider.

[jessegreenberg]

I see, makes sense. I think the main thing that will change with this is the heading level that gets read out. This change may or may not prevent VO from reading "article, landmark". Currently we hear:

"Greenhouse Effect - Waves, heading level 1, article, landmark, Sunlight started, warming".

With this change we could hear

"Observation Window, heading level 3, article, landmark, Sunlight started, warming".

or if we are lucky

"Observation Window, heading level 3, Sunlight started, warming".

We don't have a great way to focus non-interactive elements in the PDOM currently, but we could work on that. @arouinfar just want to confirm this is what you were expecting before spending a bit more time on this issue.

[arouinfar]

Yes, that's what I was thinking @jessegreenberg. I'm not particularly worried about "article, landmark" but it seems like better UX to go to the parent H3 rather than all the way back up to the H1.

[jessegreenberg]

OK this is done, I made a new node FocusableHeadingNode to support this.

@arouinfar can you please verify that this is working and the PDOM order around the Observation Window is still looking OK for the waves screen?

[arouinfar]

The behavior looks good in master @jessegreenberg, but I think this should go back to QA to verify in Mobile VO in the next testing cycle.

[jessegreenberg]

OK sounds good, thanks. Adding the "ready-for-review" label for the next dev test.

[jbphet]

Note to QA: Please close after verifying.

[KatieWoe]

I was moved up to the url bar in dev.10, phetsims/qa#819. This was on an iPadOS 15 device.

[Nancy-Salpepi]

For me, in dev.10 with iPadOS 15.5 focus moves to Observation Window Heading Level 3 after pressing Start Sunlight button. I believe that is the intended behavior.

startsunlight.mov

[KatieWoe]

I tried again today and it worked properly. I'm not sure what changed/what I did wrong the first time around, but this can probably be closed if you agree @jessegreenberg

[jbphet]

Since QA seems to have verified it and @KatieWoe said, "...this can probably be closed...", I'm going to go ahead and close it.