Can't select/unselect "Custom" option with keyboard navigation

[Nancy-Salpepi]

Test device
MacBook Air M1 chip

Operating System
14.1.1

Browser
Safari 17.1

Problem description
For phetsims/qa#1008, it isn't possible to select or deselect the Custom option on the Lab screen using the arrow keys. If I select the Custom option with the mouse, I can unselect it by pressing shift + tab. Weird!

Steps to reproduce

1. On the Lab Screen, tab to the Orbital System Combobox
2. Use the down arrow to try to select the Custom Option.

OR

1. Change the mass or move a body
2. Tab to the Orbital System Combobox and try to move up in the combobox.

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪My Solar System‬ URL: https://phet-dev.colorado.edu/html/my-solar-system/1.3.0-dev.7/phet/my-solar-system_all_phet.html Version: 1.3.0-dev.7 2023-12-01 16:11:20 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15 Language: en-US Window: 1359x712 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: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[pixelzoom]

Problem reproduced in main.

orbitalSystemComboBox.listbox contains 4 items that are invisible by default, for the 4 client-configurable presets (#233). Also by default, those invisible items preceed "Custom" in the listbox. So my hypothesis is that there's a keyboard input problem with ComboBox, related to items that are not visible. If this hypothesis proves true, this problem may affect all PhET-iO sims that have a ComboBox, because PhET-iO allows you to hide items.

[pixelzoom]

My hypothesis is verified. ComboBoxListBox has keyboard traversal problems when the listbox contains invisible items.

If I run my-solar-system in Studio and make the invisible items visible (orbitalSystem1Item, orbitalSystem2Item, orbitalSystem3Item, orbitalSystem4Item), then I can use the keyboard to traverse to "Custom".

I can also cause this problem to occur in Density:

1. Run Density in Studio. Note that the Intro screen has the comboBox shown in the screenshot below. Use the keyboard to traverse the listbox, verifying that you can visit all items with the up/down arrow keys.
2. Set density.introScreen.view.blockAControlPanel.comboBox.listBox.aluminumItem.visibleProperty to false -- this is the "Aluminum" item that appears above "Custom" in the listbox.
3. Go to the Intro screen
4. Traverse to the comboBox, and note that you can no longer traverse to "Custom" with the up/down arrow keys.

[pixelzoom]

Since I've verified that this is a common-code problem, I've created phetsims/sun#859, with high priority.

This issue is on hold until phetsims/sun#859 is resolved.

[pixelzoom]

I fixed the general problem in phetsims/sun#859.

@Nancy-Salpepi please verify in this sim, close if OK.

[Nancy-Salpepi]

This is fixed in main.
Closing.