VO says "text" after temperature unit

[Nancy-Salpepi]

Test device
MacBook Air (m1 chip)

Operating System
macOS 12.4

Browser
Safari

Problem description
For phetsims/qa#811

When moving through the temperature units, VO adds the word "text" after each unit.

Steps to reproduce

1. Turn on VO
2. Press the Start Sunlight button (optional)
3. Tab to the temperature combo box.
4. Arrow through the different temperature options

Visuals

tempvalues.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: {}

[jessegreenberg]

I took a look at the parallel DOM and don't see anything amiss. It is indeed "text", so maybe VoiceOver is reporting that role of the content. @Nancy-Salpepi can you please see if this happens in the first combobox example here? https://dequelabs.github.io/combobo/demo/

[Nancy-Salpepi]

@jessegreenberg in the first combobox it said "clickable" after each. I then tried the second combo box and VO didn't say anything extra after each option.

[jessegreenberg]

Got it, OK thanks.

Some differences between our listbox and deque's:

• Ours is a ul with role listbox and children that are li with role option.
• deque's is a div with role combobox and children that are div with role option

I don't know why that would make "text" get read out after our list items.

@terracoda do you have any recommendations about next steps for this issue? Should we change our markup or aria? Or should we leave it as is?

[Nancy-Salpepi]

noting that mobile VO doesn't say "text" as I move through the temperature units

[terracoda]

I am pretty sure when we created the HTML for PhET’s combobox, the role combobox was not well supported.

Things may have changed.

If role combobox is well supported now, we may need to update our design pattern.

[terracoda]

Just an FYI, that deque example sounds good with iOS VoiceOver.

[terracoda]

I think for our HTML design pattern for combobox, VoiceOver has always readout "text" on the options. Not sure why.
Here's a screenshot of the Molarity's published combobox.

[terracoda]

I listened to the deque examples with regular MacOS VoiceOver.

The patterns seem to have some issues:

1. VO sonifies each option with an annoying interactive chime. I think because each option is interactive - not sure. I hear this chime on some of our custom interactions, e.g., Both Hands interaction in RaP, and it really annoys me that VO does this.
2. The keyboard interactions don't seem to be as intuitive as ours - space and enter keys have very specific functions - one for opening the list, the other for making a selection. Our pattern allows either key for both opening and selecting.
3. Escape key works to dismiss, but doesn't re-speak the current selection - our pattern does re-speak the current selection.
4. The reading of content seems inconsistent. I can get different read outs depending on whether I use arrow keys or the tab key to get to the deque combobox.
5. I don't always get the option count.

VO with Arrow Keys, I consistently get all the information about the combobox

Sometimes with Tab Key, I only get the currently selected item - nothing else. And if the current selection has 2 words, I only get one of the words. This seems weird to me.

Honestly, I think our pattern remains more robust and more usable than this one. And, I much prefer hearing "text" to "clickable", and in our pattern we always get the option count, but in the deque pattern we do not always get the option count. In our pattern VoiceOver does not do its annoying chime.

[terracoda]

@jessegreenberg, I am marking as won't fix, though, I am open to code options that would remove "text" from our combobox options.

At this point in time, I think our pattern offers a better experience in our context.

[terracoda]

And just noting that our pattern is based one of Bryan Gravante's patterns. Though I am no longer certain which one :-)
https://lists.w3.org/Archives/Public/w3c-wai-ig/2018JulSep/0201.html

[jessegreenberg]

Great, thanks for the reminders and resources @terracoda! I am going to go ahead and close this, but I am going to add it to the list of screen reader quirks that we expect on VoiceOver + macOS Safari.